Mermaid記法をパースする方法（ライブラリの紹介）

概要

FlowChartなどをテキストで書けるようにするMermaid記法のparserは公式で提供されていない．@excalidraw/mermaid-to-excalidrawというnpmのライブラリを使用することで，dictionary形式でノードとエッジの配置データを取得できる．

excalidrawは手書き風の図を作成するツールであり，jsライブラリが提供されている．mermaid-to-excalidrawはexcalidrawのAPIと一緒に使うことが想定されたライブラリである．想定された使い方ではないかもしれないが，excalidraw形式のdictionaryデータには図形の種類，位置，サイズなどの情報が含まれているのでMermaidパーサーとして使用することが可能である．例えばMermaid記法で入力すると図形を配置してくれるExcelプラグインなどが考えられる．

使い方

• npm経由でライブラリをインストールする

  npm install --save @excalidraw/mermaid-to-excalidraw
  

• parseMermaidToExcalidrawにMermaid記法のテキストを渡すとelementsにdictionary形式のデータが返される．ER図などexcalidrawライブラリは未対応だがmermaidとしてはパース可能なテキストが渡された場合はfilesにmermaid APIで作られた画像ファイルが返される．GitHubに載っているサンプルコードは動作したが公式ドキュメントに載っているコードは古いのか動かなかったので注意してほしい．

  import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
  
  try {
    const { elements, files } = await parseMermaidToExcalidraw(
      diagramDefinition,
      {
        themeVariables: {
          fontSize: "25px",
        },
      }
    );
    // Render elements and files on Excalidraw
  } catch (e) {
    // Parse error, displaying error message to users
  }
  

注意点

このライブラリ使う際の注意点は以下の通りである．

• 本ライブラリはexcalidrawという手書き風ネットワーク図描画ライブラリのための公式コンバーターである．出力されるdictionaryの形式はexcalidrawのアップデートに合わせて変更される可能性がある
• 標準ではFlow図，アクティビティ図，クラス図がサポートされているが，ER図など他のダイヤグラムはサポートされていない．比較的新しいライブラリであり最近のアップデートもされている(2024年8月現在)ようなので今後対応する可能性はある．自分でパーサーを書いて拡張することは可能となっている(Adding a new Diagram Type)

補足情報

Mermaid記法のダイアグラムに含まれるオブジェクトの情報のみを取得したい場合，Mermaid APIに存在する次のメソッドを使用することで実現できる．ただし位置やサイズなどのレンダリング情報は含まれていない．

const diagram = await mermaid.mermaidAPI.getDiagramFromText(fullDefinition);

位置やサイズを取得したい場合はこのデータを元にsvgを解析する必要があり，mermaid-to-excalidrawではこの操作を行っている．

参考

• 公式ドキュメント Installation | Excalidraw developer docs
• GitHub @excalidraw/mermaid-to-excalidraw