最近はVisual Studio Code（以下VS Code）の記事のばかりですね。今回はリバース・エンジニアリングしたプログラムの処理をPlantUMLを使って、マークダウン形式のファイルで整理しました。その際、PlantUMLのデフォルトのデザイン（見た目）があまり好みではなかったため、デザインの変更を行いました。
今回の記事ではVS CodeをつかったPlantUMLの使い方（とくにマークダウンでの記載方法）とPlantUMLのデザイン変更の方法を紹介したいと思います。 PlantUMLのデザイン変更の方法では、全体的なデザインの変更方法と個別にオブジェクトのデザインを変更する方法を紹介します。
- VS Codeでマークダウン形式でのPlantUMLを使う方法
- PlantUMLの全体的なデザインの変更方法
- PlantUMLの個別オブジェクトのデザインの変更方法
VS CodeでPlantUMLを使えるようにする
VS CodeでPlantUMLを使えるようにするためには、利用環境化にJavaがインストールされていることが前提になります。 そのため、Javaのインストールがされていない場合は、Javaのインストールから始めてください。
Javaのインストール
上記URLの公式サイトから赤枠のダウンロードボタンをクリックし、「jre-XXXX（任意のバージョン）.exe」をダウンロードします。
ダウンロードしたexeをダブルクリックし、インストール画面を起動したら赤枠の「インストール」ボタンをクリックしてインストールを開始します。
以下のようにインストール完了画面が表示されればOKです。
念の為コマンドプロンプトからもインストールされたかどうかを確認します。 「java --version」と入力し、インストールされているJavaのバージョンが表示されれば問題なくインストールされています。
> java --version java version "1.8.0_311" Java(TM) SE Runtime Environment (build 1.8.0_311-b11) Java HotSpot(TM) 64-Bit Server VM (build 25.311-b11, mixed mode)
VS CodeにMarkdown Preview Enhancedの拡張機能をインストールする
Markdown Preview Enhancedはマークダウンの拡張機能でPlantUMLのレンダリングをサポートしています。他にもFlow Charts、Sequence Diagrams、Memaid、GraphViz、WaveDrom、Vega and Vega-lite、Ditaaなども利用できます。
マークダウンだけであれば、Markdown All in Oneでも十分なのですが、今回はPlantUMLをVS Codeで利用したいので、Markdown Preview Enhancedをインストールします。この拡張機能と前述のJavaがインストールされていれば、VS CodeでPlantUMLを書き始めることができます。
マークダウンでPlantUMLを書いてみた
マークダウンで以下の内容を記載して、「Ctrl+K → V」でプレビュー画面を表示します。
# テスト --- ```plantuml テスト -> AAA activate AAA テスト -> BBB activate BBB テスト -> CCC activate CCC ```
結果以下の画面のとおりです。
VS CodeにPlantUMLの拡張機能をインストールする
実際にMarkdown Preview EnhancedをインストールしてPlantUMLを書き始めるとシンタックスハイライトがされていないことに不便に感じました。そこでPlantUMLの拡張機能をインストールしてシンタックスハイライトを有効にしました。
インストール後の入力画面は以下通りでシンタックスハイライトが有効になっていることがわかります。
VS CodeでPlantUMLのデザインを変更する
この状態でもPlantUMLは利用できるのですが、見た目をもう少しオシャレにして作業時の自分のモチベーションにつなげたいと思います。
PlantUMLの全体的なデザインの変更
PlantUMLの公式サイトでいくつか利用可能なテーマを公開されています。 今回はこのテーマを利用してデザインを一括で変更したいと思います。
公式サイト plantuml.com
GitHubリポジトリ github.com
私の職場の環境化ではネットワークの制限があるため、ローカルにファイルをダウンロードして利用します。今回は、「puml-theme-aws-orange.puml」ファイルを利用します。
ファイルをダウンロードし任意の場所に配置したら以下の記載を```plantumlの直下に追記します。 今回の記事では、マークダウンファイルと同じ場所に配置しました。
!include 任意のパス\puml-theme-aws-orange.puml
プレビューで表示すると以下のようにデザインが変更されていることがわかります。
PlantUMLの個別デザインの変更
すべてのオジェクトの色が統一されてしまうと、強調したい部分がぼやけてしまいます。そのため、オブジェクトのデザインを個別に変更したいと思います。
ステレオタイプを非表示するコードを冒頭に記載します。こおではImportantというステレオタイプを非表示にしています。
hide <<Important>> stereotype
次に色を変更したいオブジェクトのデザインを指定します。今回は線の色と背景色を青色（#0066AA）に変更しています。注意してみていただきたいのは、属性と値の間にステレオタイプを指定していることです。この記述で特定のステレオタイプを持つオブジェクトに対してのみ設定を反映させることができます。
skinparam participant {
BorderColor<<Important>> #0066AA
BackgroundColor<<Important>> #0066AA
}
最後はオブジェクトにステレオタイプを設定します。 今回はテストというparticipantにステレオタイプを設定しています。
participant "テスト" as テスト<<Important>>
まとめると以下のような記載になります。
hide <<Important>> stereotype
skinparam participant {
BorderColor<<Important>> #0066AA
BackgroundColor<<Important>> #0066AA
}
participant "テスト" as テスト<<Important>>
結果は以下の通り、テストオブジェクトだけ青色に変わりました。
まとめ
今回はVS CodeでPlantUMLをマークダウンを交えて記載する環境を整えました。合わせてPlantUMLの初期デザインが好みでないということもあり、見た目の変更も実施させていただきました。
これまでExcelやパワーポイントを使って設計書を作成していましたが、矢印の配置やオブジェクトのサイズをを統一させるなど、微調整に時間がかかっていました。PlantUMLを使って簡単に図面が作れることで、作業の生産性もアップにもつながるように感じました。また見た目の変更もできたことで、自分の作業時のモチベーションを下げずに作業もできそうです。
今回の記事が参考になり、読んで頂いた方の生産性アップにつながっていれば幸いです。最後まで読んでいただきありがとうございました。
