资源
快速开始
自动挡
获取文件:https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
导入文件并使用 mermaid.initialize({startOnLoad:true});
加载:
使用 <pre class="mermaid"></pre>
内包含语句定义图表:
1 2 3 4 5 6 7 8 9
| <script src="/js/mermaid.min.js"></script> <script>mermaid.initialize({startOnLoad:true});</script> <pre class="mermaid"> graph TD; A-->B; A-->C; B-->D; C-->D; </pre>
|
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
更多语法见官方文档。这个工具使用了较为简洁的语法实现了画图的功能。(感觉好慢……)
手动挡
用法 | Mermaid 中文网 (nodejs.cn) 这里有写如何使用 mermaid.min.js
将 mermaid 语法的字符串转为 svg 字符串并生成 DOM。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <script src="/js/mermaid.min.js"></script> <script>mermaid.initialize({startOnLoad:false}); </script>
<script> const drawDiagram = async function (graphDefinition, id) { const { svg } = await mermaid.render('graphDiv', graphDefinition); const outputContainer = document.getElementById(id); outputContainer.innerHTML = svg; }; </script>
<div id="output-container"></div>
<script type="module"> await drawDiagram(` graph TD; A-->B; A-->C; B-->D; C-->D; `, 'output-container'); </script>
|
这么写感觉渲染快了很多……不知道为什么。
hexo 插件
hexo 有这么一个插件:webappdevelp/hexo-filter-mermaid-diagrams: mermaid diagrams for hexo (github.com)
安装它!
1
| npm install --save hexo-filter-mermaid-diagrams
|
这个插件的原理就是将下面的 Markdown 语句:
```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ```
|
渲染成:
1 2 3 4 5
| <pre class="mermaid">graph TD; A-->B; A-->C; B-->D; C-->D;</pre>
|
然后再自行调用相关函数进行渲染。