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