MarkDown mermaid 流程图(持续更新。。。)

• 在Markdown中，一段流程图语法以 “ 开头，以 “ 结尾。

• 在 “` 后另起一行，书写graph XX，用以确定将要绘制的流程图及其类型（XX表示流程图类型）。

功能整理

1. 流程图分为竖向和横向两大类，竖向包括自上而下和自下而上两种顺序，横向包括从右到左和从左到右两种顺序。

   其对应语法分别为：graph TB/graph BT/graph RL/graph LR。

   TB - top bottom（自上而下）

   graph TB 
   A --> B
   

   ---

   graph TB A --> B

   BT - bottom top（自下而上）

   graph BT 
   A --> B
   

   ---

   graph BT A --> B

   RL - right left（从右到左）

   graph RL 
   A --> B
   

   ---

   graph RL A --> B

   LR - left right（从左到右）

   graph LR 
   A --> B
   

   ---

   graph LR A --> B

2. 节点描述

   • 圆角四边形 ()

    graph TB
      A[这是圆角四边形/默认]
      B(这是直角四边形)
      C((这是圆形))
      D{这是菱形}
      E>非对称]
   

   ---

   graph TB A[这是圆角四边形/默认] B(这是直角四边形) C((这是圆形)) D{这是菱形} E>非对称]

3. 对箭头的调整

    graph TB
    1. 箭头连接： A1 --> B1  
    2. 开放连接： A2---B2  
    3. 标签连接： A3---|text|B3  
    4. 箭头标签连接：  A4-->|text|B4  
    5. 虚线开放连接：A5.-B5 或者 A5-.-B5 或者 A5..-B5 
    6. 虚线箭头连接：A6.->B6 或者 A6-.->B6 或者 A6..->B5  
    7. 标签虚线连接:  A7-.text.-B7 或者  
    8. 标签虚线箭头连接:  A8-.text.->B8  
    9. 粗线开放连接:  A9===B9  
    10. 粗线箭头连接:  A10==>B10  
    11. 标签粗线开放连接： A11==text===B11  或者 A11===|test|B11 
    12. 标签粗线箭头连接： A12==text==>B12 或者 A12 ==>|Text| B12
   
   

   ---

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

示例

• 举一个栗子

  graph TD
  A[种子] --> B(开花)
  B --> C{结果}
  C --> |1| D[苹果]
  C --> |2| E[香蕉]
  C --> |3| F[橘子]
  

  ---

  graph TD A[种子] --> B(开花) B --> C{结果} C --> |1| D[苹果] C --> |2| E[香蕉] C --> |3| F[橘子]

注：有的编辑器可以识别 graph 关键字，比如有道云笔记，但很多编辑器是需要加上 ```mermaid 关键字才能识别