Mermaidのテキスト設定まとめ｜改行・括弧・特殊文字・エラー対処

Mermaidのフローチャートでは、ノードのIDと表示テキストを分けたり、長い文章を改行したりできます。一方で、括弧や記号をそのまま書くと、ノード形状の記法と衝突して構文エラーになることがあります。

この記事では、よく使うテキスト設定をコピペできるコードと完成図で確認します。先に結論をまとめると、表示テキストはダブルクォーテーションで囲むのが基本です。

やりたいこと	書き方
IDと表示名を分ける	`nodeId["表示テキスト"]`
括弧を表示する	`A["入力（必須）"]`
明示的に改行する	`A["1行目<br/>2行目"]`
太字・斜体・自動折り返し	Markdown Stringsを使う
コメントを書く	行頭に `%%`
`#`などを安全に表示する	Entity codeを使う

IDと表示テキストを分ける
括弧をテキスト内に入れる
テキストを改行する
1. <br/>で改行位置を指定する
2. Markdown Stringsで自動折り返しする
日本語・Unicode・絵文字を表示する
特殊文字をEntity codeで表示する
コメントを書く
よくある構文エラーと対処
テキスト設定のおすすめパターン
まとめ
参考資料

IDと表示テキストを分ける

ノードには、コード内で参照するIDと、図に表示するテキストがあります。

flowchart LR
    start["記事を開く"] --> review["内容を確認する"]
    review --> edit["修正する"]
    review --> publish["公開する"]

reviewがID、内容を確認するが表示テキストです。同じノードを繰り返し使う場合、2回目以降はIDだけを書けます。文章をIDとして使わないため、後から表示文言を直しやすいのも利点です。

括弧をテキスト内に入れる

丸括弧、角括弧、波括弧はノード形状の指定にも使われます。表示したい文章に括弧が入る場合は、テキスト全体をダブルクォーテーションで囲みます。

flowchart LR
    A["入力（必須）"] --> B["確認（担当者レビュー）"] --> C["完了"]

日本語の全角括弧でも、記法を統一するため引用符で囲んでおくと修正時の事故を減らせます。

テキストを改行する

<br/>で改行位置を指定する

従来形式の文字列では、改行したい位置へ <br/> を入れます。

flowchart LR
    A["検索意図を<br/>確認する"] --> B["記事構成を<br/>作成する"] --> C["公開前に<br/>確認する"]

横長になりすぎるノードを短くできます。ただし、埋め込み先のHTMLラベル設定やMermaidのバージョンによって表示が異なることがあります。

Markdown Stringsで自動折り返しする

新しいMermaidでは、ダブルクォーテーションとバッククォートで囲むMarkdown Stringsを使えます。太字は **文字**、斜体は *文字* で指定でき、長いラベルは自動的に折り返されます。

flowchart LR
    A["`**重要**
    公開前にリンクと図を確認する`"] --> B["`*確認済み*`"]

Markdown Stringsはノード、線のラベル、サブグラフのラベルで利用できます。古いMermaidを搭載したサービスでは未対応の場合があるため、表示先で動作確認してください。

日本語・Unicode・絵文字を表示する

日本語などのUnicode文字は、引用符で囲んだラベルとして書けます。絵文字も環境のフォントが対応していれば表示されます。

flowchart LR
    A["調査 🔍"] --> B["執筆 ✍️"] --> C["確認 ✅"]

絵文字の外観はOSやブラウザで変わります。情報を絵文字だけに依存させず、テキストも併記するのが安全です。

特殊文字をEntity codeで表示する

引用符だけで解決しない記号は、Entity codeで置き換えられます。Mermaid公式ドキュメントでは10進数のコードが案内されており、たとえば # は #35; と書けます。

flowchart LR
    A["候補 #35;1"] --> B["評価 #9829;"] --> C["採用"]

#9829;はハート記号として表示されます。コードを読みにくくしないため、まず引用符を試し、それでも問題になる文字だけを置き換えるのがおすすめです。

コメントを書く

Mermaidコードにメモを残す場合は、独立した行を %% から始めます。%%から改行までの内容は描画されません。

flowchart LR
    %% この行は図に表示されません
    A["下書き"] --> B["レビュー"]
    %% 差し戻し経路
    B --> C["公開"]

コメントには、データの出典、更新理由、ノードIDの命名規則などを残せます。コメントは行の途中ではなく、専用の行へ書きます。

よくある構文エラーと対処

小文字のendをノード名に使わない

フローチャート内で小文字の end を使うと構文を壊すことがあります。EndやENDへ変更するか、別のIDを使います。

接続先の先頭がoまたはxの場合に注意する

A---oBやA---xBは、丸やバツの終端を持つ線として解釈されます。接続先がoまたはxで始まる場合は、記号との間へスペースを入れるか、大文字で始めます。

flowchart LR
    A["開始"] --> End["End"]
    dev["開発"] --- Ops["運用"]

エラーの切り分け手順

まずノード2個だけの最小コードにする
表示テキストをダブルクォーテーションで囲む
括弧・記号・改行を一つずつ戻す
小文字のend、接続直後のo・xを確認する
Mermaid Live Editorで同じコードを試す
埋め込み先のMermaidバージョンを確認する

Live Editorで動き、利用中のサービスで動かない場合は、サービス側のMermaidバージョンや設定差が原因の可能性があります。

テキスト設定のおすすめパターン

実務では、次の形から始めると管理しやすくなります。

flowchart LR
    input["入力（必須）"] --> validate["内容を<br/>検証する"]
    validate -->|問題なし| output["結果を保存する"]
    validate -->|要修正| revise["入力を修正する"]
    revise --> input