Markdown绘图:Graph流程图

mermaid

graph(流程图)

节点名不能与关键字同名
使用引号可以避免一些不必要的麻烦,如避免与关键字同名

关键字graph表示一个流程图的开始,同时需要指定该图的方向
图方向:
– TB,从上到下
– TD,从上到下
– BT,从下到上
– RL,从右到左
– LR,从左到右

T = TOP,B = BOTTOM,L = LEFT,R = RIGHT,D = DOWN

举例:

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

效果:

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

节点

  • 默认节点 A
  • 文本节点 B[bname]
  • 圆角节点 C(cname)
  • 圆形节点 D((dname))
  • 非对称节点 E>ename]
  • 菱形节点 F{fname}

A\~F 是当前节点名字,类似于变量名,画图时便于引用
[b\~f]name是节点中显示的文字,如果省略默认节点的名字和显示的文字一样

举例:

graph TB
A
B[矩形节点]
C(圆角节点)
D((圆形节点))
E>非对称节点]
F{菱形节点}

效果:

graph TB
A
B[矩形节点]
C(圆角节点)
D((圆形节点))
E>非对称节点]
F{菱形节点}

节点间的连接线有多种形状,可以在连接线中加入标签:
– 无标签普通箭头:A1–>B1
– 带标签普通箭头:A2–text–>B2
– 无标签普通实线:A3—B3
– 带标签普通实线:A4–text—B4
– 无标签普通虚线:A5-.-B5
– 带标签普通虚线:A6-.text.-B6
– 无标签虚线箭头:A7-.->B7
– 带标签虚线箭头:A8-.text.->B8
– 无标签加粗虚线:A9===B9
– 带标签加粗虚线:A10==text===B10
– 无标签加粗箭头:A11==>B11
– 带标签加粗箭头:A12==text==>B12

举例:

graph TB
  A1-->B1
  A2--text-->B2
  A3---B3
  A4--text---B4
  A5-.-B5
  A6-.text.-B6
  A7-.->B7
  A8-.text.->B8
  A9===B9
  A10==text===B10
  A11==>B11
  A12==text==>B12

效果:

graph TB
  A1-->B1
  A2--text-->B2
  A3---B3
  A4--text---B4
  A5-.-B5
  A6-.text.-B6
  A7-.->B7
  A8-.text.->B8
  A9===B9
  A10==text===B10
  A11==>B11
  A12==text==>B12

subgraph(子图)

graph LR
  subgraph g1
    a1-->b1
  end
  subgraph g2
    a2-->b2
  end
  subgraph g3
    a3-->b3
  end
  a3-->a2
graph LR
  subgraph g1
    a1-->b1
  end
  subgraph g2
    a2-->b2
  end
  subgraph g3
    a3-->b3
  end
  a3-->a2
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