PlantUMLのテーマでスタイルを適用する

仕事で設計内容を整理したり、個人開発でも頭の中身を整理するためにPlantUMLを使っています。 3年近く使っていて先日初めて知ったのですが、PlantUMLには "Theme" (以下、テーマ) というパッケージ化されたスタイルを適用する仕組みがあるようです。

Futureさんの技術ブログから知りました。 future-architect.github.io

plantuml.com

デフォルトのスタイルはシンプルで良いのですが、自分でスタイルを適用すると統一感がなく途端にダサくなりがちです。テーマは統一されたスタイルを適用できて見やすそうということで試してみることにしました。

環境情報

今回試すPlantUMLのプレビューはVisual Studio Codeのextensionで描画します。

Visual Studio Code ... バージョン1.64.2
PlantUML extension ... v2.17.2
Java ... OpenJDK Temurin 11.0.4
Graphviz ... version 2.25.0

やり方

PlantUMLのファイル内に !theme ディレクティブと一緒に適用するテーマ名を指定するだけです。

@startuml

!theme <テーマ名>

(...中略...)

@enduml

テーマ一覧はサンプルと一緒に以下のサイトに記載されています。 Futureさんが作成された、 toy 、 vibrant 、 mars も使えるようです。Material Designっぽくするなら materia も良さそうです。

the-lum.github.io

題材

この記事では、「Web画面から何かしらの申請を起票し、申請内容が妥当なら承認する非同期ジョブ(Kubernetes Job)を実行する」というユースケースでPlantUMLの図表を記述します。扱うのは簡単のためにシーケンス図のみとします。

描画するファイル内容は以下のような30行程度のシーケンス図です。

@startuml

title 承認申請ジョブ実行要求シーケンス

actor "SPA" as ui
participant "API" as api
database "申請テーブル" as db
queue "申請ジョブキュー" as job_queue
participant "ジョブスケジューラー" as scheduler
actor "Kubernetes API Server" as k8s_api

ui -> api : 承認申請
api -> api : 申請内容チェック
api -> db : save()
db --> api
api -> job_queue : send()
note right : ジョブは非同期で実行
job_queue --> api
api --> ui

scheduler -> job_queue : poll()
job_queue --> scheduler : (承認申請)
scheduler -> scheduler : JobSpec組み立て
scheduler -> k8s_api : createJob()
note right : Kubernetes Jobは非同期で実行
k8s_api --> scheduler
scheduler -> job_queue : ack()
job_queue --> scheduler

@enduml