Mermaid 流程图模板与示例

快速创建和定制您的业务流程图

基础水平流程（Linear Flow）

最简单的从左到右流程图，适合展示线性步骤

graph LR A[步骤1] --> B[步骤2] B --> C[步骤3] C --> D[步骤4] D --> E[完成] style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px style E fill:#C8E6C9,stroke:#388E3C,stroke-width:2px 
graph LR
    A[步骤1] --> B[步骤2]
    B --> C[步骤3]
    C --> D[步骤4]
    D --> E[完成]
    
    style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
    style E fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
带条件判断的流程（Decision Flow）

包含条件分支的流程图，适合审批、验证等场景

graph LR Start[开始] --> Input[输入数据] Input --> Check{数据验证} Check -->|通过| Process[处理数据] Check -->|失败| Error[错误处理] Process --> Save[保存结果] Error --> Input Save --> End[结束] style Start fill:#E3F2FD,stroke:#1976D2,stroke-width:2px style End fill:#C8E6C9,stroke:#388E3C,stroke-width:2px style Error fill:#FFCCBC,stroke:#E64A19,stroke-width:2px style Check fill:#FFF9C4,stroke:#F9A825,stroke-width:2px 
graph LR
    Start[开始] --> Input[输入数据]
    Input --> Check{数据验证}
    Check -->|通过| Process[处理数据]
    Check -->|失败| Error[错误处理]
    Process --> Save[保存结果]
    Error --> Input
    Save --> End[结束]
    
    style Start fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
    style End fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
    style Error fill:#FFCCBC,stroke:#E64A19,stroke-width:2px
    style Check fill:#FFF9C4,stroke:#F9A825,stroke-width:2px
树状结构流程（Tree Structure）

从一个根节点展开到多个分支，适合组织架构、模块划分等

graph LR Root[系统管理] --> Module1[用户管理] Root --> Module2[权限管理] Root --> Module3[系统配置] Module1 --> Sub1_1[用户列表] Module1 --> Sub1_2[添加用户] Module1 --> Sub1_3[用户审核] Module2 --> Sub2_1[角色管理] Module2 --> Sub2_2[权限分配] Module3 --> Sub3_1[参数设置] Module3 --> Sub3_2[日志管理] style Root fill:#1976D2,color:#fff,stroke:#0D47A1,stroke-width:3px style Module1 fill:#4CAF50,color:#fff,stroke:#2E7D32,stroke-width:2px style Module2 fill:#FF9800,color:#fff,stroke:#E65100,stroke-width:2px style Module3 fill:#F44336,color:#fff,stroke:#B71C1C,stroke-width:2px 
graph LR
    Root[系统管理] --> Module1[用户管理]
    Root --> Module2[权限管理]
    Root --> Module3[系统配置]
    
    Module1 --> Sub1_1[用户列表]
    Module1 --> Sub1_2[添加用户]
    Module1 --> Sub1_3[用户审核]
    
    Module2 --> Sub2_1[角色管理]
    Module2 --> Sub2_2[权限分配]
    
    Module3 --> Sub3_1[参数设置]
    Module3 --> Sub3_2[日志管理]
    
    style Root fill:#1976D2,color:#fff,stroke:#0D47A1,stroke-width:3px
    style Module1 fill:#4CAF50,color:#fff,stroke:#2E7D32,stroke-width:2px
    style Module2 fill:#FF9800,color:#fff,stroke:#E65100,stroke-width:2px
    style Module3 fill:#F44336,color:#fff,stroke:#B71C1C,stroke-width:2px
多路径复杂流程（Complex Flow）

包含多个判断点和并行路径的复杂业务流程

