Hanatare's PaPa

Make life a little richer.

Virtual Space of Hanatare's PaPa

人生をほんの少しだけ充実させる

【Visual Studio Code】PlantUMLのデザインを変更した(マークダウン形式で作成)

f:id:nothing-title:20210520233335p:plain 最近は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のインストール

https://java.com/en/download/

上記URLの公式サイトから赤枠のダウンロードボタンをクリックし、「jre-XXXX(任意のバージョン).exe」をダウンロードします。 f:id:nothing-title:20211031224431p:plain

ダウンロードしたexeをダブルクリックし、インストール画面を起動したら赤枠の「インストール」ボタンをクリックしてインストールを開始します。 f:id:nothing-title:20211031224802p:plain

以下のようにインストール完了画面が表示されればOKです。 f:id:nothing-title:20211031225017p:plain

念の為コマンドプロンプトからもインストールされたかどうかを確認します。 「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なども利用できます。

f:id:nothing-title:20211101091812p:plain

マークダウンだけであれば、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

 ```    

結果以下の画面のとおりです。

f:id:nothing-title:20211101095212p:plain

VS CodeにPlantUMLの拡張機能をインストールする

実際にMarkdown Preview EnhancedをインストールしてPlantUMLを書き始めるとシンタックスハイライトがされていないことに不便に感じました。そこでPlantUMLの拡張機能をインストールしてシンタックスハイライトを有効にしました。

f:id:nothing-title:20211101102154p:plain

インストール後の入力画面は以下通りでシンタックスハイライトが有効になっていることがわかります。

f:id:nothing-title:20211101102342p:plain

VS CodeでPlantUMLのデザインを変更する

この状態でもPlantUMLは利用できるのですが、見た目をもう少しオシャレにして作業時の自分のモチベーションにつなげたいと思います。

PlantUMLの全体的なデザインの変更

PlantUMLの公式サイトでいくつか利用可能なテーマを公開されています。 今回はこのテーマを利用してデザインを一括で変更したいと思います。

公式サイト plantuml.com

GitHubリポジトリ github.com

私の職場の環境化ではネットワークの制限があるため、ローカルにファイルをダウンロードして利用します。今回は、「puml-theme-aws-orange.puml」ファイルを利用します。

f:id:nothing-title:20211101105503p:plain

ファイルをダウンロードし任意の場所に配置したら以下の記載を```plantumlの直下に追記します。 今回の記事では、マークダウンファイルと同じ場所に配置しました。

!include 任意のパス\puml-theme-aws-orange.puml

プレビューで表示すると以下のようにデザインが変更されていることがわかります。 f:id:nothing-title:20211101111740p:plain

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>>

結果は以下の通り、テストオブジェクトだけ青色に変わりました。

f:id:nothing-title:20211101114105p:plain

まとめ

今回はVS CodeでPlantUMLをマークダウンを交えて記載する環境を整えました。合わせてPlantUMLの初期デザインが好みでないということもあり、見た目の変更も実施させていただきました。

これまでExcelやパワーポイントを使って設計書を作成していましたが、矢印の配置やオブジェクトのサイズをを統一させるなど、微調整に時間がかかっていました。PlantUMLを使って簡単に図面が作れることで、作業の生産性もアップにもつながるように感じました。また見た目の変更もできたことで、自分の作業時のモチベーションを下げずに作業もできそうです。

今回の記事が参考になり、読んで頂いた方の生産性アップにつながっていれば幸いです。最後まで読んでいただきありがとうございました。