🐕

GitHubでMermaid形式の図を書くときライトモードでもダークモードでも適切な色をつけたい

2025/03/03に公開

GitHub上ではMermaid形式の図が気軽に書けます。「```mermaid」から始まるコードブロックはMermaid形式で解釈されます。(もちろんZennでも書けます)

たとえば下記のような図を簡単に書くことができます。

ところで、GitHubはダークモードをサポートしており、単純に色指定をしたMermaidの図はダークモードで悲惨なことになります。上の図をダークモードで見ると、たとえば以下のような見え方になったりします。

ピンクと青の長方形内の文字が非常に読みにくいですね。コントラスト比が低すぎる組み合わせになっています。

色指定していない部分(地のテキストや矢印の色)はモードに合わせて適切な色になるのですが、明示的に色指定をした部分は一方のモードに合わない色になってしまいます。ダークモードでもライトモードでも適切なコントラスト比を確保できる色は存在しません。

この解決策はいくつかあるのですが、一番単純なのは「色指定に半透明を使う」ことです。具体的には、Mermaidフォーマット中で下記のような色指定をするとダークモードでもライトモードでも見やすい色が表示されるようになります。

    style A fill:#d000d088,stroke-width:2px
    style E fill:#006cff88,stroke-width:2px
    style F fill:#006cff88,stroke-width:2px

以下は、これを適用した時のダークモードでの見え方です。(ライトモードでの見え方は最初の図と変わりません)

これなら両モードに対応できたと言えるんじゃないでしょうか。これが流行して生成AIがこの方式のMermaidを出力するようになったら最高だと思ってます。

Discussion