mermaidを使用してグラフを描く方法は？

1年 ago
陽, 向宇
1 minute

Mermaidを使用してチャートを描くには、次の手順に従う必要があります。

  1. HTMLファイルにMermaidライブラリを読み込む：
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  1. グラフを表示するためのコンテナ要素を作成してください。
<div class="mermaid" id="chart"></div>
  1. JavaScriptコードで、Mermaid構文を使用してグラフを定義します。
mermaid.initialize({ startOnLoad: true });

const chartDefinition = `
  graph LR
    A-->B
    B-->C
    C-->A
`;

const chartElement = document.getElementById('chart');
chartElement.innerHTML = chartDefinition;

上記のコードでは、div要素にchartDefinitionの値を設定することでグラフを描画しています。

  1. 端末やブラウザでHTMLファイルを実行すると、描画されたグラフが見られます。

Mermaidは、フローチャート、シーケンス図、ガントチャートなど、さまざまな種類のグラフをサポートしています。詳細な構文については、Mermaidの公式ドキュメントを参照してください。

bannerAds