Open3

【WSL】VSCode + PlantUMLでUMLを書く

はるはる

はじめに

WSL環境で、VSCodeとPlantUMLでUMLを書く方法をまとめておきます。

環境

環境は以下になります。

手順

コマンドはすべてWSLのターミナルに入力します。

  1. Javaをインストール
java -version

コマンド 'java' が見つかりません。次の方法でインストールできます:
※ 以下省略
OpenJDK のリストを表示します。
※ openjdk-17-jdk があることを確認します。

apt-cache search openjdk

openjdk-17-jdk - OpenJDK Development Kit (JDK)
インストールします。

sudo apt update
sudo apt install openjdk-17-jdk

バージョンを確認します。

java -version

openjdk version "17.0.6" 2023-01-17
OpenJDK Runtime Environment (build 17.0.6+10-Ubuntu-0ubuntu122.04)
OpenJDK 64-Bit Server VM (build 17.0.6+10-Ubuntu-0ubuntu122.04, mixed mode, sharing)

引用:https://qiita.com/studio_meowtoon/items/4d11e94a2389758759cd
2. graphizをインストール

sudo apt install graphviz

https://www.graphviz.org/download/
3. 拡張機能をインストール
以下のサイトより、VSCodeに、PlantUMLの拡張機能をインストールします。
https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

参考にしたサイト

具体的な手順を参考にしました。
https://qiita.com/zb185423/items/7fea8c2fbb6f542cd5b6
Javaのインストール方法を参考にしました。
https://qiita.com/studio_meowtoon/items/4d11e94a2389758759cd#jdk-インストール

はるはる

実際に書いてみる

以下のように書くと、書くことができます。

@startuml

:管理者: as admin
:一般ユーザ: as user
(ユースケース) as use

admin -> use
user ..> use

note bottom of admin : 図中にコメントを書けます
note right of use
 このユースケースは、
 サンプルです。
end note

@enduml

引用:https://qiita.com/zb185423/items/7fea8c2fbb6f542cd5b6

出力された画像

画像ファイルを出力する

作成したUMLを画像として出力します

  1. Ctrl + Shift + Pでコマンドパレットを開く
  2. PlantUML: Export Current Diagramと入力する

引用:https://qiita.com/Charotarou/items/10bd47c68a1190061858