使用mermaid快速绘制流程图

基础语法

1.         ```mermaid
2.         flowchart TD
3.             A[开始] --> B{条件判断}
4.             B -->|是| C[执行操作1]
5.             B -->|否| D[执行操作2]
6.             C --> E[结束]
7.             D --> E
8.     ```

复制代码

---

常用元素

• 方向界说：
  
  
  
  • TD：从上到下（Top-Down）
    
  • LR：从左到右（Left-Right）
    
  • BT：从下到上
    
  • RL：从右到左
    
  
  
• 节点：
  
  
  
  • 矩形节点：A[文本]
    
  • 圆角矩形：B(文本)
    
  • 菱形（判断）：C{文本}
    
  • 圆形：D((文本))
    
  
  
• 毗连线：
  
  
  
  • 实线箭头：-->
    
  • 虚线箭头：-.->
    
  • 无箭头线：---
    
  • 带文本的线：-->|文本|
    
  
  

---

示例

1. 简单流程

1. flowchart TD
2.     Start[开始] --> Input[输入数据]
3.     Input --> Process[处理数据]
4.     Process --> Output[输出结果]
5.     Output --> End[结束]

复制代码

2. 条件分支

1. flowchart TD
2.     A[登录系统] --> B{密码正确?}
3.     B -->|是| C[进入主页]
4.     B -->|否| D[提示错误]
5.     C --> E[显示内容]
6.     D --> A

复制代码

3. 子流程

1. flowchart TD
2.     A[主流程] --> B[[子流程1]]
3.     A --> C[[子流程2]]
4.     B --> D[合并结果]
5.     C --> D

复制代码

---

注意

• 使用英文符号（如 [], {}）。
  
• 节点名称需唯一。
  
• 支持 HTML 实体（如   表示空格）。
  

---

工具支持

• 直接粘贴到支持 Mermaid 的编辑器（如 VS Code + 插件、Typora）。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告