PlantUML
VSCode の PlantUML 拡張入れて preview しながら書いている $ brew install plantuml
$ plantuml doc/flow_detail.puml
使いそうなのはシーケンス図とアクティビティ図
リンク集
コピペスキン
code:skinparam
skinparam {
shadowing false
sequenceGroupBorderThickness 1
' 好みで
' defaultFontName Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
' defaultFontName Helvetica
defaultFontName pぁn
}
'必要なら
'left to right direction
フォント指定
skinparam defaultFontName {FontName}
CSS のように fallback できる
シーケンス図
メッセージ -> に対してはレスポンス -->
非同期は先っちょが2つ ->> -->>
||| で間隔あける
... で省略っぽく間隔あける
activate & deactivate
影消す
skinparam shadowing false
activate ~ deactivate の影が鬱陶しいため
group の border 細く
sequenceGroupBorderThickness 1
デフォルトはかなり印象が強い
スペーサー
||| スペースを開ける
... 省略ぽく ... にする
together
近くに配置したいものは
together { ... }ブロックに入れる
note
code:note
note right of {participant}
...
end note
---
hnote over {participant}: ...
---
'複数のノードにつなぐ
note as hogenote
...
end note
hogenote .. A
hogenote .. B
ER 図・クラス図
ER 図はクラス図の拡張なので、クラス図で使えることは一通り書ける
hide circle でマルEとかを消す
class か interface ということに興味はなくて entity 間の関係を整理したいなら消しておくほうがいいかな
hide members, hide methods 何も書かないときに隠したり、メソッドは書かないよというときに隠すとシンプル
色
矢印の色
-[#Blue]> など
note, group の色
note right #Cyan : これは note です
group #LightGray グループのラベルです
など
テキストの色
note の中など
<color blue>...</color>
行末で終了するっぽいので、複数行なら各行頭に <color blue> を書く必要がありそう、閉じなくてもエラーにはならない
box のボーダー色を変える
skinparam sequenceBoxBorderColor #LightGray
デフォルトだと普通のラインと区別つきづらいため
box の中の色
#Ivory なんかが薄めでおきにいり
code:style
...
end box
node じゃなくなにか図に対して書きたい
header / footer
legend
Makefile
code:Makefile
SRC := $(wildcard *.puml)
DST := $(addsuffix .png, $(basename $(SRC)))
.PHONY: all
all: $(DST)
%.png: %.puml
plantuml $^
Colab の apt リポジトリの plantuml が古すぎる