一周まわって、デフォルトの見た目がよいという結論に至った（PlantUML）

6386 ワード
Graphviz VSCode plantuml Graphviz テキストリンク

背景

スライドはMarkdownで作れるようになった（→MarpのCSSをカスタマイズした - Qiita）。とにかく、チャートもテキストで書きたいんだ。と願っていたら、PlantUMLというのがよさそうなので、いろいろやってみた。

PlantUML　→　https://plantuml.com/ja/

結論

  • PlantUMLはとてもいい
  • デフォルトの絵柄はダサい
  • けっきょく、デフォルトに少し手を加えるのがよさそう

ぐるぐると回って……

PlantUMLのデフォルトは

整合性のある指示を、簡単につくれて、パッと図が出る（見ながらいじれる）のは本当に感激。革命的！ただ、ダサい 素っ気ない。

　

多くの人がそう思っていると

想像され、いろいろなカスタムテーマがある。C4 model Diagram用のカスタムエクステンションもけっこうあって（公式ページでも紹介されているし、紹介されていないものも検索するとけっこう見つかる）

The C4 model for visualising software architecture
https://c4model.com

ただ、C4向けに特化されていて、ふつうのPlantUMLには適用されない（っぽい）ので、こちら方面はあきらめる。

PlantUMLに特化したThemeだと

Puml Themes Themes for plantuml
https://bschwarz.github.io/puml-themes/

future-architect/puml-themes
https://github.com/future-architect/puml-themes

あたりが見つかった。特に上のbschwarzさんのは、クローンして、いじって、bashスクリプトを走らせたら、自動的にいろいろやってくれるぐらい、便利そう。本格的にカスタマイズする前に、ちょろっといじってみようとおもった。ところが

得も言われぬ微妙さで、

たとえば、Backgroundが白で、ラベル文字が白なので消えてるとか、やたらとグラデーションがかかっていて今っぽくないとか。せめてグラデーションをやめて、文字を黒にして、色合いも調整して（macOSのシステムカラーをパクって）、としてみた。

のだがやっぱり微妙……。

もういちど考え直して、デフォルトの何が不満かというと

  • シャドウ
  • 黄色塗り
  • 赤い枠線

これだけ解決すればいいわけ。ほな、

skinparam shadowing false
skinparam monochrome true

というオプションだけ渡せばいいじゃん。

愛想はないけど、スッキリ！

もう少し凝るとき用に、色は研究したいという気持ちは若干残っている。

後日談

ガントチャートは別枠

ほかのチャートはskinparamでパラメタを設定できるが、ガントチャートは<style>〜</style>でパラメタを指定しなければならない。そこで、ガントチャート用にincludeファイルを用意する。

PlantUMLの本体には

@startgantt
!include gantt_style.puml
skinparam shadowing false

と書いておいて、こんなgantt_style.pumlを用意する。


<style>
ganttDiagram {

    task {
        FontColor #343A40
        FontSize 12
            BackGroundColor #338CF733
        LineColor 338CF7
    }
    milestone {
        FontColor #343A40
        FontSize 12
    }
    note {
        FontColor #343A40
        FontSize 12
        BackgroundColor #73CBF3
        LineColor #50BEF0
    }
}
</style>

するとこんな感じのガントチャートになる。

まだまだ細かい不満はあるけれど、テキストDEチャートができる、うれしさに比べれば、なんということはない

とはいえなんとかしたいことは、

  • 日付のところのフォントが、他と違う
  • 色使いは何がキレイのだろうか

その他

フォントについて

ドキュメントにも書いてあるが、フォントにはあまり凝らないほうがよさそう。Javaが走っている環境に依存しすぎるため。

ちなみに、Dockerコンテナで、ローカルにサーバを立てて、PlantUMLオンラインエディタを走らせることができる（あまりにも簡単で感激する）が、フォントがあまりにも少なすぎて、その点だけが（日本語使用者には）実用的ではない。

PlantUMLを書く方法

  • VS Code + PlantUMLプラグイン。プラグインは「failed」と出ているが、使える。謎。
  • 上記プラグインを使うと、ふだんはローカルでjava -jar plantuml.jar xxxが走っているようだが、URLをエクスポートするときにオンラインエディタを使っているみたい。

結論

MarpとPlantUMLで、ぼかぁ、ほんとうにしあわせだなあ。

環境

  • PlantUMLエクステンション 2.14.3
  • Visual Studio Code バージョン: 1.53.2
  • PlantUML V1.2021.1 (2 Feb, 2021)+ Graphviz
  • macOS BigSur 11.1
  • MacBook Pro (13-inch, 2020, Four Thunderbolt 3 Ports)