流程图

流程图由步骤及步骤之间的箭头组成。它以 flowchart 及其标题开头。

flowchart Ordering online
direction: right
cart: Fill the cart
group Checkout
  pay: Pay [io]
  check: Card accepted?
  pay -> check
group Warehouse [teal]
  pick: Pick the items
  pack: Pack the box
  pick -> pack
db: Orders [database]
cart -> pay
check -> pick: yes
check -> pay: no, try again [bad]
pick --> db: record
pack -> Ship it [end]

设置

设置	别名	值
direction	flow, orientation, layout, rankdir	箭头的走向：down（默认）、right、up 或 left —— 也可写作 TD、LR、BT、RL

像 Mermaid 那样在第一行写 flowchart LR 或 graph TD，同样可以指定方向。所有种类通用的设置 —— title、subtitle、caption、theme、font、size —— 见语言页面。

步骤

步骤在首次被命名的地方创建，无论是在箭头行中还是单独的一行上。再次命名时，不论大小写和空格如何，指的都是同一个步骤。

单独一行的 id: Label 为步骤指定一个用于书写箭头的短名称和一个用于显示的较长标签：pay: Pay at the till。特性写在名称或标签之后。

箭头和标签

由箭头连接的一行步骤会在每对相邻步骤之间画一个箭头：Wake up -> Shower -> Breakfast。冒号后的文字是该行最后一个箭头的标签，标签后的特性会改变该箭头：

check -> pay: no, try again [bad, dashed]

箭头特性	箭头的绘制方式
颜色或角色	使用该颜色
muted	使用主题的低调墨色
dashed（也可写作 dotted）	虚线
thick（也可写作 bold）	粗线
solid	实线

所有箭头 ->、-->、..>、=>、<-、<->、--、..、== 及其同类，都列在语言页面上。

形状

步骤默认是方框，除非其方括号中的某个单词指定了其他形状。文字以问号结尾的步骤是一个问题 —— 菱形 —— 除非其方括号为它指定了其他形状。

形状	别名
box	rect, rectangle, step, process
round	rounded, soft
pill	stadium, start, end, stop, terminal, begin
circle
diamond	decision, choice, question, if
hexagon	prepare, preparation
io	input, output, data, parallelogram
database	db, store, storage, cylinder
document	doc, file, report
subroutine	call, predefined
note	comment

形状和颜色可以写在同一对方括号中：Ship it [end, good]。颜色和角色见语言页面。

分组

group Name，加上缩进在其下方的所属各行，会在这些内容周围画一个边框。subgraph 是同一个词。group id: Label 为分组指定一个短名称和一个较长的标签；分组可以嵌套；方括号中的颜色会为分组铺上该颜色的底色：group Warehouse [teal]。

group Kitchen [orange]
  Boil -> Pour

下方没有任何缩进内容的分组会收到警告。进入或离开分组内步骤的箭头，会连到它所指名的那个步骤。

注释

note Step: what to say 会在某个步骤旁边放置一条注释，并用虚线与之相连：

note Pour: Mind the steam

布局方式

步骤会根据它们之间的箭头沿方向分级排列，因此箭头都朝同一个方向；会构成回路的箭头则逆向返回。每一级中的步骤会经过排序以避免箭头交叉，每个箭头的标签都位于其连线上，单个步骤组成的链保持在一条直线上，进出分组的连线会画到它所指名的步骤上。同样的文本总是会落在同样的位置。