图表组件
当撰写文档的时候，需要使用绘制流程图。 Mermaid.js 可以看成是 Markdown 文档中一款绘图插件，其语法完全是 markdownish 的，可以直接呈现图形与在线实时编辑。
VSCode 流程图兼容
安装以下插件，可实现项目编辑与发布一致性
- Markdown Preview Enhanced
- Mermaid Markdown Syntax Highlighting
markdown 画图
代码头部加标签 mermaid,会转为绘图组件显示。
代码第一行为以下类型，也会转为绘图组件显示。 ['gitGraph', 'classDiagram', 'sequenceDiagram', 'gantt']
流程图 graph
{代码}
"graph TB\n id1(圆角矩形)--普通线-->id2[矩形]\n subgraph 子图表\n id2==粗线==>id3{菱形}\n id3-.虚线.->id4>右向旗帜]\n id3--无箭头---id5((圆形))\nend"
甘特图 gantt
{代码}
"gantt\n dateFormat YYYY-MM-DD\n title mermaid 甘特图功能\n section A部分\n 完成任务 :done, des1,2019-01-06,2019-01-08\n 正进行任务 :active, des2,2019-01-09,3d\n 待开始任务 :des3, after des2, 5d\n 待开始任务2 :des4, after des3, 5d\n section 紧急任务\n 完成任务 :crit,done,2019-01-06,24h\n 实现parser :crit,done,after des1, 2d\n 为parser编写test :crit, active, 3d\n 待完成任务 :crit,5d\n 为rendere编写test: 2d\n 将功能加入到mermaid: 1d"
类别图 classDiagram
{代码}
"classDiagram\n\n Class01 <|-- AveryLongClass: Cool\n <<interface>> Class01\n Class09-->C2: Where am i?\n Class09 --* C3\n Class09 --|> Class07\n Class07: equals()\n Class07: Object[] elementData\n Class01: size()\n Class01: int chimp\n Class01: int gorilla\n class Class10 {\n <<service>>\n int id\n size()\n }"
状态图 stateDiagram
{代码}
"stateDiagram\n\n [*]-->Active\n state Active {\n [*]-->NumLockOff\n NumLockOff-->NumLockOn : EvNumLockPressed\n NumLockOn-->NumLockOff : EvNumLockPressed\n --\n [*]-->CapsLockOff\n CapsLockOff-->CapsLockOn : EvCapsLockPressed\n CapsLockOn-->CapsLockOff : EvCapsLockPressed\n --\n [*]-->ScrollLockOff\n ScrollLockOff-->ScrollLockOn : EvCapsLockPressed\n ScrollLockOn-->ScrollLockOff : EvCapsLockPressed\n }"
实体关系图 erDiagram
{代码}
"erDiagram\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE-ITEM : contains\n CUSTOMER }|..|{ DELIVERY-ADDRESS : uses"
饼图
-pie.md
{代码}
"pie\n title 产品X中的关键成分\n \"钙\" : 10.5\n \"钾\" : 24.5\n \"镁\" : 30.0\n \"铁\" : 35.0"
Quick 文档 0.2.3