使用Mermaid繪制圖表需要遵循以下步驟:
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<div class="mermaid" id="chart"></div>
mermaid.initialize({ startOnLoad: true });
const chartDefinition = `
graph LR
A-->B
B-->C
C-->A
`;
const chartElement = document.getElementById('chart');
chartElement.innerHTML = chartDefinition;
上述代碼通過給div
元素設置chartDefinition
的值來繪制圖表。
Mermaid支持多種圖表類型,如流程圖、時序圖、甘特圖等,具體語法請參考Mermaid的官方文檔。