はてなブログでMermaidの線が表示されないときの対処法

はじめに

この記事では、はてなブログでMermaidのノードは表示されるのに、矢印線が見えない場合の対処法をまとめます。

環境

項目	内容
OS	Windows
シェル	なし
ツール	はてなブログ、Mermaid
実行場所	はてなブログの記事プレビュー
エラー文	エラー文なし。Mermaidの矢印線だけが見えない
実行したコマンド	なし。記事内に mermaid コードブロックを記述

確認状況

このエラーは、はてなブログのプレビュー画面で実際に確認した表示崩れです。

Mermaidのノードは表示されていましたが、矢印線が背景に溶けて見えない状態でした。

そのため、この記事ではMermaidの読み込み失敗ではなく、CSSやテーマ色の衝突として整理しています。

結論

Mermaidのノードが表示されているなら、Mermaidの読み込み自体は成功しています。

線だけが見えない場合は、ブログテーマの背景色やCSSとMermaidの線色が衝突している可能性があります。

原因

MermaidはSVGとして図を描画します。

ブログテーマ側のCSSや背景色によって、矢印線、矢印先端、ラベル背景が見えにくくなることがあります。

対処法

Mermaidの初期化設定で、背景色、線色、矢印色を固定します。

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    theme: 'base',
    themeVariables: {
      background: '#ffffff',
      mainBkg: '#f8fafc',
      primaryTextColor: '#0f172a',
      primaryBorderColor: '#7c3aed',
      lineColor: '#475569',
      arrowheadColor: '#475569',
      edgeLabelBackground: '#ffffff'
    }
  });
</script>

さらに、CSS側で .mermaid の背景と線色を固定すると安定します。

確認すること

次の順番で確認します。

1. Mermaidのノードが表示されているか
2. 矢印線だけ消えていないか
3. 背景色と線色が近すぎないか
4. テーマCSSでsvgやpathに影響する指定がないか
5. スマホ表示でも読めるか

まとめ

Mermaidの線が消える場合、コードの構文ミスとは限りません。

ノードが出ているなら、次はCSSとテーマ色を疑います。