Workflow dashboard with mermaid.js

工作流名称

Workflow dashboard with mermaid.js

主要功能和亮点

该工作流通过集成 Mermaid.js，动态生成并展示 n8n 自动化工作流的可视化流程图。用户可以一键查看所有工作流的结构与节点，支持通过网页界面交互式展开和隐藏具体工作流图示，极大提升了工作流管理的直观性和便利性。

解决的核心问题

传统的工作流管理界面往往只显示列表或文字描述，难以直观理解复杂工作流的节点关系和逻辑。此工作流以图表形式清晰呈现工作流全貌，帮助用户快速掌握流程结构，便于调试、优化和维护。

应用场景

• n8n 实例管理者需要对大量自动化流程进行整体监控和分析。
• 自动化开发者希望快速理解和展示工作流设计。
• 团队协作时直观共享工作流设计思路。
• 需要在网页端展示和交互式浏览工作流结构。

主要流程步骤

1. 通过 Webhook 触发工作流请求。
2. 使用 Switch 节点判断请求参数，决定是加载工作流列表还是单个工作流详情。
3. 调用 n8n API 获取所有或指定工作流数据。
4. 使用 Set 和 Aggregate 节点整理并汇总工作流信息。
5. 通过自定义 Code 节点，解析工作流节点和连接关系，生成符合 Mermaid.js 语法的流程图描述代码。
6. RespondToWebhook 节点返回 Mermaid.js 代码或完整的 HTML 页面，实现流程图的动态展示。
7. 前端页面通过 Mermaid.js 渲染工作流图形，支持用户点击按钮展开或隐藏具体工作流图示。

涉及的系统或服务

• n8n 自身 API：用于获取工作流列表和详情。
• Webhook：作为外部触发入口。
• Mermaid.js：用于生成和渲染流程图。
• Bootstrap：用于前端页面样式布局。

适用人群或使用价值

• n8n 平台管理员和自动化工程师，提升对大量工作流的管理效率。
• 自动化流程设计人员，方便进行流程展示与讲解。
• 团队协作成员，助力共享流程逻辑和设计思路。
• 希望通过可视化手段优化和监控自动化流程的企业和技术团队。

此工作流为 n8n 用户提供了“一览无遗”的工作流仪表盘体验，使复杂的自动化流程一目了然，极大提升了工作流管理的透明度与操作便捷性。