# 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
```
### 步骤 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 编码
- 在 `` 中添加 ``
### 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月
**维护者**：项目开发团队