Workflow Dashboard with Mermaid.js
This workflow dynamically generates and displays a visual flowchart of automated workflows by integrating Mermaid.js. Users can view the workflow structure and nodes with a single click, supporting interactive expansion and hiding of specific illustrations on the web interface, significantly enhancing the intuitiveness and convenience of workflow management. It addresses the issue of traditional management interfaces being difficult to understand due to complex node relationships, helping users quickly grasp the process structure, facilitating debugging and optimization, and achieving efficient workflow monitoring and analysis.
Workflow Name
Workflow Dashboard with Mermaid.js
Key Features and Highlights
This workflow integrates Mermaid.js to dynamically generate and display visual flowcharts of n8n automation workflows. Users can view the structure and nodes of all workflows with a single click, and interactively expand or collapse specific workflow diagrams through a web interface. This significantly enhances the intuitiveness and convenience of workflow management.
Core Problems Addressed
Traditional workflow management interfaces typically display only lists or textual descriptions, making it difficult to intuitively understand the relationships and logic of complex workflow nodes. This workflow presents a clear, chart-based overview of the entire workflow, helping users quickly grasp the process structure, which facilitates debugging, optimization, and maintenance.
Use Cases
- n8n instance administrators needing comprehensive monitoring and analysis of numerous automation workflows.
- Automation developers seeking to quickly understand and showcase workflow designs.
- Teams collaborating and sharing workflow design ideas in an intuitive manner.
- Scenarios requiring web-based display and interactive browsing of workflow structures.
Main Process Steps
- Trigger the workflow request via Webhook.
- Use a Switch node to evaluate request parameters and determine whether to load the workflow list or details of a single workflow.
- Call the n8n API to retrieve data for all workflows or a specified workflow.
- Use Set and Aggregate nodes to organize and summarize workflow information.
- Utilize a custom Code node to parse workflow nodes and connections, generating flowchart description code compliant with Mermaid.js syntax.
- RespondToWebhook node returns the Mermaid.js code or a complete HTML page to enable dynamic flowchart display.
- The frontend page renders the workflow diagrams using Mermaid.js, supporting user interactions such as expanding or collapsing specific workflow charts via buttons.
Involved Systems or Services
- n8n API: for fetching workflow lists and details.
- Webhook: serving as the external trigger entry point.
- Mermaid.js: for generating and rendering flowcharts.
- Bootstrap: for frontend page styling and layout.
Target Users and Value
- n8n platform administrators and automation engineers, improving management efficiency of numerous workflows.
- Automation process designers, facilitating workflow presentation and explanation.
- Team members collaborating to share process logic and design concepts.
- Enterprises and technical teams aiming to optimize and monitor automation processes through visualization.
This workflow provides n8n users with a comprehensive workflow dashboard experience, making complex automation processes clearly visible at a glance and greatly enhancing workflow management transparency and operational convenience.