wangyifang
/
cz-hjjc-budget
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
cz-hjjc-budget/ui/pages/README-Flowcharts.md

7.0 KiB
Raw Permalink Blame History Escape

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 配置

mermaid.initialize({ 
    startOnLoad: true,
    theme: 'default',
    flowchart: {
        curve: 'basis',        // 曲线类型
        padding: 20,           // 内边距
        nodeSpacing: 50,       // 节点间距
        rankSpacing: 80,       // 层级间距
        diagramPadding: 20,    // 图表边距
        useMaxWidth: true      // 响应式宽度
    }
});

📝 添加新流程图

步骤 1：选择标签页

在 flowcharts.html 中找到对应的标签页内容区域，或创建新的标签页。

步骤 2：添加图表容器

<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 语法

基础语法示例：

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 定义：

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 语法速查

基础流程图

graph LR
    Start[开始] --> Process[处理]
    Process --> End[结束]

带判断的流程

graph LR
    A[输入] --> B{判断}
    B -->|条件1| C[路径1]
    B -->|条件2| D[路径2]

子图（分组）

graph LR
    subgraph 子系统A
        A1[模块1] --> A2[模块2]
    end
    subgraph 子系统B
        B1[模块3] --> B2[模块4]
    end
    A2 --> B1

复杂样式

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 上先测试语法
  5. 性能优化：避免在一个页面渲染过多复杂图表

🔄 更新日志

v1.0.0 (2024-01)

  • ✅ 初始版本发布
  • ✅ 实现 4 大模块流程图
  • ✅ 支持水平排列（LR 方向）
  • ✅ 支持 SVG 导出功能
  • ✅ 响应式设计

📞 技术支持

如有问题或建议，请联系项目开发团队。

文档版本：v1.0.0
最后更新：2024年1月
维护者：项目开发团队