graph LR Start[开始] --> Type{申请类型} Type -->|类型A| PathA[处理A] Type -->|类型B| PathB[处理B] Type -->|类型C| PathC[处理C] PathA --> ReviewA{审核A} PathB --> ReviewB{审核B} PathC --> ReviewC{审核C} ReviewA -->|通过| Approve[最终审批] ReviewB -->|通过| Approve ReviewC -->|通过| Approve ReviewA -->|拒绝| Reject[驳回] ReviewB -->|拒绝| Reject ReviewC -->|拒绝| Reject Reject --> Start Approve --> End[完成] style Start fill:#E3F2FD,stroke:#1976D2,stroke-width:2px style End fill:#C8E6C9,stroke:#388E3C,stroke-width:2px style Reject fill:#FFCDD2,stroke:#C62828,stroke-width:2px style Type fill:#FFF9C4,stroke:#F9A825,stroke-width:2px style Approve fill:#B2DFDB,stroke:#00897B,stroke-width:2px 
graph LR
    Start[开始] --> Type{申请类型}
    
    Type -->|类型A| PathA[处理A]
    Type -->|类型B| PathB[处理B]
    Type -->|类型C| PathC[处理C]
    
    PathA --> ReviewA{审核A}
    PathB --> ReviewB{审核B}
    PathC --> ReviewC{审核C}
    
    ReviewA -->|通过| Approve[最终审批]
    ReviewB -->|通过| Approve
    ReviewC -->|通过| Approve
    
    ReviewA -->|拒绝| Reject[驳回]
    ReviewB -->|拒绝| Reject
    ReviewC -->|拒绝| Reject
    
    Reject --> Start
    Approve --> End[完成]
    
    style Start fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
    style End fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
    style Reject fill:#FFCDD2,stroke:#C62828,stroke-width:2px
    style Type fill:#FFF9C4,stroke:#F9A825,stroke-width:2px
    style Approve fill:#B2DFDB,stroke:#00897B,stroke-width:2px
节点形状示例（Node Shapes）

Mermaid 支持多种节点形状，选择合适的形状可以更好地表达含义

graph LR A[方形节点] --> B(圆角矩形) B --> C([体育场形]) C --> D[[子程序]] D --> E[(数据库)] E --> F((圆形)) F --> G{菱形判断} G --> H[/平行四边形/] H --> I[\反向平行四边形\] I --> J>不对称形状] 
graph LR
    A[方形节点] --> B(圆角矩形)
    B --> C([体育场形])
    C --> D[[子程序]]
    D --> E[(数据库)]
    E --> F((圆形))
    F --> G{菱形判断}
    G --> H[/平行四边形/]
    H --> I[\反向平行四边形\]
    I --> J>不对称形状]
连接线样式示例（Link Styles）

不同的连接线样式可以表达不同的关系

graph LR A[节点A] --> B[实线箭头] A -.-> C[虚线箭头] A ==> D[粗线箭头] A --- E[实线无箭头] A -.- F[虚线无箭头] B -->|带文本| G[节点G] C -.->|虚线文本| G D ==>|粗线文本| G style A fill:#90CAF9,stroke:#1565C0,stroke-width:2px 
graph LR
    A[节点A] --> B[实线箭头]
    A -.-> C[虚线箭头]
    A ==> D[粗线箭头]
    A --- E[实线无箭头]
    A -.- F[虚线无箭头]
    
    B -->|带文本| G[节点G]
    C -.->|虚线文本| G
    D ==>|粗线文本| G
    
    style A fill:#90CAF9,stroke:#1565C0,stroke-width:2px
快速开始模板

复制以下代码，替换文本内容即可快速创建您的流程图

<div class="chart-container">
    <div class="chart-header">
        <div class="chart-title">
            <i class="bi bi-arrow-right-circle"></i>
            您的流程图标题
        </div>
    </div>
    <div class="chart-description">
        <i class="bi bi-info-circle"></i>
        <strong>流程说明：</strong> 在这里添加流程说明
    </div>
    <div class="mermaid">
graph LR
    A[开始] --> B[处理]
    B --> C{判断}
    C -->|是| D[路径1]
    C -->|否| E[路径2]
    D --> F[结束]
    E --> F
    
    style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
    style F fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
    </div>
</div>