考えるための道具 UML わかりやすく図を描く PlantUML × Visual Studio Code mac
こんにちは、こんばんは、shinmrです。
文章でアウトプットすることは、やった方がいい。
でも、文章だけで伝わらないこともたくさん。
図が描けると、図で表現できると
何倍も、何倍も、伝わる効率が上がる。
図を手軽に描く、何かいいもの無いかなぁ
と思っていたところ、
下記の組み合わせが、パチパチと言葉を書きながら
図で表現できるので簡単そう！
PlantUML + Visual Studio Code
色々な図が書けるらしいので、使ってみようかと。
・シーケンス図 / Sequence diagram
・ユースケース図 / Usecase diagram
・クラス図 / Class diagram
・アクティビティ図 / Activity diagram
・コンポーネント図 / Component diagram
・状態遷移図 / State diagram
・オブジェクト図 / Object diagram
こんな悩みが解消します。ぜひ、使ってみてください。
・図を簡単にかけるツールを探している
・UMLに興味があるけど、書き方がわからない
・ExcelやWord、PPT、Visioでのお絵かきに疲れた、、
思いたったその日から、描けます。僕も思いたったの昨晩です。
PlantUML + Visual Studio CodeでUMLを描く
1.環境構築
うちのPCのOSはMacOS。
UMLの描画ツールとツールが利用するjavaをインストールする必要がある模様。
・PlantUML
・Graphviz
・JDK
1-1.PlantUMLのインストール
UMLの描画ツールです。
brewからインストール出来ます。
brew install plantuml公式サイトはこちら。
1-2.Graphvizのインストール
これまた、brewからインストール出来ます。
PlantUMLが内部で使ってるツールです。
brew install graphviz公式サイトはこちら。
1-3.javaのインストール
ツールが動くのに利用するJava Development Kit (JDK)もインストール。
JREでは動かなかった、JDKが必要みたい。
1-4.Visual Studio Codeのインストール
ここからダウンロードしてインストールします。
1-5.拡張パッケージokazuki PlantUMLのインストール
Visual Studio Codeにて、
command + Pを押してext install okazukiplantumlでインストール。
2.UMLを書く
PlantUMLでUMLを描くときには、こんな感じで始めます。
@startuml
ここに色々書いていく
@enduml
で、書いてみた。
料理をシーケンス図で表現して風。
あくまで風。
@startuml
actor A
A -> 冷蔵庫
冷蔵庫 -> シンク: 準備
note right 冷蔵庫
材料：
人参
大根
うどん
end note
activate シンク
シンク -> コンロ: 焼く
コンロ -> シンク: 切る
deactivate シンク
@enduml3.図をプレビュー
貼り付けたらoption+dを押してUML図を描画。
できた！こんな感じ。
４. 画像ファイルとして出力
ファイルに出力しないと始まらない。
ファイルへの出力方法は下記。
"command + Shift + P" でコマンドパレットを開く
PlantUML: Export Current Diagram と入力する
最後に
今回は、ここまで。
練習を兼ねて、他にも色々書いてみようと思います。
・ステートチャート図
フロー図をかいてみる
・コンポーネント図
DIYで作るものの構成の表現
・ガントチャート
物づくりのタスクフロー
・シーケンス図
レシピの工程表現
いろいろ書くには、書き方が知りたいもの。
書き方（PlantUMLの文法）については、
"PlantUML Language Reference Guide"としてPDFファイルが提供されています。
PlantUML Language Reference Guide にある日本国旗を選択する
"PlantUML_Language_Reference_Guide_JA.pdf"がダウンロードされる
なお、plantuml.com でも同様の説明がありますが、広告表示がうるさいので、PDFファイルの方が読みやすいです。
更新履歴
20200912 初版投稿