|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>流程图模板 - 快速创建新流程图</title>
|
|
|
<link href="https://cdn.staticfile.org/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css">
|
|
|
<style>
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
|
background-color: #f5f7fa;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.page-header {
|
|
|
background: white;
|
|
|
padding: 25px 30px;
|
|
|
border-radius: 10px;
|
|
|
margin-bottom: 20px;
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
.chart-container {
|
|
|
background: white;
|
|
|
padding: 30px;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.chart-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20px;
|
|
|
padding-bottom: 15px;
|
|
|
border-bottom: 2px solid #e5e7eb;
|
|
|
}
|
|
|
|
|
|
.mermaid {
|
|
|
text-align: center;
|
|
|
background: #fafafa;
|
|
|
padding: 20px;
|
|
|
border-radius: 8px;
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
|
|
|
.code-example {
|
|
|
background: #1e1e1e;
|
|
|
color: #d4d4d4;
|
|
|
padding: 20px;
|
|
|
border-radius: 8px;
|
|
|
margin-top: 20px;
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
|
|
|
.code-example pre {
|
|
|
margin: 0;
|
|
|
font-family: 'Courier New', monospace;
|
|
|
font-size: 13px;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.example-section {
|
|
|
margin-bottom: 40px;
|
|
|
}
|
|
|
|
|
|
.example-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 15px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="page-header">
|
|
|
<h1><i class="bi bi-file-code"></i> Mermaid 流程图模板与示例</h1>
|
|
|
<p class="text-muted">快速创建和定制您的业务流程图</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 示例 1：基础水平流程 -->
|
|
|
<div class="example-section">
|
|
|
<div class="chart-container">
|
|
|
<div class="example-title">
|
|
|
<i class="bi bi-1-circle-fill text-primary"></i>
|
|
|
基础水平流程（Linear Flow）
|
|
|
</div>
|
|
|
<p class="text-muted small">最简单的从左到右流程图，适合展示线性步骤</p>
|
|
|
|
|
|
<div class="mermaid">
|
|
|
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
|
|
|
</div>
|
|
|
|
|
|
<div class="code-example">
|
|
|
<pre>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</pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 示例 2：带判断的流程 -->
|
|
|
<div class="example-section">
|
|
|
<div class="chart-container">
|
|
|
<div class="example-title">
|
|
|
<i class="bi bi-2-circle-fill text-success"></i>
|
|
|
带条件判断的流程（Decision Flow）
|
|
|
</div>
|
|
|
<p class="text-muted small">包含条件分支的流程图，适合审批、验证等场景</p>
|
|
|
|
|
|
<div class="mermaid">
|
|
|
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
|
|
|
</div>
|
|
|
|
|
|
<div class="code-example">
|
|
|
<pre>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</pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 示例 3：树状结构 -->
|
|
|
<div class="example-section">
|
|
|
<div class="chart-container">
|
|
|
<div class="example-title">
|
|
|
<i class="bi bi-3-circle-fill text-info"></i>
|
|
|
树状结构流程（Tree Structure）
|
|
|
</div>
|
|
|
<p class="text-muted small">从一个根节点展开到多个分支，适合组织架构、模块划分等</p>
|
|
|
|
|
|
<div class="mermaid">
|
|
|
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
|
|
|
</div>
|
|
|
|
|
|
<div class="code-example">
|
|
|
<pre>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</pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 示例 4：多路径复杂流程 -->
|
|
|
<div class="example-section">
|
|
|
<div class="chart-container">
|
|
|
<div class="example-title">
|
|
|
<i class="bi bi-4-circle-fill text-warning"></i>
|
|
|
多路径复杂流程（Complex Flow）
|
|
|
</div>
|
|
|
<p class="text-muted small">包含多个判断点和并行路径的复杂业务流程</p>
|
|
|
|
|
|
<div class="mermaid">
|
|
|
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
|
|
|
</div>
|
|
|
|
|
|
<div class="code-example">
|
|
|
<pre>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</pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 节点形状示例 -->
|
|
|
<div class="example-section">
|
|
|
<div class="chart-container">
|
|
|
<div class="example-title">
|
|
|
<i class="bi bi-star-fill text-danger"></i>
|
|
|
节点形状示例（Node Shapes）
|
|
|
</div>
|
|
|
<p class="text-muted small">Mermaid 支持多种节点形状，选择合适的形状可以更好地表达含义</p>
|
|
|
|
|
|
<div class="mermaid">
|
|
|
graph LR
|
|
|
A[方形节点] --> B(圆角矩形)
|
|
|
B --> C([体育场形])
|
|
|
C --> D[[子程序]]
|
|
|
D --> E[(数据库)]
|
|
|
E --> F((圆形))
|
|
|
F --> G{菱形判断}
|
|
|
G --> H[/平行四边形/]
|
|
|
H --> I[\反向平行四边形\]
|
|
|
I --> J>不对称形状]
|
|
|
</div>
|
|
|
|
|
|
<div class="code-example">
|
|
|
<pre>graph LR
|
|
|
A[方形节点] --> B(圆角矩形)
|
|
|
B --> C([体育场形])
|
|
|
C --> D[[子程序]]
|
|
|
D --> E[(数据库)]
|
|
|
E --> F((圆形))
|
|
|
F --> G{菱形判断}
|
|
|
G --> H[/平行四边形/]
|
|
|
H --> I[\反向平行四边形\]
|
|
|
I --> J>不对称形状]</pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 连接线样式示例 -->
|
|
|
<div class="example-section">
|
|
|
<div class="chart-container">
|
|
|
<div class="example-title">
|
|
|
<i class="bi bi-bezier text-purple"></i>
|
|
|
连接线样式示例（Link Styles）
|
|
|
</div>
|
|
|
<p class="text-muted small">不同的连接线样式可以表达不同的关系</p>
|
|
|
|
|
|
<div class="mermaid">
|
|
|
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>
|
|
|
|
|
|
<div class="code-example">
|
|
|
<pre>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</pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 快速模板 -->
|
|
|
<div class="chart-container">
|
|
|
<div class="example-title">
|
|
|
<i class="bi bi-clipboard-check text-success"></i>
|
|
|
快速开始模板
|
|
|
</div>
|
|
|
<p class="text-muted small">复制以下代码，替换文本内容即可快速创建您的流程图</p>
|
|
|
|
|
|
<div class="code-example">
|
|
|
<pre><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></pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script type="module">
|
|
|
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.esm.min.mjs';
|
|
|
|
|
|
mermaid.initialize({
|
|
|
startOnLoad: true,
|
|
|
theme: 'default',
|
|
|
flowchart: {
|
|
|
curve: 'basis',
|
|
|
padding: 20,
|
|
|
nodeSpacing: 50,
|
|
|
rankSpacing: 80,
|
|
|
useMaxWidth: true
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<script src="https://cdn.staticfile.org/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
