VSCodeにPlantUML拡張機能をインストールして図を作成する方法

PlantUMLとは

PlantUMLはオープンソースのUMLダイアグラム作成用言語。

以下のようなコードから図をSVGやPNG形式で作成することができる。

@startuml example
User -> Server : request
User <- Server : response
@enduml

左図がsvg、右図がpng

pngで書き出すとぼやけるので、なるべくsvgで書き出す。

svgならファイルサイズが小さく、テキストをコピーできるという利点もある。

VSCode PlantUML拡張機能をインストールする。

ターミナルでも使用できるようJAVAとplantuml.jarも別途インストールする。

インストールしたらファイルを.plantumlの拡張子で保存すればalt+Dでプレビューを確認できる。

shift+command+PでPlantUMLの中からエクスポートのSVGを選択して書き出す。

ターミナルならplantuml.jarのある場所を指定して下記のコマンドを実行する。

$ java -jar plantuml.jar -tsvg test.plantuml

PlantUMLの書き方はPlantUML公式サイトおよびwikiに日本語で掲載されている。

PlantUML wiki