mermaid.jsのCSS調整

[ma91n]

原因と修正の説明

原因: theme-styles.styl:76-81 の .article-entry p ルールです。

.article-entry p {
color: #424242;
font-size: 1.2em;
line-height: 1.75em !important;
}

Mermaid v10以降は、ノードラベルをSVG内の 要素にHTML（

タグ等）として描画します。この

タグに対して .article-entry p
のセレクタがマッチし、color: #424242（ほぼ黒色）が直接適用されます。

CSSの仕様では、直接マッチするルールは親要素から継承された値よりも常に優先されるため、mermaidの style TenantDB fill:#2e7d32,color:#fff
で白文字を指定しても、.article-entry p { color: #424242 } に上書きされていました。font-size: 1.2em
もダイアグラム内のテキストサイズに影響していたはずです。

修正: pre.mermaid 内の p, span, li 要素に対して、color や font-size を inherit !important
に設定し、mermaidが設定する値がそのまま使われるようにしました。