Mermaid-Flowchart流程图学习

前言

前面的文章描述了语法图，本文章用语法图描述最重要的Mermaid-Flowchart流程图语法。
参考：
流程图指南：https://mermaid.js.org/syntax/flowchart.html
在线编辑器：https://mermaid.live/edit

总体结构

主要由节点（含子图）、边构成。

@startebnf
(*其中LR,TB等表示布局方向*)
总体结构 = flowchart, [(LR|TB|'...')], '语句' ;
语句 = direction, (LR|TB|'...')
    |节点
    |边
    |subgraph, id, ['[文本]'], '语句', 'end'
    ;
@endebnf

节点语法

@startebnf
节点 = id(*节点标识符*), ['节点形状和文本'];
节点形状和文本 = '[' ,方框, ']'
    |'(' , 圆角方框, ')'
    |'([', 体育场形状, '])'
    |'[[', 双线方框, ']]'
    |'[(', 圆柱, ')]'
    |'((', 圆形, '))'
    |'>', 箭头方框, ']'
    |'{', 菱形, '}'
    |'{{', 六边形方框, '}}'
    |'[/', 平行四边形, '/]'
    |'[\', 平行四边形, '\]'
    |'[\', 梯形, '/]'
    |'[/', 梯形, '\]'
    |'(((', 双环圆形, ')))';
(* 如果需要更多的图形、图标，甚至只有形状，可以使用下面的语法： 
A@{ shape: processes, label: "Multiple processes" }*)
节点 = id,'@','{','属性列表','}';
属性列表= shape,':',value
    |label,':',value
    |其它属性对
    (* 参考官网:https://mermaid.js.org/syntax/flowchart.html *)
    ;
@endebnf

边的语法

@startebnf
边 = 节点ID组, {([边id(*用于后续设置边的属性, 比如动画*), '@', 边类型], 节点ID组)}- ;
节点ID组 = 节点ID, {['&', 节点ID]}-;
(* 节点组简化连接构建 *)
边类型 = ['o'|'x'|'<'], ('--'|'=='|'-.')
    , '表示加长的边, 多一个横线就表示加长一个节点的长度'*['-'|'.']
    , ('o'|'x'|'<'|'-');
@endebnf

补充说明

给边设置动画效果

flowchart LR
  A e1@==> B
  e1@{ animate: true }

flowchart LR
  A e1@--> B
  e1@{ animation: fast }

flowchart LR
  A e1@--> B
  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
  class e1 animate