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


## 背景

スライドは`Markdown`で作れるようになった（→[MarpのCSSをカスタマイズした - Qiita](https://qiita.com/hann-solo/items/54682c59c7076d826902)）。とにかく、チャートもテキストで書きたいんだ。と願っていたら、`PlantUML`というのがよさそうなので、いろいろやってみた。

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

## 結論

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

## ぐるぐると回って……

### `PlantUML`のデフォルトは

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

<img src="https://www.plantuml.com/plantuml/png/RLHDJnfH5Ds_N_7YndQXXez2uieWQLTjcbYwSZCPHaHWXi0qfccQCFEgOg6jJS3OGaLiJL6hfdvK2nX-p6LcOELVwFj0c5HtD_USU-wvzywRcQmkPVHNgIHAAWiwrZMSYSSMTHoDPnHPZsigGjb4N4rB6Ic5iujIL5kEgp6y82MpYWkHP5tBpEclamgMbfMibbBG-0XDIt92YYa2PxgI6aig28qxNrhMpdctsNJMzn7Nm6DWdW5f0ycDOIcBvUWmJ-f0ABGAv3s7Kkgev0h87f02cBky_0pC2o27dBOatzAwhKqmJsYUwj-qyzPLqQvMUhcLc_OwPsf3vasxzZnCANDFfyAtQ7henAfTzkf580RtkSDHFKt7mK0-ybmUgPgkCCzbCFS53OnJC0wiwzrvrIgKkzTL89-1xBEnp4wlSMGTV-LAppo3ujxQ0IKwfPgTtw1Ux6hUhbIfctcLhwBD1Z5-0ZdWyvxqLpvqEtKXuRr7Oie3v0yLcLUV05bddSqVG3R1EEnslZd7WqhVVPM-sqftuzcvb_PbgzlQ4eL-XD3mj3YXn1CQtz1t8B-umIly1g71bu3Tn-JeNufY_C0gV-hNY-7G47_8n2CUZcsySnh7ObCYxQNfY0TFJhAblNMfqolJuSocLTbsZae3wRLcdrrjT14XukCW9peN6_PszIx5FwA4Gxt6LhzuAe17p82F6_2w3VGhgxr67ep6uz2W-Q1O0A8um85SWNx-O9GeMP2ittlsqNa_Pz3L2cAGTGdmBini9CX3Fsl8vv-Oc63l1DCNGMEnhOZtJffjQqdceMyK-aTXK4p3wkXJeB7V5GTTSO37wIYUnY-qQPhHqrmWy7yYI1EpCajGipEA6gK_cdy0" width=30%>　<img src="https://www.plantuml.com/plantuml/png/lPDDI-j058Rtyok6xBCGN5r4jFQAkB8LHC5DRDCwjarAaY9N4Mm6jOhWHb4iYFMBA5RG2duGyRyuvZPPzIzuPaRRWDxj7RAOlEVDES-PCnco7SroAgKYiWl4A6kMLiBsl9Or5ucHnpcjQEi85VMSWnqJMoG_x-0iiVICGqm38NDk0RPO2VPseiPsCg5WpSQfP08l8umpff4Z-OvV2xrcS7FOyJT1J5N8KZ81ujSdKfwmp79wXCiRpo07j-T_c_SoD3oLwX-tkg79Z4NAJZSqMIcLDEiFXAFwUkZLUk6L7XwZUyozPDHdz3YgruEN4m4wEYOumzOLmC0cg1-rcxjS4S1giEQ5jUlUEwFxZ5up5zAqukewSvyOhVshugm1TEq73m0PFUIQ-mY04k7t_qEGkRyZf0L2GIS5az4gewUy0cs11MIUruNzITZmscVFyG8ot-VGqvz3ZrUTPjMRRaC0yBPw0OySNTmt4_V9CV8w_1ufVGh6gZg8bOw_fV3Zmh-ml0W8nlTpN9uAnwRGhe-uAem3gYetq3FF8sf6gzNtruOqYIGY7NVndhvSeNSGRT_zn2HTyTiNLI_RknxY0R6uLwou5Q4XtSZ2Z_S1" width=30%>

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

想像され、いろいろなカスタムテーマがある。`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のシステムカラーをパクって）、としてみた。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/6aee5f56-11a1-8fe7-f074-7023f97137ba.png" width=30%> <img src="https://www.plantuml.com/plantuml/png/lLbjRnl74VxC-nLhoeOa5xJu9eeq72DykPFKAfHCod4C512EnwLurV6EtRkpOXS1OX5DtI90loHe4GD5dRv0AU80hGkq3HpqlvHLBNtoN-ZixhtilP2M8BU7nE0zC_lixCpipExfNTjHYUEE36bn4HcwxGmiqx4bQV6ARcg6syTew3XZ--RA2b4FR-phpj3jkJOc6gXXqxcXMQELdgqD3rNoQ6KCF3bdY4VONXcfjeF9YlTcgsRVTYmJ2pgv0BmnPWPSOCgXQLl6MvjlZiuYzKiJ4zV0gecO3kgfDkuZQp20_oc4UfRbs0vHnvw21zig_3RX7yhXhudf7ggEDcGBqJpg5M-gkkiCBN8JDGXs7DJbZcKsMEE7HDyVEcX9MqR5VA66UWzZQjALgxiRydioUWTbVU8ieFe0NJCjP-dQ0vNeQi_0U_X32BMzbBtQM6zkRsrtiilBqYAwuhzI0bYFQOzL0YxFIX79WYpB066phmyaoJxGJL1JH-0NxM2VMAxPRrg6HP0_HlBTI54REUe1Dj60M2Fc9SssqK0t0gyrkjoBT11CktMNBMSXNoerrqhKairsQtDzcu6LIY6l52cuSxUpiyKrAqgvs2mmSBFz0svmjIHNcnJgo2s6DDSApI8RkTsfjzVvIAMr9XVA5BmlRsrjtsDWgxLQoUSfkDwHvJR3rahrQgb6iLsvliMWOhvPgwrHg7c_phMAIhqiC-ZUnkQkDuMYSAhw_RrMlSFDAvLBzNBUnnbKhLJbMeKjehFvNhrpFyRObPlRxPQFopMvAJFYxjrcK-vsOrPkjfNjc1VlrJljpVPwR8ajwejEp4DRc-iRkzpwgb9JwbmnPZiDyFKzNzNHJKXKW-Oh9ij-Q4UgRYADvGOWrVmrEYXu3eUOOBIxsTv5keqqrT1SGtLWfq6UQmP1tqDBnTNL7FnSHjVP37i3LNCimgVsBBA7AkpefRvA3iuzC-nvrDsej-JqYQ-ZfGBASMPlocMUdKgmAPX3mcZjXJvRhJKgSbE8P1ZtOgLQQjH4qQxy0Ht54qOCiq0ejnGlwKDfGDceDreD9IhqIJqJQJ88TANLIgcg-5aICkMBfVngCy0Jbl544uYgIgDMAGX967AjDgkLeYoAudHUEehBBAzLIsAg2eiib5TvllgYE1tFOu6jLIpNodAOuY5PJIbK2Wr14kMIheo9fU6-2xbvrNOr3TlsqjMHlRyi8NIBTakUL-_uIxjzgtURobc13CP6UGQgRi2FT1vkndbeeEYRkhcVJkEvvZmyOwAFLF9m3_eu5DwbPIcZ095NnCNKb38DY_GnYOganKmZNleZ-o0NQBv1CMuaxnlhXjLJ3TJ20zKr7FI-QhZOfhAmzVIvZ9hTfbtNUx8REb7tTTD2NMXcsVG1NVrHCA1G57N6Eafv2lcye4IhWdK8KOWg3LJ3ne8QMx9c4HCJKQqggEp0GKpNzB5gEZjgl-zJbiNP6jQ7ein_8Zff2l2i2YfrGgn37W3nOUr7N1iKRsmv3ySO_KIY2ir4-685ojCIaoHQf9X2FKaZLXDF9q8YL1GctanGY5lUKn4PX6tFf7A285A2F1sHGIn3JDnEK8IbrLCGnmVbLVf8yB6ZEmPrRxZbCecC4xPFI9YY5dDrnizkfXhg5_C-KOVRdinAJxuxrBK34ogUCBgGijrdcU7j_W2GBZOI72MUBmsy3-M1-cfs6iOgL9f7WeHWaP2ki1kGxVQGVQYF3DKKjwqFiKdZmKnwgIXbTcay4wkSwnCs95bnmJXQ3i4oqKWuVkWFTEUXw1WVerQc5FE66jj6KgPBwI9BaID9B6MWl6PQkZgop7vofz3Ec4lP-y68UJ7mT8G5HuygwUiUXzLHNBe0prYzK5QJuPhbOZXKHlqBPgRJ9pCgZP7MsmWZ1IXZQ4n9oiJYBt9x9yrqUXl_sCMcXiKPV2oHkG7x8bBWtRQWNHAisfOPZk55AJnDeBw5RGHNI3G6Sv4xvjUtVTQOPoTmSf_wDy980WRgSlnKmDCGcbw2Y6SS4ucBOmsCel6mCA8jVO2tT1FFJS-eKcHl1w8tTK4sspfeZ5EiOtZ2FePkOBXY444cxiK7EiXcxSMmwVYAYOaJGd5jWZ3LTHqyWBC0vCRia8OgoJK7iWHv84bV--nQuEYMcQW459oTyHTAqTIPOJSOMAEpsEBS0fnU9cQGcGwnZ2WHWovJQx3fnDe3Hox3sQF-WN6HhpqUTgcw20qzKiuPaDRX5ooYcliu6jc56dl4oHPAx4cV3WfOf4RIzp1RmksGTiGHpdOvdfgBgIU2EKV2D7t1JVo-EQD_E3hzy11j8HnBFGz5giAvZqJdwSEQDHfRPYni0NY1xDTDk5t00Y8H2S2qLSNE-95b-R9p9fuD3HroBT8mEPJkJl5gaFDVwO4dxOOGZQhmXM9MLlPZMTd7ym-vQUVgr11VFBg6vVOZaQL0wePKYafJaNCBc3snZSc5gHKtTTw-wgZqixeujOzTfi1eXcf7ApK5PZ3o3ZJh2qKkylsEdc3yot6YfoNhIQRkE4JlkOwexALnHCG-HXGAwQknUZ_2qIB0aHdhkRo5iPIvWAckZRLOF3rerYKbUTnAjNzk6X5m1hG98p9l04PksUcNwlZtg3adsBTYy1ZeOtN8W_xNngQQCx0CK1EjuSYy7fDo2pnlKJo_NOJ-5KqqYmANiIhHVMTTw6Uq3zM9DG_LcP_PiOZvDUHDr_2tkolXUkT6x6R0HOwiAecs1tXF3KFYj7GEzy_fI_GFX97uwyObUsJ20dPHcHbkxI0MRhW6lybjae473d8inFzkszS9loD8abUsioUV__BisQUjHXQfDhhJQh3Fh7076EZxhry-EJr-VlBD5wzV_Xp0Ewx-gDK0q1_2uHrYZJjD2l_iMu1F_lo7_pp_AnVLtxzJ_Zu9H5sDw6Cd47NT4RKRn6TFFpazVXAAFmhDcqu-dnvzDPsyd4v-U_RqwSbtNp93bGrcv-cBFu4nyEFawMzUFV-C8ipWtCbFZq-VV1s-JoU_caw-dXu1pGiH_MHwz8_fvCci6NzeWdMl_dOC1audNr3iwEzW83T1_l-PmBcJ9dIO2GTOFx2cayVJoU_e39CNe08mvJs2tr-UFZj-zVjlnGaudnVqZXTqSTOFfe-_2HO41lphup_2VpnqejvzKO-7aSv3yoXRo2AKozr6sTSlVv6bxa8t4Ky42SANBkTUeMPFOBal9OeonLkv7Fy1QwOyRCwpZn__-v_Fk18ZONHKYwx9rpez_lNPftz9iubhYTbtzlYhLvyTIrJ07ghB7b5Lajw5_UMEZFy2" width=30%>

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

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

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

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

```md
skinparam shadowing false
skinparam monochrome true
```

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

<img src="https://www.plantuml.com/plantuml/png/RLHDJnDH5DtFhtXXKrq0wOSqOKMWqPN61775PZ8TIcaxqqo746DCElC4YXJ510ZQ2XH52mX4FgIs9VoODrzTyHUyxxrfEr5sT-uvvzvpx-thM44NDNq-bnMoyeoET1LfwTIiZf9fJPRqjAe8GY6JLlAY9kPGOLPCgWjf9OLcn6n13Y0vLL6bMKtDoKZNvkMWI9HqLPlKNsLb92x81Q08eJwQ5wMCc98vJbkAIYeB-f3xgMNlNLhDfhjoAB0QQ82O5mIt2IuE8B60f6GlZsi40xH4y3i6vPI-f47m0S6hnDndyWjYNX5yp6XpKfTcjRQ8UGPvg7_NBjcDibEjUCN5k_OAOwgI449MOytxRg0GyaLtxTtd2M1FFXrET8dvdYbxzzghbGascEKzXkfvc0mH_9xbIeAYwZArlqdCGquZnZanZkoR_Md5NjsqRge4VoJua4vetdhr4_lqCwlqBEoBlUKZ8BeRkqvf7RmurP9JgOARQOLjfKrdCduGVCH6F-iihbctDLuYSa-9uJ31lw78jFA4u1NQsVn6y1OnZgtRB-wfhupUfunsbS764vCldUkMrThcmfWW2BqheuoSpgXiGry9_iaCDj1hGV1_52XuLuR-0HIX1_RcXqwjd1ZluGzfyQammzRVklLJlYcUZa1wAeA6XkZItWIgmy5XEBDfLtRSams_z7ApGw_MlmWl4cKW8xfNwyvEzNzA34xRvIJ6lVfsftpEaKVKGPGvY0GTT2fBNhr4ZFhZSR-xB-O05uymeBWAJu4O6q3c9FlNWNDosIaQi5jEZDCk8wmBTJiLPs6CDeIlC1eS7AHl1i7hW9Yl2_RoRvgkQqvYORGVnlfX78sY5-eeducguN5070l4SJ_scR0NwepcyicUMi-pSYFza5QUa2W6fiTa9Gd_Ity1" width=30%> <img src="https://www.plantuml.com/plantuml/png/lLFFQnD15BxFN_7O-nuAdaHA6sCHJoQ5ek1bJJR9cEnEcDqWAaApWpLAmKkBqa0nzGVRqXGqWbfM_5-ShjazvL_mpKoRB5Yl3dju-ttVllUzUMzNWj3XOS_haA1D_Qx37G-2bbDd3wdVX8RJ2Tm2up6VrLgSUIw4lESIqd4R8OGCE6ssGgXJxjP2odn2sFq768ALxhxAHzlbaWLE09Lo2PuGW1hp6xGvImPPF4vFzcR92mGhFVguN4BmuXC3t-QiMxskuEUd2AUVFlmUVp7KwaRboYq-fzPhd7R3ERNUypo7Fq8w7svbyM11FrtOas9NHeTI95AypOV3zCU1DhfsK_lC9aTe1eDqk3yTxoX46xRJPt4sE5wyI_5QYcCPOPf94TsIqNSf1l-gUCz7TzElCHgKOazXqJSqQ2pS-7yMJEw_BLIrXRPBsqoAlXJlL0KnGGd2Ac-4yK4sYgVlJui5JBxpeLVFXrwiUaVsJ-ODeO5Vcn_nCQChwkuMTMQCgexQ8sl90h3jPR1coKjBNHTS1RC81CTtEMzkHTaMs6v25Ag5rspR1DYpogDhvflzivyZ8z99T3gbKZrTgBBuJRxz-J9FHbNSlhn_EDs9YIBqKLfzYb92Lbo_Zh_a7m00" width=30%>

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

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

### 後日談

- 同じようなことを考える人はやはりいるようで、GitHubには「Plantuml not-ugly style」というのがある　→　[matthewjosephtaylor/plantuml-style](https://github.com/matthewjosephtaylor/plantuml-style)
- そして、docsifyというサービスの`PlantUML`プラグインは、上記のスタイルをデフォルトにしている
- （こっち使えばいいやん）


## ガントチャートは別枠

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

`PlantUML`の本体には

```
@startgantt
!include gantt_style.puml
skinparam shadowing false
```

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

```html

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

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

<img src="https://www.plantuml.com/plantuml/png/dLLjJzjM5FxC_HMtfHBRXnJ7ZWkfkeaG24MZPO9kKbLLrIMv12-E7Ta6nAP9s1uTfMaxhLiPeuojZ491jDigRQoKybzs4rx-nSwzTjv8rar35adEwtEUStnEZ-qGoyaImt5GHmUsdHcTCk_huwqTvZraxWQRTPcxmjpdvJT5vcxRESqe48laApQpuDMkghtzAGapTu7RUdUO-w1cw6uSR-wKdt_Ft2NctMNkPcbtuN1vbxdtcFijyueWv9dVaIKv6f7aYAnYANun9h-B49UNxwyUUNz2wlBkBynTO-vJvlt1_9VCNsJ-ThduwA_Pf_1mK-O_OVvzvhrW_WxpNpF_H-OMomlW36ctcFi5b16KT4dK-VvXyKi0njDmzm5E0avF01z7tsn2HWPvlGFc_Go9eDxGcYToLvdxko1eHSJqe2puKbVqTkigHKdZfgwRqtYCmd_KWS-SImqaXuU6H_1x-5nVOkG3-3pRhiIKH4mwA_GVZWnUIOnSv_hUeO_wXLwIkgIKsg2_DJGuSFbQuArq9rDTZTfgQ4bIuybOe1oycXhcSQ_r9uQ4KfLuBslAkg1TIh8tfTIfgX5ZKhmx2Kue91Q9WUhJI1R8m9yXrDQ1KwRXN2LvYYzh5ibgXeb7YM6tWSuXTWwCsXgCg3v57IrDgkAagPiMRbUxOtBV1I4DUHISWQ3EA20lb8rgdr8SbQk1HZb4F6Rg6I7g9UdSW6LE6fd0US2YrBXEUMY4mxzcgtOraUnEgOhoLXlnNe0DppEa6JIGZ-cJz9GeD6qegw6hrJHDIO9MYoIrU84GjNsEslAQJct7D6WTnQTmL5cIrLCiQGxHjNHJqXb1Jnr-YsR-Lqi0ds4wpT3wY9KJZQXXYqgdE1ksY96b8oBploMgDQc2a0ym6F7AilLq1aFUG6RuJjHtshGor0grqE1aby9hGV1SwWnV0THnHZFI-cG6Q8rAigpUAapczOWpGVCqaYTfqpxF1QYwDB0zGJBcj6PayJZHRHgilxdDqlx3O8EYWcL-GjCE5ZlRnfMD6LMvPS7I3CTE4-ZQDAKvVGRPn9cqCcG64ulYj6xQG9KDbJPAmFLeVULmSJtSRpngfoHtHgDOioj6fuIyS9h1ce5rCaKDu09coPwecibA2zzG-7RVMASSR_Aj2l_95qrG0Z_mP25379hfgTqID6x2V5auCKMjB3NIz3mUDDB8qHpWAKUrdCdl1QnuxzL5E21RuddDDx_xXjyAsExy2lpAl5tchukhierG98AP9suCFmvBuXpDuqW4eHk9Zw_Sn1EaKA26ZOaJDYaMKIJXThosNzf_79YAo2z4HhXbyynxAUBVwGmF9hzpy7iU70xdlxfPQNirg1oHefWO6GnCLAP1YKWgZmnNSeFvFW_hFmDyXwyUbRsbvXXWtorYwCG6ULJ2C1us4Y_bcEauPXx67ghr7mTnc7-RUMlCUrA-ktgoV5ieKxtb1ukblU-O3vVkMN1v0ym8a64UgnMaLc1akGwCsXgBKbx-eHFczMJkNkdWfn1UBJDqhGAeBltnzYwRdIiTF3_SMMkPEDwS-CRHqjv9yJVcxmKDQVQB0TlDVgBH0RgWqS7tTYbQcuoAF-ocgbfkeOxNr4gpMhxGu9tHx88E2B1fO9jVKGis7R5n7O26SF_57lK0YUAS_mq0" width=50%>

まだまだ細かい不満はあるけれど、`テキスト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)