怎么使用mermaid繪制圖表

小億
151
2024-01-10 18:11:50

使用Mermaid繪制圖表需要遵循以下步驟：

  1. 在HTML文件中引入Mermaid庫(kù)：
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  1. 創(chuàng)建一個(gè)容器元素，用于顯示圖表：
<div class="mermaid" id="chart"></div>
  1. 在JavaScript代碼中，使用Mermaid語(yǔ)法定義圖表：
mermaid.initialize({ startOnLoad: true });

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

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

上述代碼通過(guò)給div元素設(shè)置chartDefinition的值來(lái)繪制圖表。

  1. 在終端或?yàn)g覽器中運(yùn)行HTML文件，即可看到繪制的圖表。

Mermaid支持多種圖表類型，如流程圖、時(shí)序圖、甘特圖等，具體語(yǔ)法請(qǐng)參考Mermaid的官方文檔。

0 踩