Mermaid 図

フローチャート、シーケンス図、円グラフ、ガントチャートを Mermaid のテキストで記述すると、文書内のブロックとして描画します。Mermaid 自体はエディターに含まれません。ページで読み込むか、サーバーで図を描画します。

有効にする

この機能は mermaiddiagram.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。ツールバー項目は insertdiagram（ツールチップは「Diagram」）です。既定では「More」（⋮）メニューにあります。独自のツールバーには insertdiagram を追加します。ブラウザー内で描画するには、エディターを作成する前に Mermaid を読み込みます。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/mermaiddiagram.js"></script>

<div id="div_editor1"><p>How a change ships:</p></div>
<script>
mermaid.initialize({ startOnLoad: false });
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertdiagram}|{undo,redo}"
});
</script>

描画元

プラグイン自身はネットワークから何も読み込みません。図ごとに、次のうち最初に利用できるものを使います。

1. diagramResolver：独自の関数です。Mermaid のソースを受け取り、{ svg: "<svg…" } または { imageUrl: "…" } を解決値とする Promise を返します。Kroki や mermaid-cli などでサーバー側で描画する場合に使います。
2. ページまたは親ウィンドウの window.mermaid。文字列を返す古い mermaid.render（バージョン 8、9）と、Promise を返すもの（10 以降）の両方に対応します。このページは 11.4.1 でテストしています。
3. どちらもない場合：ブロックにはソースをコードとして表示し、ダイアログには「No Mermaid renderer detected on the page」と表示します。ソースは保持するので、後から描画できます。

オプション

オプション	既定値	動作
diagramResolver	null	window.mermaid より優先する独自のレンダラーです。Promise が拒否された場合は、ソースとエラーメッセージを表示します。
diagramSamples	4 つのサンプル：フローチャート（graph TD）、sequenceDiagram、pie、gantt	ダイアログのサンプルボタンです。各ボタンにサンプルの先頭行を表示します。
text_insertdiagram, text_insertdiagramtitle, text_insertdiagramlabel, text_insertdiagrampreview	"Diagram", "Insert / edit diagram", "Mermaid", "Preview"	ボタンのツールチップ、ダイアログのタイトル、ラベルです。

サーバー側のリゾルバーは次のように作成します。URL は自分のものを指定します。

diagramResolver: function (source) {
  return fetch("/api/diagram", { method: "POST", body: source })
    .then(function (r) { return r.text(); })
    .then(function (svg) { return { svg: svg }; });
}

使い方

• ボタンをクリックするか、editor1.execCommand("insertdiagram") を呼び出すか、スラッシュメニューの「Diagram」を選びます。入力するかサンプルを選び、Insert を押します。
• 編集。図をダブルクリックすると、ソースを入れたダイアログが再度開き、ボタンは Update になります。
• 削除。ブロックにポインターを重ねて隅の丸い × をクリックするか、ブロック内にカーソルを置いて Delete または Backspace を押します。
• エラー。Mermaid がソースを解析できないと、プレビューにソースと Mermaid のメッセージ（「Parse error on line 3 …」）を赤で表示します。
• editor1.renderDiagrams() は、すべての図ブロックを再描画し、見つかった数を返します。まだ描画されていない内容を setHTMLCode で設定した後に呼び出します。

注意点

• 保存するブロックは、data-diagram にソースを、内部に描画結果を保持します（以下は一部を省略しています）。

  <div class="rte-mermaid" data-rte-diagram="1" data-diagram="graph LR
    A[Pull request] --&gt; B{Review}
    …" contenteditable="false" style=""><button type="button" class="rte-mermaid-remove" data-rte-mermaid-remove="1" aria-label="Remove diagram" title="Remove diagram">x</button><div class="rte-mermaid-render"><svg …>…</svg></div></div>

  Mermaid があればインライン SVG（上記のフローチャートで約 4 KB）、なければ <pre class="rte-mermaid-src"> になります。
• 削除用の × ボタンもコンテンツと一緒に保存します。HTML の表示先で隠さないと、ページ上に「x」が表示されます。
• Update で編集すると、data-diagram は HTML エンコードが二重になります（--> が --> として保存されます）。エディターは両方を読めますが、独自のコードではもう一度デコードする必要があります。
• ブロックの枠のスタイルはエディター内だけにあります。保存した図を表示するには、ボタンを隠し、ソースから描画します。次の例は、新規と編集済みの両方のブロックで動作しました。

  <style>.rte-mermaid-remove { display: none; }</style>
  <script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
  <script>
  mermaid.initialize({ startOnLoad: false });
  function decode(s) {
    return s.replace(/&quot;/g, '"').replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&amp;/g, "&");
  }
  document.querySelectorAll(".rte-mermaid[data-diagram]").forEach(function (block, i) {
    var target = block.querySelector(".rte-mermaid-render") || block;
    mermaid.render("saved-diagram-" + i, decode(block.getAttribute("data-diagram")))
      .then(function (result) { target.innerHTML = result.svg; });
  });
  </script>

• サニタイザーでは、上記の div の属性を保持する必要があります。また、インライン SVG を許可するか、削除して上記のように data-diagram から再描画します。
• mermaid.min.js 11.4.1 は約 2.6 MB です。図を編集、表示するページでのみ読み込み、オフラインでも使う場合は自分でホストしてください。

関連情報：図のデモ、ツールバー項目のリファレンス。