始めに
3か月ぶりの登場です。迷走星人です。 今回は「Visual Studio Code(以後VSCode)」でUML図を作成する方法について紹介します。
環境構築
1.インストーラの入手
以下のインストーラを入手してきます。
2.拡張機能のインストール
VSCodeがインストール出来たら、UML図を描画するために、以下の拡張機能をインストールします。
- Japanese Language Pack for Visual Studio Code
- 日本語言語パック(インストール直後は英語)
- PlantUML
上記の拡張機能は以下の手順でインストール
- VSCodeの画面の左下にある歯車のアイコンをクリック
- 「拡張機能」の項目を選択
- 手順2.実施後、画面にその時点でインストールされている拡張機能の一覧が表示されるので、
冒頭にある検索テキストボックスにインストールしたい拡張機能を入力 - 手順3.で拡張機能を見つけたら、「インストール」をクリック
詳細は以下のサイトを参照してください。
PlantUMLでの図の書き方
拡張機能のインストールまで完了したら、いよいよPlantUMLでUML図を描画してみます。 まずは基本の描き方です。 VSCodeでUMLソースコードファイル(ここでは拡張子は「.pu」とします)を開き、ファイルの冒頭と末尾に以下の記述をします。
@startuml @enduml
この2つの行の間に描きたいUML図のソースコードを書いていきます。 例えば、アクティビティ図やシーケンス図を描く時は以下の様に記述します。
@startuml
title アクティビティ図サンプル
start
:処理1;
:処理2;
if (分岐) then (分岐の結果(真))
:処理3;
else (分岐の結果(偽))
:処理4;
endif
while (ループ)
:処理5;
if (終了判定) then (真)
break
endif
:処理6;
endwhile
if (分岐) then (真)
stop
endif
switch (分岐2)
case (ケース1)
:処理7;
case (ケース2)
:処理8;
case (ケース3)
:処理9;
case (ケース4)
:処理10;
case (ケース5)
:処理11;
endswitch
end
@enduml
@startuml
title シーケンス図サンプル
box ユーザー : #HotPink
participant ユーザ1 as User1
participant 管理人1 as Admin1
end box
box 画面 : #Brown
participant 画面1 as Form1
participant 画面2 as Form2
end box
box クラス : #LightGreen
participant クラス1 as Class1
participant クラス2 as Class2
end box
box データベース #0000CC
database DB1 as DB1
end box
activate User1
activate Admin1
alt ユーザ1
User1 -> Form1 : 開く
activate Form1
User1 -> Form1 : ボタン押下
Form1 -> Class1 : インスタンス生成
activate Class1
group 内部処理
Class1 -> DB1 : 取得
activate DB1
DB1 -> Class1 : 取得結果
deactivate DB1
Class1 -> Class1 : 内部処理
end
Class1 --> Form1
deactivate Class1
Form1 --> User1
deactivate Form2
else 管理人
Admin1 -> Form2 : 開く
activate Form2
opt 新規登録者有
Admin1 -> Form2 : 登録
Form2 -> Class2 : インスタンス生成
activate Class2
loop 登録者リストループ
Class2 -> DB1 : 登録
activate DB1
DB1 -> Class2 : 登録結果
deactivate DB1
end
Class2 -> Form2 : 実行結果
deactivate Class2
end
Form2 --> Admin1
deactivate Form2
end
deactivate Admin1
deactivate User1
@enduml
PlantUMLは他にもマインドマップやJSONの構成図を描くことが出来ます。 それぞれの図の描き方は以下の通りです。
@startmindmap title マインドマップ図サンプル + NodeRoot ++ NodeSub01-01 +++ NodeSub02-01 ++ NodeSub01-02 -- NodeSub01-03 --- NodeSub02-02 -- NodeSub01-04 @endmindmap
@startjson
{
"key01": "val01",
"key02": {
"subKey01" : "subVal01",
"subKey02" : "subVal02"
},
"Key03" : [],
"Key04" : [
"elem1",
"elem2",
"・・・",
"elemN"
]
}
@endjson
PlantUMLでの図の描き方については、日本語のオンラインマニュアルも公開されているので、そちらも参照してください。
Markdown Preview Enhancedの導入
「Markdown Preview Enhanced」の拡張機能をインストールすると、Markdown形式のファイルの中にPlantUMLの図を描くことが出来ます。詳細は以下のサイトを参考にしてください。
ただし、上記のマインドマップ図やJSON図を描く時は少し注意が必要です。 これらの図を描く時は、 「@startuml」「@enduml」だけでなく、更にその間に「@startmindmap」「@endmindmap」または、「@startjson」「@endjson」の挿入が必要になります。後は、同じ描き方です。
