markdown 流程图js_Markdown 进阶 - Mermaid 绘图

当撰写文档的时候，需要使用第三方工具绘制流程图，然后再将流程图导入 Markdown 有时会显得特别繁琐。Mermaid.js 可以用来解决这一痛点。简单说， Mermaid.js 可以看成是 Markdown 文档中一款绘图插件，其语法完全是 markdownish 的，绘图时不需要切换软件，也不需要切换思维。下面给出几个例子，大家可以感受一下，Mermaid.js 的简洁优雅。

在 VSCode 中，安装2个扩展

• Markdown Preview Enhanced
• Mermaid Markdown Syntax Highlighting

基本类型

流程图

graph TB

  id1(圆角矩形)--普通线-->id2[矩形];
  subgraph 子图
   id2==粗线==>id3{菱形}
   id3-.虚线.->id4>右向旗帜]
   id3--无箭头---id5((圆形))
  end