Note

VS CodeでMarkdown+PlantUML環境を作る

作成日

2023年4月25日

モデル図やシーケンス図などをドキュメントに埋め込むときに，Draw.io などで作成した画像を埋め込むでも良いですが，コードで指定できたら楽だということで，PlantUML 環境を作ります．

ドキュメントは Markdown で作成することが多いため，Markdown に PlantUML を埋め込むことを前提としています．

Markdown 設定

Markdown All in One という Extension を利用していますが，必須ではありません．

PlantUML という Extension をインストールします．

また，Markdown プレビュー時にレンダリングするため，VS Code の設定に以下を追加します．

settings.json

{
  ...,
  "plantuml.render": "PlantUMLServer",
  "plantuml.server": "https://www.plantuml.com/plantuml"
}

ここでは plantuml.server に外部サーバを指定していますが，大きいサイズのダイアグラムになるとエラーが発生するため，ローカルサーバを利用するよう推奨されています．

ローカルの PlantUML サーバは Docker で起動できます．

詳細はExtension 公式ドキュメントをご確認ください．

Markdown にコードを書く要領で，言語に plantuml を指定するとダイアグラムのイメージが挿入されます．

@startuml
Alice -> Bob : Hello
@enduml

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