PlantUMLの基本
PlantUMLの基本
PlantUMLの基本的なコード例と画像を以下に示す。
PlantUMLは最初と最後に@startumlキーワードと@endumlキーワードを使用する。
@startuml
window -> page
page -> window
@endumlこのコードを画像として出力した結果が下図である。
処理の内容記述
PlantUMLで矢印に処理の内容を記述したい場合は下のように書く。
window -> page : ウィンドウからページに遷移する。下に出力を示す。
タイトル記述
PlantUMLでタイトルを記述する際にはtitleキーワードを使用する。
@startuml
title ページの遷移図
window -> page : ウィンドウからページに遷移する。
page -> window : ページからウィンドウに戻る。
@enduml下に出力を示す。
表示と出力
プレビュー表示
alt + Dボタンを押すとVScode上でプレビューが表示される。
画像出力
ctrl + shift + Pでコマンドパレットが出現する。
コマンドパレットからファイル内のダイアグラムをエクスポートを選択。
画像形式を選択すると、outディレクトリが作成されその中に画像が生成される。
グループで分ける
PlantUMLはgroupキーワードとendキーワードで囲むを使用することで、その対象をまとめ上げることが出来る。
以下にコード例を示す。
@startuml
group windowの処理
window -> page
page -> window
end
@enduml下に出力を示す。
publish: true
ブロックの形変更
PlantUMLでは、上のwindowとついているブロックの形を変更することが出来る。
以下にコード例を示す。
@startuml
actor User
participant window
participant page
User -> window
group windowの処理
window -> page
page -> window
end
@enduml
デフォルトブロックはparticipant で定義されている。
もし人を表したい場合はactorキーワードを使用する。
下に出力を示す。
