使用mermaid的步驟如下:
<head>
標簽中添加以下代碼:<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
如果你使用npm安裝,可以在命令行中運行以下命令:
npm install mermaid --save
<div>
標簽來創建一個容器來展示mermaid圖表。例如:<div class="mermaid">
graph LR
A-->B
</div>
mermaid.initialize({ startOnLoad: true });
這將在頁面加載時自動渲染mermaid圖表。你也可以通過其他觸發事件來手動渲染圖表,例如在按鈕點擊時。
mermaid
的CSS類,并設置你想要的樣式。例如:.mermaid {
width: 500px;
height: 500px;
}
這樣就可以設置mermaid圖表的寬度和高度為500像素。
以上就是使用mermaid的基本步驟。你可以在mermaid的官方文檔中找到更多關于其他圖表類型和配置選項的詳細信息。