VS CodeでUML図を作成してみた


【2019/11/10 更新】
VS Codeをアップデートしたら文字化けするようになってしまったので、文字化けの対処法について追記しました。

目次

  1. PlantUML環境構築
    1. WindowsのPCにjavaを入れる場合
    2. PCにjavaをインストールしたくない場合(dockerが使える場合)
  2. クラス図の作成方法
  3. UML図のエクスポート方法
  4. 注意点等
    1. 日本語が文字化けする場合
    2. plantuml-serverの設定について


1.PlantUML環境構築

1-A WindowsのPCに直接インストールする場合

PlantUMLを動かすためには、javaとgraphvizが必要ですので、まずはそれぞれインストールしていきます。

[java]
https://java.com/ja/download/
↑公式サイトからjavaをダウンロードします。

“JavaSetup8u231.exe”みたいな名前の奴がダウンロードされるので、クリックしてインストールを開始します。
権限さえあれば特に問題なくインストールできるかと思います。

[graphviz]
graphvizはAT&T研究所が開発したオープンソースのツールパッケージです。
Plant UMLで図を作成する際のベースとなります。

https://www.graphviz.org/download/
↑こちらも公式サイトからダウンロードしてきます。

基本的にはstable版でOKです。
windowsの方はmsiをダウンロードでOK。

こちらも権限さえあれば特に問題なくインストールできるかと思います。

[VS Code拡張機能]
最後に、VS CodeにPlantUMLの機能を追加します。

拡張機能を開いて、”plantuml”と検索しましょう。

↓が出てくるはずなのでインストールします。

この方法でインストールした場合は、これでPlantUMLが使えるようになっているはずです。
(javaのインストール先をいじったりしている人は適宜調整してください)


1-B PCにjavaをインストールしたくない場合(dockerが使える場合)

plantumlで描画する場合、専用のplantuml-serverがあったほうがレンダリングの速度が速いです。

また、javaをwindowsのPCに入れると、「PC毎にパスの設定がめんどくさい」・「ライセンス上使いにくい」、といった場合もあるかもしれません。

こういった場合は、dockerコンテナとして動かすというのが良い手です。
(docker環境が無い場合は素直に1-Aの方法でインストールした方が楽です)

PlantUMLは幸いなことに公式のdockerコンテナがdockerhubに公開されています。
> docker pull plantuml/plantuml-server

以下でplantuml-serverのコンテナが起動できます。
> docker run -itd -p 10080:8080 --name plantuml-server plantuml/plantuml-server
※赤字のポート番号は適宜空いているところを選択してください。指定しない場合は8080が使用されます。

続いて、VS CodeにPlantUMLの拡張機能をインストールします。
これは1-Aの場合と同じなので省略します。

dockerコンテナとして立ち上げたplantuml-serverを使用するように以下の設定を変更します。
※”Server”の項目の接続先・ポート番号は適宜変更してください。

plantuml-serverを使用する場合の環境構築はこれで完了です。


2.クラス図の作成法

PlantUMLでは*.wsd, *.pu, *.puml, *.plantuml, *.iumlの形式のファイルをUML図のファイルとして扱います。

まずは、*.wsdでUML図のベースとなるテキストファイルを作成します。

以下は車クラスの例です。
※「車について無知すぎるやろ」みたいなツッコミはやめてください…

@startuml
title クラス図

class 車 {

最高速
加速
ハンドリング
加速する()
減速する()
曲がる()
}

class エンジン {
馬力
出力を上げる()
出力を下げる()
}

class タイヤ {
グリップ力
回転する()
}

class 乗員 {
名前
大きさ
乗る()
降りる()
}

車 “1” *– “1” エンジン
車 “1” *– “4” タイヤ

車 “1” o– “0..5” 乗員

@enduml


そしてAlt+Dを押すと以下の図が描画されます。


テキストベースで種々の図を書くことができるので、Excelクラス図の100倍は書きやすいです。

UML図の詳しい記法は公式ページでどうぞ。
http://plantuml.com/ja/index

一応、VS Code拡張機能の公式もありますが、英語オンリーなんですよね…
https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml


3.UML図のエクスポート方法

UML図をエクスポートする場合は、作成したwsdファイルを右クリックし、「ワークスペース内のダイアグラムをエクスポート」を選択します。

すると、PNG/SVG/TXT、とエクスポート形式の選択画面が出てくるので、エクスポートしたい形式を選択します。

エクスポートされたファイルは、ワークスペース直下の”out”というフォルダ内に作成されます。


4.注意点等

4-A 日本語が文字化けする場合

文字化けして変な外国語になっている場合
java実行時の文字コード(javaのエンコーディングとplantumlの出力文字コード)が原因です。

以下を試してみてください。

①作成したファイル(umlのtext)の文字コードがutf-8にする。

②settings.jsonに以下の行を追加する。

"plantuml.commandArgs": ["-Dfile.encoding=UTF-8"]
"plantuml.jarArgs": ["-charset", "UTF-8"]


コマンドラインで以下を実行しているイメージですね。
$ java -Dfile.encoding=UTF-8 -jar plantuml.jar -charset UTF-8 <実行するファイル>


日本語の部分が白い四角(通称豆腐)になっている場合
PlantUMLが使用する日本語フォントが存在しないことが原因です。

@startumlの次の行に以下を記載するようにしてください。
skinparam defaultFontName <使用環境の日本語フォント名>


4-B plantuml-serverの設定について

VS Codeの設定項目にある、 “plantuml.commandArgs” や “plantuml.jarArgs” はplantuml-serverには適用されません。

つまり、plantuml-serverで日本語の文字化けが発生した場合はserver内で修正を行う必要があります。


参考

↓基本はこちらを参考にさせてもらいました
https://qiita.com/couzie/items/9dedb834c5aff09ea7b2

↓文字化け対策で参考にさせてもらいました
https://coffee-nominagara.com/2018-03-18-134510
http://nukokusa.hatenablog.jp/entry/2015/08/27/203000

Leave a Reply

Your email address will not be published. Required fields are marked *