优快云-Mardown-画流程图的两种方法

探讨Markdown中绘制流程图的两种方法,重点介绍使用Mermaid语法实现从左至右的流程图绘制,包括基本语法与样式配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

优快云-Mardown-画流程图的两种方法

  • 方法1:graph

    • 流程图方向:

      • 左向右 - LR(Left-Right),反向则为右向左 - RL(Right-Left)
        ```mermaid
        graph LR  
        L --> R
        ```
        
        L
        R
      • 上至下 - TD(Top-Down) ,反向则为下至上 - DT(Down-Top)
        ```mermaid
        graph TD  
        T --> D
        ```
        
        T
        D
    • 多支路流程图:

      ```mermaid
      graph TD  
      A --> B
      A --> C
      B --> D
      C --> D
      ```
      
      A
      B
      C
      D
    • 连接线类型:

      • 细线: -->
        ```mermaid
        graph LR  
        A --> B
        ```		
        
        A
        B
      • 细线附加文字:
        // 方法1
        ```mermaid
        graph LR  
        A --> | 文字|B
        ```	
        
        // 方法2
        ```mermaid
        graph LR  
        A -- 文字-->B
        ```		   				
        
        文字
        A
        B
      • 虚线: -.->
        ```mermaid
        graph LR  
        A -.-> B
        ```
        
        A
        B
      • 虚线附加文字:
        ```mermaid
        graph LR  
        A -. 文字 .-> B
        ```
        
        文字
        A
        B
      • 粗线: ==>
        ```mermaid
        graph LR  
        A ==> B
        ```
        
        A
        B
      • 粗线附加文字:
        ```mermaid
        graph LR  
        A ==>|文字| B
        ```
        
        文字
        A
        B
      • 无箭头直线: ==>
        ```mermaid
        graph LR  
        A---B
        ```
        
        A
        B
      • 无箭头直线附加文字:
        // 方法1
        ```mermaid
        graph LR  
        A---|文本|B
        ```	
        
        // 方法2
        ```mermaid
        graph LR  
        A -- 文本 --- B
        ```		   			
        
        文本
        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
      ```
      
Created with Raphaël 2.3.0 开始 饿了 有菜吗? 炒菜 吃饭 结束 买菜 yes no
  • 总结

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力的小肥丸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值