drawing-mermaid-diagrams

Mermaid ダイアグラム

ダイアグラムは、エラーなくレンダリングされ、レイアウトが明確に読み取れる状態になれば完成です。 内容（プロセス、メッセージ、スキーマ、スケジュール、階層など）に合った種類を選びます。あらゆる用途にflowchartが適しているわけではありません。

レンダラーのサポート状況

• 各ホスト（GitHub、GitLab、ドキュメントサイト、IDE のプレビュー）はそれぞれ独自の Mermaid バージョンをバンドルしており、最新バージョンより古いことがよくあります。
• -betaキーワード（xychart-beta、sankey-beta、architecture-beta、block-beta）や、kanbanなどの最近追加された種類は、ホストで動作しない場合があります。
• 対象のレンダラーが不明な場合は、コアの種類を優先するか、ダイアグラムを表示するレンダラーを確認してください。

ダイアグラムキーワードの前には、デフォルトでフロントマターのconfig:ブロックを使います。フロントマター設定を読み取れないほど古いレンダラーの場合に限り、1 行目に%%{init: {...}}%%ディレクティブを使います。

レンダリングによる検証

スクラッチディレクトリ内の<out>/diagram.mmdにダイアグラムを保存し、レンダリングします。

npx -y @mermaid-js/[email protected] -i <out>/diagram.mmd -o <out>/diagram.png

Markdown ファイルの場合、-i doc.md -o <out>/doc.mdを使うと、すべての Mermaid ブロックがレンダリングされます。 Parse error on line NまたはLexical errorがあれば修正し、成功するまで再度レンダリングします。レイアウトが重要な場合は、PNG を開いて方向、重なり、ラベルのテキストを確認します。コードを目的の場所に配置するのは、その後にしてください。

mmdcが Chrome を見つけられない場合は、{"executablePath": "<path to an installed Chrome or Chromium>"}を<out>/puppeteer.jsonに書き込み、-p <out>/puppeteer.jsonを追加します。Node、ネットワーク、またはブラウザーを利用できない場合は、許可なくインストールせず、以下の注意点に照らしてダイアグラムを確認し、レンダリングできなかったことをユーザーに伝えてください。

CLI でレンダリングに成功しても、CLI にバンドルされた Mermaid バージョンでの成功を示すだけであり、古いホストでもレンダリングできることの証明にはなりません。

注意点

以下のいくつかは、構文エラーを出さずに失敗します。

• ()、[]、{}、:、;、または#を含むラベルは"..."で囲みます。内側の引用符は#quot;、<と>は#lt;と#gt;と記述します。
• フローチャートのノード ID または引用符で囲まれていないラベルに小文字のendを使うと、構文解析が失敗します。Endまたは["end"]を使ってください。
• リンクの直後にoまたはxで始まるノード ID を置くと（A---oB）、円形または交差するエッジとして誤って解釈されます。スペースを入れるか、大文字にしてください。
• %%コメントは独立した行に記述します。行末にコメントを置くと、構文エラーになります。
• ブロックダイアグラムには==>または:::の省略記法はありません。
• mindmapとkanbanではインデントが重要です。
• スタイルが適用されない場合：設定ブロックを先頭に置く必要があります。themeVariablesにはtheme: baseが必要で、フロントマター内の 16 進数カラーコードは引用符で囲む必要があります（引用符で囲まれていない#は YAML のコメントとして扱われ、カラーコードは適用されません）。
• CLI ではレンダリングできるのにホストではできない場合：ホストの Mermaid が古いためです。-betaの種類または最近追加された種類を置き換えるか、フロントマター設定を%%{init}に切り替えてください。