2019/11/10 追記)
VS Codeをアップデートしたら文字化けするようになってしまったので、文字化けの対処法について追記しました。
１．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を使用するように以下のRenderとServerの項目を変更します。
※Serverは起動コマンドで指定した値に合わせてください。
plantuml-serverを使用する場合の環境構築はこれで完了です。
２．クラス図の作成法
まずは、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
３．UML図のエクスポート方法
UML図をエクスポートする場合は、作成したwsdファイルを右クリックし、「ワークスペース内のダイアグラムをエクスポート」を選択します。
すると、PNG/SVG/TXT、とエクスポート形式の選択画面が出てくるので、エクスポートしたい形式を選択します。
エクスポートされたファイルは、ワークスペース直下の”out”というフォルダ内に作成されます。
４．注意点等
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
コメント