markdown 绘制 Mermaid

利用 markdown 绘制 Mermaid

对比 PlantUML（摘抄自网络）：

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

之前用过 PlantUML，但是发现这个东西的实现原理是生成 UML 的图片后上传服务端，每次再从服务端读取，因此觉得不够鲁棒，隐私性也不好，因而弃用。——（编者按：纠正一下，不是图片，而是SVG 可缩放矢量图形。但确实存在上传到plantuml.com，博客生成的图表点开是这个域名）

Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码，因此安全许多。

单独使用

在线编辑器

https://mermaidjs.github.io/mermaid-live-editor/

使用 markdown 编辑器：Typora

https://typora.io/
效果示例：

VSCode 插件

搜索安装插件： Markdown Preview Mermaid Support （直接搜mermaid找到的安装最多）

效果：

hexo博客中使用

不再赘述，一开始随便参考的搜索文章，怎么也渲染出不来。
还是需要参考插件的官方文档才可以：https://www.npmjs.com/package/hexo-filter-mermaid-diagrams

示例甘特图：

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

---

更多mermaid参考官方文档：https://mermaid-js.github.io/mermaid/#/