Zenn
📝

PlantUMLを飾る (Themeの話)

2021/08/14に公開
PlantUML
UML
tech

概要

図で表現するという点ではデフォルトで十分満たしているのだけど、「なんというか見た目が……」と思うことがあります。(あると思います)
そんな時に使えるTipsになれば幸いです。

実行環境

  • Windows10
  • インストール済み
    • VSCode (拡張機能:PlantUML)
    • Graphviz
    • Openjdk

まずはデフォルトテーマをみてみる

どうでしょうか？気にならない方はこのままで良いと思います。

default-theme
デフォルトテーマ

plantuml
@startuml
actor Foo1
boundary Foo2
control Foo3
entity Foo4
database Foo5
collections Foo6
Foo1 -> Foo2 : To boundary
Foo1 -> Foo3 : To control
Foo1 -> Foo4 : To entity
Foo1 -> Foo5 : To database
Foo1 -> Foo6 : To collections
@enduml

1. 公式のテーマを使用する

ポイントは !theme です。公式が用意しているテーマを利用できます。

theme-bluegray
theme-bluegray

plantuml
@startuml
!theme bluegray
actor Foo1
boundary Foo2
control Foo3
entity Foo4
database Foo5
collections Foo6
Foo1 -> Foo2 : To boundary
Foo1 -> Foo3 : To control
Foo1 -> Foo4 : To entity
Foo1 -> Foo5 : To database
Foo1 -> Foo6 : To collections
@enduml
テーマの確認方法
@startuml
help themes
@enduml
VSCodeで最新版のplantuml.jarを使う方法
  1. plantumlをインストールする
    scoop install plantuml
  2. VSCodeでインストールしたPlantUMLを使うように指定する
    settings.json
    {
/* 中略 */
"plantuml.jar": "C:\\Users\\{user}\\scoop\\apps\\plantuml\\current\\plantuml.jar",
}

2. 他の人が作ったテーマを拝借する

ポイントは !include です。異なるファイルに定義したテーマを読み込むことができます。
拝借したテーマは こちら(GitHub) です。
実は先ほどの公式テーマの作成者様は一緒です。(公式に輸入されました)

materia-theme
bschwarz様 theme-materia

plantuml
@startuml
!include https://raw.githubusercontent.com/bschwarz/puml-themes/master/themes/materia/puml-theme-materia.puml
actor Foo1
boundary Foo2
control Foo3
entity Foo4
database Foo5
collections Foo6
Foo1 -> Foo2 : To boundary
Foo1 -> Foo3 : To control
Foo1 -> Foo4 : To entity
Foo1 -> Foo5 : To database
Foo1 -> Foo6 : To collections
' Copyright (c) 2020 Brett Schwarz
' Released under the MIT license
' https://github.com/bschwarz/puml-themes/blob/master/LICENSE
@enduml

3. 私がおすすめを紹介

vibrant-theme
フューチャー株式会社様 vibrant-theme

4. 自分で作る

  • 人が作ったものでは満足できない、そんな人は自分で作りましょう。
  • 今回紹介した素敵なThemeを元にカスタマイズしたり、一から作るのもいいと思います。
  • カスタマイズするにあたり、PlantUMLのSkinparamについて勉強することになりますので、こちら(公式-Skinparam)を参考にしましょう。

最後に

PlantUMLで図を描くことで、Gitでバージョン管理・差分確認・レビューもできて非常に便利ですよね。

私のチームではすべてMarkdownで設計や要件定義の資料を作成しており、図はほぼPlantUMLで記述しています。(複雑な図を用いる場合はAdobeXDを使うこともあります)
開発手法を設計や要件定義にそのまま適用でき、コスト削減や品質向上にも繋がっています。
クライアント向けに納品物としてPDF化、社内向けにはGitでmainへのマージでCIを動かして、Gitbookを使ってGitLabPagesでチームが閲覧できるようにしています。

PlantUMLを使う人が増える事を願って。

Discussion