VS Code

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

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

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に公開されています。

以下のコマンドでplantuml-serverのコンテナが起動できます。

docker run -itd -p 10080:8080 --name plantuml-server plantuml/plantuml-server

10080のポート番号はご自身の環境に合わせて設定してください。-pを指定しない場合は8080が使用されます。

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

上で起動したplantuml-serverを使用するように以下のRenderServerの項目を変更します。
Serverは起動コマンドで指定した値に合わせてください。

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

2.クラス図の作成法

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

PlantUMLでは*.wsd, *.pu, *.puml, *.plantuml, *.iumlの形式のファイルをUML図のファイルとして扱うので拡張子はこれらを使用してください。

UML図のベースとなるテキストが書けたらAlt + Dを押下してください。

以下のようにUML図をプレビュー表示することができます。


ちなみに、上記のクラス図のテキストは以下になります。

@startuml

title クラス図

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

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

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

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

車 "1" *- "1" エンジン
車 "1" *- "4" タイヤ

車 "1" o- "0..5" 乗員

@enduml


このようにPlantUMLではテキストベースで種々の図を書くことができるので、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

コメント

タイトルとURLをコピーしました