Mermaid
Mermaid 是一个基于JavaScript的图表工具,可以将Markdown语法的内容渲染成流程图等
然而之前我的博客的编辑器是不支持这个的,所以昨天折腾了一番加入了这个功能(
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
例如上面的代码可以被渲染成下面的流图
graph TD; A-->B; A-->C; B-->D; C-->D;
加入
首先需要在页面中引入JS文件,可以通过Script
标签的形式(
<script type="module">
import mermaid from 'https://npm.elemecdn.com/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
这里我使用的是国内的CDN,加载速度会快一些,当然也可以用JsDeliver的CDNhttps://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs
引入后会将页面中class=mermaid
的元素内容自动渲染成流图,目前已知标签内必须是纯文本,不能有<br/>
等,换行标记\n
可以有
sequenceDiagram Alice->>Bob: Hello Bob, how are you ? Bob->>Alice: Fine, thank you. And you? create participant Carl Alice->>Carl: Hi Carl create actor D as Donald Carl->>D: Hi
评论 (0)