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
```

以下は画像出力のイメージです.

plantuml.jpg