私は Mermaid をよく使います。設計ドキュメントのフローチャート、README のシーケンス図、たまに ER 図。コードとして書けるダイアグラムは便利です。バージョン管理できる、diff できる、図形をドラッグする必要もない。ただ、出来上がりの見た目が良かった試しがありません。
組み込みテーマは機能的ですが、色使いは古さを感じます。Mermaid には完全なテーマシステムがあって、theme: 'base' を設定して themeVariables を上書きすればいい。問題はワークフローです。frontmatter を編集し、再レンダリングし、出力を目を細めて確認し、70 以上ある変数のどれが目的の部分を塗っているのか推測し、繰り返す。
限界だったのは一枚のシーケンス図でした。primaryColor を変えたら、actor ボックスまで一緒に色が変わった——調べると、あれは actorBkg の担当だったのです。色ひとつに 10 分。その大半は推測で、変数名からは何を塗るのかほとんど分からないからです。
欲しかったのはシンプルでした。変数をいじったら、すぐに何が起きるか見えること。
そこで mermaid.design を作りました。左に Mermaid コード、中央にライブプレビュー、右にテーマシステム全体の編集パネル。どの変更もダイアグラムをその場で再レンダリングするので、フィードバックループは数分から数秒になりました。
ここまでは表層の話です。実際に時間を節約してくれるのは、これから紹介するモジュールです。
ギャラリー：すべてのダイアグラム種別を一目で
テーマ変数の厄介なところは、同じ変数がダイアグラム種別ごとに違う振る舞いをすることです。ギャラリーページは 84 のテンプレート——フローチャート、シーケンス、クラス、ステート、ER など——をすべて現在のテーマでライブレンダリングします。変数を変えてギャラリーをスクロールすれば、すべての種別への効果が一目で分かります。確認のために種別を行ったり来たり切り替える必要はもうありません。そこが節約になる時間です。
テーマ変数：デフォルト値と継承関係が見える
73 個の変数すべてに、Mermaid base テーマのデフォルト値が表示されています。明示的に設定していない変数には AUTO バッジが付き、レンダリング時に mermaid が導出する値と、その由来が表示されます：
mainBkgはprimaryColorに追従primaryBorderColorはprimaryColorから計算されたボーダー色secondaryTextColorはsecondaryColorの反転色（コントラスト確保のため）actorBkgはmainBkgに追従——これが冒頭の罠の説明です。primaryColorを変えると actor ボックスが動いたのは、primaryColor→mainBkg→actorBkgという継承チェーンがあるからです
チェーンが見えれば、色の変更はもう当て推量ではありません。
プリセット：公式、デザイナー、そしてこれからも増える
21 のプリセットをワンクリックで適用。公式 Mermaid テーマ 11 個（default、neutral、dark、forest、base、そして v12 の redux・neo 系）と、私が手作業で調整したデザイナープリセット 10 個。それぞれライブのミニプレビュー付きで、コレクションは今後も増えていきます。
生成：1 つのプライマリカラーからパレット全体へ
プライマリのシードカラーを 1 つ選ぶだけで、ジェネレーターがその色相を中心に HSL 空間で明度をランプさせ（8 段階のスケール）、ダークモード用バリアントを含む完全なパレットを導出します。ダイアグラムをブランドに合わせる最速の方法です。
レンダリング設定：色以外も
色は半分にすぎません。Mermaid には 438 のレンダリングに影響する設定項目があり、ダイアグラム種別ごとに 34 のグループに整理されています。いくつか例を挙げると：
- グローバル：
fontFamily、fontSize、wrap（自動折り返し）、look（classic または handDrawn の手描き風） - フローチャート：
flowchart.curve（エッジの曲線スタイル）、flowchart.nodeSpacing/flowchart.rankSpacing（ノード間・ランク間の間隔）、flowchart.diagramPadding - シーケンス：
sequence.actorMargin、sequence.messageMargin、sequence.showSequenceNumbers（メッセージ番号）、sequence.mirrorActors - 円グラフ：
pie.textPosition、pie.donutHole、pie.legendPosition
現在のダイアグラム種別に対応するグループは自動で開きます。
ASCII モード：テキストとしてのダイアグラム
同じダイアグラムを ASCII アートとしてレンダリングできます。ワンクリックでコピーして、コードコメント、コミットメッセージ、プレーンテキストのドキュメントに。現在対応しているのは 5 種類：フローチャート、シーケンス、クラス、ステート、ER。文字セットは Unicode の罫線文字か純粋な ASCII を選べます。
まとめ
mermaid.design を作った動機はシンプルです。公式テーマの配色は好きになれず、themeVariables の手調整は時間がかかる。変更の効果がすぐ見える場所が欲しかった。今では、デフォルト値と継承関係が見えるテーマ変数のライブ編集、すべてのダイアグラム種別を一望できるギャラリー、公式・デザイナーのプリセット、1 つのプライマリカラーからパレット全体を導くジェネレーター、438 のレンダリング設定項目、そしてダイアグラムをテキストにする ASCII モードが揃っています。
あなたも Mermaid のテーマと格闘しているなら、試してみてください。