markdown editor_markdown 绘制 Mermaid

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

对比 PlantUML(摘抄自网络)：

之前用过 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

示例甘特图： 

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