PlantUML備忘録(画面遷移図) - Qiita
画面遷移図で役立った構文 業務で画面遷移図(状態遷移図)を描きながら開発しているシステムの理解、未解決のバグを理解するタスクに取り組んだ時に助けられた構文を備忘録として残しておこうと思います。 合成状態 タブ遷移などを描くときに便利な構文として合成状態が有ります。 @startuml left to right direction title Example State Transition Diagram1 [*] -down-> メニュー1 メニュー1 -down-> メニュー2 state メニュー2 { [*] -down-> 概要 概要 -down-> 詳細 : 詳細 詳細 -down-> 概要 : 概要 } @enduml
設計 | PlantUMLでアクティビティ図作成( 処理フローと並行処理を可視化 ) - わくわくBank
処理プロセスを整理したいときに、アクティビティ図を書くことがあります。「処理フロー」と「並行に実行できる処理」を可視化することができます。ここでは、PlantUMLを利用してアクティビティ図を書く方法について紹介します。 アクティビティ図を書く目的 私は、以下目的でアクティビティ図を書きます。 必要な前処理の確認 並行して作業を進められるアクティビティの発見 日常のルーチン作業を可視化して、改善を検討するのにも活用できます。 基本的な書き方｜「旧記法」と「新記法」 アクティビティ図は、開始点から始まり、 アクティビティを順番に記述して、終了点 で処理の終了です。 PlantUMLでアクティビティ図を書く方法として、旧記法と新記法があります。 旧記法
VScode+pandoc+Lualatexで日本語pdfをMarkdownから出力する - Qiita
事の経緯 ここ数年間Markdownで様々なメモや実験プロトコルをVScode+pandocで作製していたが、日本語markdownは専らWordファイルに変換していました。最近TeXliveを(なんとなく)導入したので「latex+pandocでmarkdown→pdfできたら便利じゃない？」と思いpdf化に勤しんでいたら何故か日本語の含まれている文書ではpdf化できないらしいので、その解決策を備忘録代わりにQiitaにあげておきます。他にハマっている人（いるか知らないけど）の助けになるかも？ 原因 @sky_y さんの書かれた『メモ:Pandoc+LaTeXで気軽に日本語PDFを出力する』に非常にわかりやすく原因(+解決策)が書かれています。是非ご参照ください。 簡単に言いますと 1. Pandocが使うPDF変換エンジンは、デフォルトでpdflatex 2. pdflatexは日本語
Mono Works
Home About > Mono Worksについて > Mono Worksのお仕事 > お知らせ > 採用案内 ブログ ブログ検索 Mono Works 株式会社Mono Works OfficialSite ようこそ、株式会社Mono Worksへ 新着記事 2023. May. 10 WSL環境の移行 2023. Apr. 10 はじめての自作キーボード：Keyball61 2022. Oct. 05 事務所を移転しました。 2022. Sep. 17 ラズパイでラジオ録音してNASへファイル転送 2022. Mar. 26 Surface Go 2 と Chrome OS お知らせ 2022. Oct. 05 事務所を移転しました。 2021. Apr. 01 事務所を移転しました。 2016. Aug. 22 Webサイトをリニューアルしました。 2014. Sep. 26
Pandoc で PlantUML を出力
pandoc は、当然ですがデフォルトでは plantuml に対応していません。 しかし、 markdown でドキュメントを書く際は、 plantuml をよく使用するので、 plantuml の画像を出力できるようにします。 前提 お約束の前提ですが、以下の環境とします。 Windows 10 Home 64bit また、あらかじめ以下もインストール済みとします。 graphviz （plantuml を扱うのに必要） python3 （pandoc のフィルターに使用） 結果的に python は使用しませんでした node.js (npm を使用するのに必要) plantuml とは plantuml がどんなもので、plantuml そのものをどうやってインストールするかは省略します。 詳しくは↓サイトに紹介されています。 qiita.com pandoc の plantuml
PlantUML で JSON データを簡単視覚化
最近，仕事で使うことがあってたまたま気がついたのだが， PlantUML って JSON や YAML のデータを視覚化できるんだね。 やり方は簡単。たとえば { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 28, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spous
結局UMLとかシーケンス図とかAWSの図とかどれで描くと良いのよ？と思ったときの選択肢 - Qiita
自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf
【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜 - Qiita
draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。 ツイッター公式アカウント 公式ブログ ショートカット ショートカット集です。机の上に置いて覚えましょう。 Line / 線 まずは最も頻繁に使う Line(線)の使い方からご紹介します。 矢印をまっすぐに揃える ちまちまと矢印の線をドラッグして微調整し
AWS Labs製のPlantUMLライブラリ『AWS Icons for PlantUML』の使い方 - Qiita
はじめに オークファングループ Advent Calendar 2019 16日目 はじめます！ 弊社はインフラ環境として AWS を使用しています。 構成図のツールでは PlantUML を採用しており、 インフラチーム全体が構成図をコードで管理出来るようにしております。 今回は AWS の構成図を PlantUML で描く際に使用している『AWS Icons for PlantUML』について ご紹介したいと思います。 なお PlantUML そのものについては色々記事が出ていると思いますので割愛させていただきます。 『AWS Icons for PlantUML』って？ PlantUML で AWS の構成図を作成するツールといえば標準ライブラリとして提供されている AWS-PlantUML が有名かと思います。 PlantUML Standard Library milo-mind
PlantUMLでAWSのシステム構成図がなるべく管理される世界観を考えてみた - Qiita
先日、パブリックの方も対応したようです リリースノート - Qiita これをやった経緯 これまで経験してきたプロジェクトでも多くのシステム構成図を作成してきましたが、ER図とか仕様書とか構成図も含め、 ドキュメントってやっぱり最新の状態で管理されないなー というのを結構、課題に感じていまして、しばらくどうしたらいいんだろう と考えを巡らせていたのですが、システム構成図に関してはこうするのはどうだろう という僕以外の優秀なエンジニアの皆様への問題提起となります。 これまでは何が問題だったのか？ 図を描きやすいツール(Cacooとかね)を使って構成図を作成していて、開発するソースや使ってるツールとは離れた場所で管理される状態だった 開発プロジェクトへ参加した際に最低限必要なもの(ソースとか、ミドルウェアとか、タスク管理ツールとか)の中にいないため、途中から入った人には共有されないこともあった
PlantUMLでいろんなアイコンを使ったシステム構成図を作る
[参考記事]PlantUML + Visual Studio Codeを導入する（Windows環境） [参考記事]PlantUML + Visual Studio Codeを導入する（Ubuntu環境） UML図とかちょっとした説明に使う図に、あんなアイコンを入れたい、あのサービスのアイコンを入れたい…と思うときがある。 自分はそういう時、plantuml-icon-font-spritesを使っています。 https://github.com/tupadr3/plantuml-icon-font-sprites 適当なフォルダを覗くと、画像ファイルも一緒に入っているので、確認しながら選ぶことができる。 使ってみる 適当に使ってみる。 @startuml !define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-
Excel以外でネットワーク構成図を書きたくなったのでPlantUMLとnwdiagを試してみました。 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 はじめまして。インフラまわりの担当をしているいせです。 インフラエンジニアなら誰しもExcelでネットワーク構成図を作成した経験があるのではないでしょうか？ 私はラクーンに就職する前に2社で働いた経験があるのですが、いずれの現場でもExcelの構成図を触る機会がありました。 そんなExcelのネットワーク構成図ですが、私は以下の点で不便に感じています。 図形の中のテキストを検索できない 図形の位置をそろえるのが面倒 構成図を更新したときなどに差分比較しにくい 構成図の規模が大きくなるとうまくレイアウトするのが大変 そこで、テキストベースでホストやネットワークの関係性(ホストAとBは同じセグメント、セグメントZとYはルータRを介して接続される、など)を記述する
AWS 構成図を PlantUML で描画できる『AWS-PlantUML』 - 継続は力なり
タダです. AWS 環境の構成図を書く機会で PowerPoint や Cacoo 等のサービスを使うことがあると思います.作図もコードで制御する方法もないかと思い調べてみたら,「AWS-PlantUML」というツールがありました.今回はこのツールを使って作図する方法と所感を書いていきます. github.com 「AWS-PlantUML」とは 「AWS-PlantUML」を導入するか 「AWS-PlantUML」の使い方 AWS アイコンの指定方法 サービス間のシーケンス図 その他の記法 作図コードのサンプル例 構成図をアウトプットする まとめ 「AWS-PlantUML」とは 「AWS-PlantUML」とは,PlantUML 形式で AWS 構成図を書くためのツールになります.PlantUML の実行環境は調べればたくさん出てきますが,僕は普段 Visual Studio Code
【PlantUMLの使い方】PlantUMLでマインドマップを作成する - システムとモデリング
コードで図が書ける便利なPlantUMLに最近マインドマップ描画機能が追加されたので試してみたいと思います。 PlantUML関連の記事は以下 otepipi.hatenablog.com otepipi.hatenablog.com otepipi.hatenablog.com otepipi.hatenablog.com マインドマップの例題 例題として以下のマインドマップをPlantUMLで書き直してみます。 出典は以下のサイトです cacoo.com PlantUMLによるマインドマップ PlantUMLの日本語ドキュメントは以下です。 plantuml.com PlantUMLで作成したマインドマップは次のようになりました。 またコードは以下になります。 @startmindmap title マインドマップ例 * ファッション ** 靴 *** スニーカー *** ブーツ **
AWS-PlantUMLで使える全AWSリソースの定義と画像表示 - Qiita
お題 PlantUMLという、ダイアグラムを独自のDSLで生成するツールがある。 （名前にUMLは付くもののUML以外にも、ワイヤーフレーム、ガントチャート、マインドマップ、ER図などさまざまなダイアグラムを生成できる。） そのPlantUMLの公式ライブラリとして、AWS-PlantUMLというものがあり、これを使うとテキスト形式のファイルでAWSリソースを使ったアーキテクチャ図を表現できる。 具体的には以下の通り。 1) 以下のようなPlantUML独自のDSLでテキストファイルを作る。 @startuml !define AWSPUML https://raw.githubusercontent.com/milo-minderbinder/AWS-PlantUML/release/18-2-22/dist !includeurl AWSPUML/common.puml !includ
PlantUMLを通じてドメインモデル図の書き方を学ぶ - EurekaMoments
ダイアグラム別UML徹底活用 第2版 作者:井上樹翔泳社Amazon 目次 目次 はじめに プロジェクトの開始時にやるべきこと ドメインモデル図とは ドメインモデル図を描く手順 1. 「名詞」の抽出 2. モデル同士の関係を線と矢印で表す 3. 中心となるモデルに色を付ける ドメインモデル図を用いる際の注意点 ドメインモデル図の活用方法 ドメインモデル図の作成例 例1. 認証システムの場合 例2. 課金システムの場合 例3. 本屋の場合 例4. 投稿システムの場合 GitHub 参考資料 はじめに ソフトウェアの仕様書、設計書の作成や管理を効率化するために、Markdown + PlantUMLによる作成方法を日々模索しています。 しかしながら、そもそもUML図の正式な書き方というものをちゃんと分かっていないというのが正直なところなので、PlantUMLを通じてUMLの各種図の書き方を勉強
PlantUMLでAWSサービスを含む図を作る
プレゼンテーション資料をMarkdown形式で書いていて、図を入れたいが図はどうやって用意しようか、となりました。 せっかくテキストエディタでプレゼンを作れるようにしているのに、図を描くのにテキストエディタでなくドローツ […] プレゼンテーション資料をMarkdown形式で書いていて、図を入れたいが図はどうやって用意しようか、となりました。 せっかくテキストエディタでプレゼンを作れるようにしているのに、図を描くのにテキストエディタでなくドローツールを開くのは面倒だな、テキストで図を描ければ、ソースコードとして管理できるから似たような図を量産するのも楽だし、バージョン管理で変更点もわかりやすい。 ということで探したところ、Plantuml が見つかりました。日本語のマニュアルもあるし、評判もいいみたい。 インストールしようとしたところ、図を1,2個作るだけならオンラインでできるようです。試
PlantUML Standard Library
PlantUML Standard Library Welcome to the guide on PlantUML's official Standard Library (stdlib). Here, we delve into this integral resource that is now included in all official releases of PlantUML, facilitating a richer diagram creation experience. The library borrows its file inclusion convention from the "C standard library", a well-established protocol in the programming world. Standard Librar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - milo-minderbinder/AWS-PlantUML: PlantUML sprites, macros, and other includes for AWS components.
Real World PlantUML
