Zenn
📃

VSCode版PlantUMLでUML作図できるようにする

2024/03/26に公開
VS Code
PlantUML
UML
VS Code 拡張機能
tech

インストール環境

  • Windows 11
  • VSCode 1.87.2

インストールしたVSCodeパッケージ

  • VSCode版PlantUML v2.17.5

VSCode版PlantUML動作のためにインストールしたもの

  • Java
  • Chocolatey
    • Chocolatey経由のplantuml
    • Graphviz（plantumlと一緒にChocolatey経由でインストール）
  • 環境変数
    • JAVA -> "JAVA_HOME"
    • Graphviz -> "GRAPHVIZ_DOT"

VSCode版PlantUMLを動かすのに必要なもの

  • plantuml.jar を Chocolateyを使用してインストールしておく必要がある
  • chocolatey で plantuml を インストールし、Windows 環境変数 GRAPHVIZ_DOT (c:\program files\graphviz\bin\dot.exe など) を定義して GraphViz のインストールを指定しておけば、最新の GraphViz が依存関係として自動的にインストールされる

JAVAの確認

インストールしておく必要がある

$ java --version
java 21.0.2 2024-01-16 LTS
Java(TM) SE Runtime Environment (build 21.0.2+13-LTS-58)
Java HotSpot(TM) 64-Bit Server VM (build 21.0.2+13-LTS-58, mixed mode, sharing)

環境変数JAVA_HOMEの確認

echo $JAVA_HOME
C:\Program Files\Java\jre-1.8\bin\

JAVAの環境変数設定（GUIで行う場合）

  1. Widndowsスタートで検索「環境変数」と入力
  2. システム環境変数「JAVA_HOME」設定
    例 "C:\Program Files\Java\jre-1.8\bin"
  3. システム環境変数「Path」設定
    例 "%JAVA_HOME%\bin"

Chocolatey のインストール

https://chocolatey.org/install

管理者権限でPowerSHellを起動し上記サイトに書かれているインストールコマンドをコピペして実行

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

インストール後、PowerSHellでChocolateyのバージョン確認をしておく。

Chocolatey で plantuml をインストール

chocolatey で plantuml を インストールする
関連するGraphvizも一緒にいれてくれる

choco install plantuml

環境変数 GRAPHVIZ_DOT の設定

"C:\Program Files\Graphviz\bin\dot.exe" の場合

VSCode版PlantUML拡張機能でchocolatey の plantuml.jarを設定する

### @ext:jebbs.plantuml
### Plantuml: Jar
C:\ProgramData\chocolatey\lib\plantuml\tools\plantuml.jar

UML生成テスト

UML1.pu

VSCode: ファイル -> 新規作成 -> "UML1.pu" を作成
下記コードを張り付けて ALT+D で作図

UML1.pu
@startuml

(*) --> "Find Event"
"Find Event" -> "Attend Event"

if "Capacity?" then
  ->[ok] "Create Ticket"
else
  -->[full] if "Standby?" then
    ->[ok] "Standby Ticket"
  else
    -->[no] "Cancel Ticket"
    "Cancel Ticket" --> (*)
  endif
endif

"Create Ticket" --> ==show==
"Standby Ticket" --> ==show==
==show== --> "Show Ticket"
"Show Ticket" --> (*)

@enduml

Markdownで記述

# ```plantuml
@startmindmap
* Debian
** Ubuntu
*** Kubuntu
** SteamOS
** Raspbian with a very long name
*** <s>Raspmbc</s> => OSMC
*** <s>Raspyfi</s> => Volumio
* Windows
**:Windows7
Windows8
Windows10
Windows11;
@endmindmap
# ```

PlantUML記法

https://plantuml.com/ja/sitemap-language-specification

Discussion