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

Posted 2022-12-09 oliveQ

Flowchart

• 图
• 流程图
• • 节点
  • 边
  • 流程图新特点
  • 特殊边
• 子图
• 注释
• 样式

图

图方向

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

graph LR
    Start --> Stop

流程图

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

节点

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

• [矩形]

graph LR
    id[矩形]

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

节点内文字换行：圆角<br>圆角

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

边

• 普通箭头

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

流程图新特点

• 新箭头：

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