在Markdown中用mermaid画流程图和ER图

# 在Markdown中用mermaid画流程图
mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用。

流程图方向有下面几个值

• TB 从上到下
• BT 从下到上
• RL 从右到左
• LR 从左到右
• TD 同TB
  示例

从上到下

​```mermaid
graph TD
A --> B
​```

效果：

从左到右

​```mermaid
graph LR
A --> B
​```

效果：

基本图形

id + [文字描述]矩形

• id + (文字描述)圆角矩形
• id + >文字描述]不对称的矩形
• id + {文字描述}菱形
• id + ((文字描述))圆形

示例

​```mermaid
graph TD
    id[带文本的矩形]
    id4(带文本的圆角矩形)
    id3>带文本的不对称的矩形]
    id1{带文本的菱形}
    id2((带文本的圆形))
​```

效果：

节点之间的连接

• A --> B A带箭头指向B
• A — B A不带箭头指向B
• A -.- B A用虚线指向B
• A -.-> B A用带箭头的虚线指向B
• A ==> B A用加粗的箭头指向B
• A – 描述 — B A不带箭头指向B并在中间加上文字描述
• A – 描述 --> B A带箭头指向B并在中间加上文字描述
• A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
• A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述

示例

​```mermaid
graph LR
    A[A] --> B[B] 
    A1[A] --- B1[B] 
    A4[A] -.- B4[B] 
    A5[A] -.-> B5[B] 
    A7[A] ==> B7[B] 
    A2[A] -- 描述 --- B2[B] 
    A3[A] -- 描述 --> B3[B] 
    A6[A] -. 描述 .-> B6[B] 
    A8[A] == 描述 ==> B8[B]
​```

效果：

子流程图

subgraph title
    graph definition
end

示例

​```mermaid
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
​```

效果：

自定义样式

语法：style id 具体样式

示例

​```mermaid
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
​```

效果：

demo

绘制一个登录流程图。

​```mermaid
graph TD
A(开始) -->B{是否已注册}
B --否--> D[注册申请]
D --> E[审核通过]
E --> C[登录]
B --是--> C[登录]
C --> F{是否管理员}
F --否--> G[系统主页]
G --> H[相关操作]
H --> I{是否退出}
F --是--> J[处理日志]  
J --> I
I --否--> F
I --是--> K(结束) 
​```

效果：

绘制一个数据库ER图

​```mermaid
graph LR
A((用户id)) --- B[用户]
C((姓名)) --- B[用户]
D((生日)) --- B[用户]
E((身份证号)) --- B[用户]
F((电话)) --- B[用户]
G((性别)) --- B[用户]
H((登录名)) --- B[用户]
I((密码)) --- B[用户]
J((权限)) --- B[用户]
K((公司名)) --- B[用户]
W((人脸特征)) --- B
X((指静脉特征)) --- B
Y((指纹特征)) --- B
L[模组] --- M((算法))
Q[识别中心] --- R((识别id))
Q[识别中心] --- S((被识别人id))
Q[识别中心] --- T((识别时间))
Q[识别中心] --- U((识别算法))
Q[识别中心] --- V((识别结果))
a[权限操作 ]---b((权限操作id))
a --- c((操作者id))
a --- d((被操作者id))
a --- e((操作时间))
a --- f((操作内容))
B --- g{选择算法}
g --- L
B --- h{登陆}
h{登陆} --- Q
B --- i{管理}
i{管理} --- a
g --- Q
​```

效果：