Mermaidの大きすぎる余白を調整する方法の一例
実は Mermaid 基本的には好きじゃなくて。なんでかって言うと
- テーマの決まっていない「なんとなく」な図を描きにくい
- 無駄に余白がでかい
の二点なんだけど、今日は後者については多少はマシになりそうということがちょっとわかったのでそのメモ。
例えばER図
Entity Relationship Diagrams | Mermaid
公式のサンプルより。
※ これ kroki 経由だからなのか分からないけど余白が「大きすぎる」ように見えないんよね…
世にある情報はテーマ選択くらいしかない
違うんだよなーと思うんですが、なんかいい具合の設定の情報見つからないんですよね。
実勢に設定してみる
ところが AI に聞くとどこからともなく設定を拾ってきたりする。
diagram ごとに固有のパラメータがあって、それを設定する。 ER について指定する場合はこんな感じ。
%%{
init: {
'er': {
'entityPadding': 1
}
}
}%%
entity の中の文字までの余白を詰めてみている。違いが分かりやすいように色味も変えてみた。
めっちゃ詰まった。ように見えるんだけど、これどんな CSS を適用してるかで違うらしい。2025-04 時点で「あーありがち」は kroki に丸投げしてるのでその CSS が適用されてめっちゃ詰まってるように見えるんだけど、そうじゃないサービスもあります！ CSS レベルで全部指定するのはだいぶダルいのでやってません。
結論 - できんことはないけどイマイチではある
- ドキュメントがないというか、そもそも API としてこの余白調整周りがまともに整理されてなくて render の処理の中で生々しくハードコードした値で処理している
- ごく一部のパラメータだけ与えることができるが、それもドキュメントがあるだかないだか（これは erDiagram が未だに experimental なのもあると思う）
まぁだから結局世の中に出回ってる theme 程度しか安定した情報出せないんだなって思った。
まだまだ今のところ「コード読め」っていうストロングスタイルなんだわ。ただまぁ、「余白デカすぎて苦手」だけは少しは回避できんことはないということは分かった。