VS CodeでMarkdown+PlantUML環境を作る
2023-04-25
モデル図やシーケンス図などをドキュメントに埋め込むときに,Draw.io などで作成した画像を埋め込むでも良いですが,コードで指定できたら楽だということで,PlantUML 環境を作ります.
ドキュメントは Markdown で作成することが多いため,Markdown に PlantUML を埋め込むことを前提としています.
Markdown 設定
Markdown All in One という Extension を利用していますが,必須ではありません.
Markdown All in One - Visual Studio Marketplace
PlantUML 設定
PlantUML という Extension をインストールします.
PlantUML - Visual Studio Marketplace
また,Markdown プレビュー時にレンダリングするため,VS Code の設定に以下を追加します.
settings.json
{
...,
"plantuml.render": "PlantUMLServer",
"plantuml.server": "https://www.plantuml.com/plantuml"
}
ここでは plantuml.server
に外部サーバを指定していますが,大きいサイズのダイアグラムになるとエラーが発生するため,ローカルサーバを利用するよう推奨されています.
ローカルの PlantUML サーバは Docker で起動できます.
詳細はExtension 公式ドキュメントをご確認ください.
記述方法
Markdown にコードを書く要領で,言語に plantuml
を指定するとダイアグラムのイメージが挿入されます.
```plantuml
@startuml
Alice -> Bob : Hello
@enduml
```
以下は画像出力のイメージです.