環境
- Windows11 64bit
- VS Code（Version: 1.94.2）
- PlantUML 拡張（Version: 2.18.1）
前提条件
- VS Codeをインストールしていること
- Javaの実行環境があること
-
この記事では、VS Codeインストール手順とJavaの実行環境構築についてを書いてません！（各々で調べてください…） - VS Code公式サイト
- 64bit Javaダウンロードページ(Windows)
-
PlantUML のインストール
Visual Studio MarketplaceからPlantUMLをインストールする
- VS Codeで、ctrl + Pを実行してQuick Openを開く
- Quick Open に「ext install plantuml」と入力する
- 「PlantUML」を選択してインストールする
※ 検索結果に「PlantUML Syntax」とかでてくるけど、これらは無視。シンプルに「PlantUML」を選ぶ
しなくてよいこと
他の記事では、Graphviz (dot.exe)を別途用意するようなことが書かれているが、
VS CodeのPlantUML 拡張パッケージが勝手にいろいろやってくれるらしい。
※ Graphvizの公式サイトにも書かれている
If you use a recent version (that is at least version 1.2020.21), you don't need to manually install GraphViz anymore !
動作確認
プレビュー表示
- VS Codeで、新規に.puファイルを作成する（File -> New File -> "test.pu"を作成）
- 以下のシーケンス図の構文を入力する
- コマンドパレット(CTRL + SHIFT + P)から、[PlantUML: Preview Current Diagram] を選択すると、プレビューが表示される
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml
画像で出力する
- 任意のpuファイルを開く
- コマンドパレット(CTRL + SHIFT + P)から、[PlantUML: Export Current Diagram] を選択する
- 保存したい拡張子を選択する
参考サイト
-
PlantUML
-
公式サイトなのに、たくさん広告が出てうざったいです！
-
- Visual Studio MarketplaceのPlantUMLのページ