CSDN-Mardown-画流程图的两种方法

CSDN-Mardown-画流程图的两种方法

• 方法1：graph

  • 流程图方向：

    • 左向右 - LR（Left-Right），反向则为右向左 - RL（Right-Left）

      ```mermaid
      graph LR  
      L --> R
      ```
      
    • 上至下 - TD（Top-Down） ，反向则为下至上 - DT（Down-Top）

      ```mermaid
      graph TD  
      T --> D
      ```
      

  • 多支路流程图：

    ```mermaid
    graph TD  
    A --> B
    A --> C
    B --> D
    C --> D
    ```
    

  • 连接线类型：

    • 细线: -->

      ```mermaid
      graph LR  
      A --> B
      ```		
      
    • 细线附加文字:

      // 方法1
      ```mermaid
      graph LR  
      A --> | 文字|B
      ```	
      
      // 方法2
      ```mermaid
      graph LR  
      A -- 文字-->B
      ```		   				
      
    • 虚线: -.->

      ```mermaid
      graph LR  
      A -.-> B
      ```
      
    • 虚线附加文字:

      ```mermaid
      graph LR  
      A -. 文字 .-> B
      ```
      
    • 粗线: ==>

      ```mermaid
      graph LR  
      A ==> B
      ```
      
    • 粗线附加文字:

      ```mermaid
      graph LR  
      A ==>|文字| B
      ```
      
    • 无箭头直线: ==>

      ```mermaid
      graph LR  
      A---B
      ```
      
    • 无箭头直线附加文字:

      // 方法1
      ```mermaid
      graph LR  
      A---|文本|B
      ```	
      
      // 方法2
      ```mermaid
      graph LR  
      A -- 文本 --- B
      ```		   			
      

• 方法2：flowchat

  • start 表示 开始 - 圆角矩形
  • end 表示 结束 - 圆角矩形
  • operation 表示 操作 - 矩形
  • condition 表示 判断 - 菱形

    ```mermaid
    flowchat
    Start=>start: 开始
    End=>end: 结束
    Hungry=>operation: 饿了
    HaveFood=>condition: 有菜吗？
    CutFood=>operation: 切菜
    BuyFood=>operation: 买菜	
    MakeFood=>operation: 炒菜
    Eat=>operation: 吃饭
    
    Start->Hungry->HaveFood
    HaveFood(yes)->MakeFood
    HaveFood(no)->BuyFood->MakeFood
    MakeFood->Eat->End
    ```
    

• 总结

  • 还是觉得用绘图软件画好了，再截图的方法更香。( ಥ _ ಥ )

  • 码字辛苦，要表扬─=≡Σ(((つ•̀ω•́)つ