|
|
|
|
|
# Mermaid 流程图使用说明
|
|
|
|
|
|
|
|
|
|
|
|
## 📋 概述
|
|
|
|
|
|
|
|
|
|
|
|
本页面展示了资金使用管理系统的各业务流程图，采用 **Mermaid.js** 实现，支持**水平排列（LR 方向）**的流程图展示。
|
|
|
|
|
|
|
|
|
|
|
|
## 🎯 页面特点
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 水平排列布局
|
|
|
|
|
|
- 使用 `graph LR` 语法实现从左到右的流程展示
|
|
|
|
|
|
- 更符合中文从左到右的阅读习惯
|
|
|
|
|
|
- 适合展示线性流程和树状结构
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 分类展示
|
|
|
|
|
|
页面包含 4 个主要标签页：
|
|
|
|
|
|
- **支付流程**：直接支付、非直接支付流程
|
|
|
|
|
|
- **预算管理**：预算执行管理、预算申报流程
|
|
|
|
|
|
- **审批流程**：事前审批、多级审批流程
|
|
|
|
|
|
- **权限管理**：用户权限管理、访问控制流程
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 可视化设计
|
|
|
|
|
|
- 不同颜色标识不同环节
|
|
|
|
|
|
- 🔵 蓝色：开始/输入节点
|
|
|
|
|
|
- 🟢 绿色：完成/成功节点
|
|
|
|
|
|
- 🟠 橙红：退回/修改节点
|
|
|
|
|
|
- 🟡 黄色：判断/审核节点
|
|
|
|
|
|
- 节点样式美化，易于区分
|
|
|
|
|
|
- 响应式设计，适配各种屏幕
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 使用方法
|
|
|
|
|
|
|
|
|
|
|
|
### 访问流程图页面
|
|
|
|
|
|
|
|
|
|
|
|
1. 登录系统后，在左侧导航菜单找到 **"业务流程图"** 菜单项
|
|
|
|
|
|
2. 点击进入流程图展示页面
|
|
|
|
|
|
3. 通过顶部标签页切换不同业务模块的流程图
|
|
|
|
|
|
|
|
|
|
|
|
### 查看流程图
|
|
|
|
|
|
|
|
|
|
|
|
- **切换标签**：点击顶部标签切换不同业务流程
|
|
|
|
|
|
- **缩放查看**：鼠标滚轮可缩放流程图
|
|
|
|
|
|
- **导出图片**：点击 "导出" 按钮可下载 SVG 格式图片
|
|
|
|
|
|
- **打印输出**：使用浏览器打印功能可打印流程图
|
|
|
|
|
|
|
|
|
|
|
|
## 🛠️ 技术实现
|
|
|
|
|
|
|
|
|
|
|
|
### 核心技术栈
|
|
|
|
|
|
|
|
|
|
|
|
- **Mermaid.js v10**：流程图渲染引擎
|
|
|
|
|
|
- **Bootstrap 5.3**：UI 框架
|
|
|
|
|
|
- **ES Module**：使用 ESM 方式引入 Mermaid
|
|
|
|
|
|
|
|
|
|
|
|
### Mermaid 配置
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
mermaid.initialize({
|
|
|
|
|
|
startOnLoad: true,
|
|
|
|
|
|
theme: 'default',
|
|
|
|
|
|
flowchart: {
|
|
|
|
|
|
curve: 'basis', // 曲线类型
|
|
|
|
|
|
padding: 20, // 内边距
|
|
|
|
|
|
nodeSpacing: 50, // 节点间距
|
|
|
|
|
|
rankSpacing: 80, // 层级间距
|
|
|
|
|
|
diagramPadding: 20, // 图表边距
|
|
|
|
|
|
useMaxWidth: true // 响应式宽度
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 📝 添加新流程图
|
|
|
|
|
|
|
|
|
|
|
|
### 步骤 1：选择标签页
|
|
|
|
|
|
|
|
|
|
|
|
在 `flowcharts.html` 中找到对应的标签页内容区域，或创建新的标签页。
|
|
|
|
|
|
|
|
|
|
|
|
### 步骤 2：添加图表容器
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
|
<div class="chart-header">
|
|
|
|
|
|
<div class="chart-title">
|
|
|
|
|
|
<i class="bi bi-arrow-right-circle"></i>
|
|
|
|
|
|
您的流程图标题
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-actions">
|
|
|
|
|
|
<span class="badge-info">水平布局</span>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary" onclick="exportChart(this)">
|
|
|
|
|
|
<i class="bi bi-download"></i> 导出
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-description">
|
|
|
|
|
|
<i class="bi bi-info-circle"></i>
|
|
|
|
|
|
<strong>流程说明：</strong> 在这里添加流程图的说明文字
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mermaid">
|
|
|
|
|
|
<!-- 在这里编写 Mermaid 语法 -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 步骤 3：编写 Mermaid 语法
|
|
|
|
|
|
|
|
|
|
|
|
**基础语法示例：**
|
|
|
|
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
|
|
graph LR
|
|
|
|
|
|
A[开始] --> B{判断条件}
|
|
|
|
|
|
B -->|是| C[处理A]
|
|
|
|
|
|
B -->|否| D[处理B]
|
|
|
|
|
|
C --> E[结束]
|
|
|
|
|
|
D --> E
|
|
|
|
|
|
|
|
|
|
|
|
style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
|
|
|
|
|
|
style E fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**节点形状：**
|
|
|
|
|
|
- `[方形节点]` - 矩形
|
|
|
|
|
|
- `(圆角节点)` - 圆角矩形
|
|
|
|
|
|
- `{菱形节点}` - 菱形（判断）
|
|
|
|
|
|
- `((圆形节点))` - 圆形
|
|
|
|
|
|
- `[(数据库)]` - 圆柱形
|
|
|
|
|
|
|
|
|
|
|
|
**连接线类型：**
|
|
|
|
|
|
- `-->` - 实线箭头
|
|
|
|
|
|
- `-.->` - 虚线箭头
|
|
|
|
|
|
- `==>` - 粗线箭头
|
|
|
|
|
|
- `---` - 实线无箭头
|
|
|
|
|
|
- `-->|文本|` - 带文字的箭头
|
|
|
|
|
|
|
|
|
|
|
|
**样式定义：**
|
|
|
|
|
|
```
|
|
|
|
|
|
style 节点ID fill:#颜色,stroke:#边框色,stroke-width:2px,color:#文字色
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 🎨 自定义样式
|
|
|
|
|
|
|
|
|
|
|
|
### 修改节点颜色
|
|
|
|
|
|
|
|
|
|
|
|
在 Mermaid 代码末尾添加 style 定义：
|
|
|
|
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
|
|
style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
|
|
|
|
|
|
style B fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 推荐配色方案
|
|
|
|
|
|
|
|
|
|
|
|
| 用途 | 背景色 | 边框色 | 说明 |
|
|
|
|
|
|
|------|--------|--------|------|
|
|
|
|
|
|
| 开始节点 | #E3F2FD | #1976D2 | 蓝色系 |
|
|
|
|
|
|
| 成功节点 | #C8E6C9 | #388E3C | 绿色系 |
|
|
|
|
|
|
| 失败/退回 | #FFCCBC | #E64A19 | 橙红系 |
|
|
|
|
|
|
| 判断节点 | #FFF9C4 | #F9A825 | 黄色系 |
|
|
|
|
|
|
| 处理节点 | #B2DFDB | #00897B | 青色系 |
|
|
|
|
|
|
|
|
|
|
|
|
## 🔧 常见问题
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 图表不显示？
|
|
|
|
|
|
|
|
|
|
|
|
**原因**：Mermaid 加载失败或语法错误
|
|
|
|
|
|
|
|
|
|
|
|
**解决**：
|
|
|
|
|
|
- 检查浏览器控制台是否有错误信息
|
|
|
|
|
|
- 验证 Mermaid 语法是否正确
|
|
|
|
|
|
- 确保 CDN 链接可访问
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 图表显示不完整？
|
|
|
|
|
|
|
|
|
|
|
|
**原因**：容器宽度限制
|
|
|
|
|
|
|
|
|
|
|
|
**解决**：
|
|
|
|
|
|
- 在 `.mermaid` 容器上添加 `overflow-x: auto`
|
|
|
|
|
|
- 调整 `nodeSpacing` 和 `rankSpacing` 参数
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 中文显示乱码？
|
|
|
|
|
|
|
|
|
|
|
|
**原因**：字符编码问题
|
|
|
|
|
|
|
|
|
|
|
|
**解决**：
|
|
|
|
|
|
- 确保 HTML 文件使用 UTF-8 编码
|
|
|
|
|
|
- 在 `<head>` 中添加 `<meta charset="UTF-8">`
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 如何导出高清图片？
|
|
|
|
|
|
|
|
|
|
|
|
**方法 1**：使用内置导出功能
|
|
|
|
|
|
- 点击 "导出" 按钮下载 SVG 格式
|
|
|
|
|
|
- SVG 是矢量图，可无损缩放
|
|
|
|
|
|
|
|
|
|
|
|
**方法 2**：使用浏览器截图
|
|
|
|
|
|
- 按 F12 打开开发者工具
|
|
|
|
|
|
- 右键点击 SVG 元素 → 复制 → 复制 outerHTML
|
|
|
|
|
|
- 使用在线 SVG 转图片工具转换
|
|
|
|
|
|
|
|
|
|
|
|
**方法 3**：使用打印功能
|
|
|
|
|
|
- Ctrl/Cmd + P 打开打印对话框
|
|
|
|
|
|
- 选择 "另存为 PDF"
|
|
|
|
|
|
|
|
|
|
|
|
## 📚 参考资源
|
|
|
|
|
|
|
|
|
|
|
|
### 官方文档
|
|
|
|
|
|
- [Mermaid 官方网站](https://mermaid.js.org/)
|
|
|
|
|
|
- [Mermaid 在线编辑器](https://mermaid.live/)
|
|
|
|
|
|
- [Flowchart 语法文档](https://mermaid.js.org/syntax/flowchart.html)
|
|
|
|
|
|
|
|
|
|
|
|
### 更多示例
|
|
|
|
|
|
- [Mermaid GitHub](https://github.com/mermaid-js/mermaid)
|
|
|
|
|
|
- [Mermaid Examples](https://mermaid.js.org/intro/examples.html)
|
|
|
|
|
|
|
|
|
|
|
|
## 📋 Mermaid 语法速查
|
|
|
|
|
|
|
|
|
|
|
|
### 基础流程图
|
|
|
|
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
|
|
graph LR
|
|
|
|
|
|
Start[开始] --> Process[处理]
|
|
|
|
|
|
Process --> End[结束]
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 带判断的流程
|
|
|
|
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
|
|
graph LR
|
|
|
|
|
|
A[输入] --> B{判断}
|
|
|
|
|
|
B -->|条件1| C[路径1]
|
|
|
|
|
|
B -->|条件2| D[路径2]
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 子图（分组）
|
|
|
|
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
|
|
graph LR
|
|
|
|
|
|
subgraph 子系统A
|
|
|
|
|
|
A1[模块1] --> A2[模块2]
|
|
|
|
|
|
end
|
|
|
|
|
|
subgraph 子系统B
|
|
|
|
|
|
B1[模块3] --> B2[模块4]
|
|
|
|
|
|
end
|
|
|
|
|
|
A2 --> B1
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 复杂样式
|
|
|
|
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
|
|
graph LR
|
|
|
|
|
|
A[节点A] --> B[节点B]
|
|
|
|
|
|
|
|
|
|
|
|
style A fill:#f9f,stroke:#333,stroke-width:4px
|
|
|
|
|
|
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 💡 最佳实践
|
|
|
|
|
|
|
|
|
|
|
|
1. **保持简洁**：单个流程图不要太复杂，必要时分解为多个图表
|
|
|
|
|
|
2. **统一风格**：同一页面使用统一的配色和样式
|
|
|
|
|
|
3. **添加说明**：为流程图添加文字说明，帮助理解
|
|
|
|
|
|
4. **测试验证**：在 [Mermaid Live Editor](https://mermaid.live/) 上先测试语法
|
|
|
|
|
|
5. **性能优化**：避免在一个页面渲染过多复杂图表
|
|
|
|
|
|
|
|
|
|
|
|
## 🔄 更新日志
|
|
|
|
|
|
|
|
|
|
|
|
### v1.0.0 (2024-01)
|
|
|
|
|
|
- ✅ 初始版本发布
|
|
|
|
|
|
- ✅ 实现 4 大模块流程图
|
|
|
|
|
|
- ✅ 支持水平排列（LR 方向）
|
|
|
|
|
|
- ✅ 支持 SVG 导出功能
|
|
|
|
|
|
- ✅ 响应式设计
|
|
|
|
|
|
|
|
|
|
|
|
## 📞 技术支持
|
|
|
|
|
|
|
|
|
|
|
|
如有问题或建议，请联系项目开发团队。
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
**文档版本**：v1.0.0
|
|
|
|
|
|
**最后更新**：2024年1月
|
|
|
|
|
|
**维护者**：项目开发团队
|
|
|
|
|
|
|
