总结-Mermaid流程图教程(翻译)

图

图方向

• TB-从上到下
• TD-自顶向下/从上至下相同
• BT-从下到上
• RL-从右到左
• LR-从左到右

graph LR
    Start --> Stop

流程图

流程图允许以下功能：更多箭头类型，多向箭头以及与子图的链接。

节点

默认形状是矩形，以下是分类。

• [矩形]

矩形

graph LR
    id[矩形]

• (圆边)
• ([体育场形状])
• [[子例程形状]]
  
• [(圆柱状)]
  
• ((圆形式))
• id>不对称形状 ]
  
• {菱形}
• {{六角形}}
• [/平行四边形/]
• [/梯形]
• [\倒梯形/]

节点内文字换行：圆角
圆角

• 两个回车，或者使用< br >

边

• 普通箭头

A

B

graph LR
    A-->B

• 直线：A --- B
• 带文字：A-- This is the text! ---B或者A---|This is the text|B
• 箭头带文字：A-- text -->B或者A-->|text|B
• 点线：A-. text .-> B
• 粗链接：A == text ==> B
• 单路多连接：A -- text --> B -- text2 --> C
• 多路多连接：a --> b & c--> d

流程图新特点

• 新箭头：

A

B

C

flowchart LR
    A --o B
    B --x C

• 多向箭头

flowchart LR
    A o--o B
    B <--> C
    C x--x D

特殊边

流程图的每个边的垂直或水平级别是取决于流程图的方向
默认情况下，链接可以跨越任意数量的等级，但是您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接更长。【CSDN好像不支持定长度】

• 可以将文本放在引号中，以呈现更麻烦的字符。id1["This is the (text) in the box"]
• 对字符进行转义。A["A double quote:#quot;"] -->B["A dec char:#9829;"]

子图

• 基本使用：【one】可以为子图设置一个明确的ID

three

two

one

c2

c1

b2

b1

a2

a1

graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

• 在子图之间设置边

three

one

c2

c1

two

b2

b1

a2

a1

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

注释

可以在流程图中输入注释，解析器将忽略它们。注释必须自己一行，并且必须以%%（双百分号）开头。注释开始到下一个换行符之后的所有文本都将被视为注释，包括任何流语法

graph LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

样式

Start

Stop

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

• 通过定义mermaid.flowchartConfig或通过CLI在配置中使用json文件来完成的。mermaidCLI页面中描述了如何使用CLI。可以将mermaid.flowchartConfig设置为带有配置参数或相应对象的JSON字符串。

mermaid.flowchartConfig = {
    width: 100%
}

参考

原文官方地址
结合Typora使用