mermaid | 流程图 :: Edinik's Blog

一个节点

flowchart LR
北京

flowchart LR 北京

一个带文本的节点

flowchart LR
北京[北京是中国的首都]

flowchart LR 北京[北京是中国的首都]

流程图方向

从左到右

flowchart LR
北京-->上海

flowchart LR 北京-->上海

从右到左

flowchart RL
北京-->上海

flowchart RL 北京-->上海

从上到下

flowchart TB
北京-->上海

flowchart TB 北京-->上海

从下到上

flowchart BT
北京-->上海

flowchart BT 北京-->上海

节点样式

圆角节点

flowchart LR
北京(北京是中国的首都)

flowchart LR 北京(北京是中国的首都)

半圆弧节点

flowchart LR
开始([开始])

flowchart LR 开始([开始流程])

子流程节点

flowchart LR
子流程[[这是一个子流程]]

flowchart LR 子流程[[这是一个子流程]]

圆柱形节点

flowchart LR
数据库[(数据库)]

flowchart LR 数据库[(数据库)]

圆形节点

flowchart LR
圆形((这是一个圆形))

flowchart LR 圆形((这是一个圆形))

非对称形状节点

flowchart LR
非对称形状>这是一个非对称形状]

flowchart LR 非对称形状>这是一个非对称形状]

菱形节点

flowchart LR
菱形{这是一个菱形}

flowchart LR 菱形{这是一个菱形}

六边形节点

flowchart LR
六边形{{这是一个六边形}}

flowchart LR 六边形{{这是一个六边形}}

平行四边形节点

flowchart LR
平行四边形[/这是一个平行四边形/]

flowchart LR 平行四边形[/这是一个平行四边形/]

flowchart LR
平行四边形[\这是一个平行四边形\]

flowchart LR 平行四边形[\这是一个平行四边形\]

梯形节点

flowchart LR
梯形[/这是一个梯形\]

flowchart LR 梯形[/这是一个梯形\]

flowchart LR
梯形[\这是一个梯形/]

flowchart LR 梯形[\这是一个梯形/]

双重圆环节点

flowchart LR
双重圆环(((这是一个双重圆环)))

flowchart LR 双重圆环(((这是一个双重圆环)))

节点之间的链接

带箭头的链接

flowchart LR
北京-->上海

flowchart LR 北京-->上海

开放的链接

flowchart LR
北京---上海

flowchart LR 北京---上海

链接上的文字

flowchart LR
北京---|G30|上海

flowchart LR 北京---|G30|上海

带有箭头和文本的链接

flowchart LR
北京-->|G30|上海

flowchart LR 北京-->|G30|上海

虚线链接

flowchart LR
北京-.->上海

flowchart LR 北京-.->上海

带文本的虚线链接

flowchart LR
北京-.->|G30|上海

flowchart LR 北京-.->|G30|上海

加粗链接

flowchart LR
北京==>上海

flowchart LR 北京==>上海

带文本的加粗链接

flowchart LR
北京==>|G30|上海

flowchart LR 北京==>|G30|上海

链式链接

flowchart LR
北京-->上海-->广州

flowchart LR 北京-->|G30|上海-->|G40|广州

flowchart LR
北京-->上海 & 杭州-->广州

flowchart LR 北京-->上海 & 杭州-->广州

flowchart LR
上海 & 杭州-->广州 & 深圳

flowchart TB 上海 & 杭州-->广州 & 深圳

新型箭头链接

flowchart LR
北京 --o 上海 --x 广州

flowchart LR 北京 --o 上海 --x 广州

双向箭头

flowchart LR
北京<-->上海o--o广州x--x深圳

flowchart LR 北京 <--> 上海 o--o 广州 x--x 深圳

链接的最小长度

flowchart TB
A[开始] --> B[输入用户名和密码]
B --> C{认证成功 ?}
C -->|是| D[登录成功]
C -->|否| E[登录失败]
D --> F[进入系统]
F ----> I
E --> G{是否重新登录 ?}
G -->|是| B
G -->|否| H[退出系统]
H --> I[结束]

flowchart TB A[开始] --> B[输入用户名和密码] B --> C{认证成功 ?} C -->|是| D[登录成功] C -->|否| E[登录失败] D --> F[进入系统] F ----> I E --> G{是否重新登录 ?} G -->|是| B G -->|否| H[退出系统] H --> I[结束]

特殊字符

flowchart LR
A["这是一个(括号)字符"]

flowchart LR A["这是一个(括号)字符"]

转义字符的代码

flowchart LR
A["这是一个双引号:#quot;"] --> B["这是一个单引号:#39;"] --> C["这是一个爱心:#9829;"]

flowchart LR A["这是一个双引号:#quot;"] --> B["这是一个单引号:#39;"] --> C["这是一个爱心:#9829;"]

子图表

flowchart TB
subgraph one[中国]
c1[北京]-->c2[上海]
end
subgraph two[日本]
b1[东京]-->b2[大阪]
end
subgraph three[美国]
a1[纽约]-->a2[华盛顿]
end
a1-->c2

flowchart TB subgraph one[中国] c1[北京]-->c2[上海] end subgraph two[日本] b1[东京]-->b2[大阪] end subgraph three[美国] a1[纽约]-->a2[华盛顿] end a1-->c2

flowchart TB
subgraph one[美国]
a1[纽约]-->a2[华盛顿]
end
subgraph two[日本]
b1[东京]-->b2[大阪]
end
subgraph three[中国]
c1[北京]-->c2[上海]
end
c1-->a2
one-->two
three-->two
two-->c2

flowchart TB subgraph one[美国] a1[纽约]-->a2[华盛顿] end subgraph two[日本] b1[东京]-->b2[大阪] end subgraph three[中国] c1[北京]-->c2[上海] end c1-->a2 one-->two three-->two two-->c2

子图表中的方向

flowchart LR
    subgraph 10[中国]
        direction TB
        subgraph 11[北京]
            direction LR
            111[东城区]
            112[西城区]
            113[朝阳区]
            111-->112-->113
        end
        subgraph 12[上海]
            direction TB
            121[黄浦区]
            122[徐汇区]
            123[长宁区]
            121-->122-->123
        end
    end
    A[美国]-->10[中国] -->B[日本]
    11 --> 12

flowchart LR subgraph 10[中国] direction TB subgraph 11[北京] direction LR 111[东城区] 112[西城区] 113[朝阳区] 111-->112-->113 end subgraph 12[上海] direction TB 121[黄浦区] 122[徐汇区] 123[长宁区] 121-->122-->123 end end A[美国]-->10[中国] -->B[日本] 11 --> 12

交互

flowchart LR
    A[Google]
    B[Github]
    C[Wikipedia]
    A-->B-->C
    click A "https://www.google.com" "google"
    click A href "https://www.google.com" "google"
    click B "https://www.github.com" "github"
    click B href "https://www.github.com" "github"
    click C "https://www.wikipedia.org" "wikipedia"
    click C href "https://www.wikipedia.org" "wikipedia"

flowchart LR A[Google] B[Github] C[Wikipedia] A-->B-->C click A "https://www.google.com" "google" click A href "https://www.google.com" "google" click B "https://www.github.com" "github" click B href "https://www.github.com" "github" click C "https://www.wikipedia.org" "wikipedia" click C href "https://www.wikipedia.org" "wikipedia"

注释

flowchart LR
    %% 这是一段注释
    %% 这是另一段注释
    A[Google]
    B[Github]
    C[Wikipedia]
    A-->B-->C

flowchart LR %% 这是一段注释 %% 这是另一段注释 A[Google] B[Github] C[Wikipedia] A-->B-->C