使用 Markdown 生成流程图

当撰写文档的时候, 对于流程图的生成大多使用 Visio 等繁重的工具, 没有一种轻便的工具能够画图从而简化文档的编写, 就像 markdown 那样。mermaid 解决这个痛点, 这是一个类似 markdown 语法的脚本语言, 通过 JavaScript 实现图表的生成。

mernaid

mernaid 官方文档

流程图(flowchart)

graph LR
  A --> B
  A --> C
  B --> D
  C --> D
graph LR
  A --> B
  A --> C
  B --> D
  C --> D

Graph

graph LR
  A --> B
graph LR
  A --> B

这是申明一个由左到右, 水平向右的图。 可能方向有:

  • TB - top bottom
  • BT - bottom top
  • RL - right left
  • LR - left right
  • TD - same as TB

节点与形状

默认节点

graph LR
  id1
graph LR
  id1

注意:’id1 ‘显示在节点内部。

文本节点

graph LR
  id[This is the text in the box]
graph LR
  id[This is the text in the box]

圆角节点

graph LR
  id(This is the text in the box)
graph LR
  id(This is the text in the box)

圆节点

graph LR
  id((This is the text in the box))
graph LR
  id((This is the text in the box))

非对称节点

graph LR
  id{This is the text in the box}
graph LR
  id{This is the text in the box}

连接线

箭头形连接

graph LR
  A --> B
graph LR
  A --> B

开放行连接

graph LR
  A --- B
graph LR
  A --- B

标签连接

graph LR
  A -- This is the label text --- B
graph LR
  A -- This is the label text --- B

箭头标签连接

graph LR
  A -->|This is the label text| B
  C -- This is the label text --> D
graph LR
  A -->|This is the label text| B
  C -- This is the label text --> D

虚线连接

graph LR
  A -.-> B
  C -.- D
graph LR
  A -.-> B
  C -.- D

标签虚线

graph LR
  A -.This is the label text.-> B
  C -.This is the label text.- D
  E -.->|This is the label text| F
graph LR
  A -.This is the label text.-> B
  C -.This is the label text.- D
  E -.->|This is the label text| F
亲!!! 听说给作者打赏一杯咖啡钱,会给自己带来好运哦!