Saltar al contenido

Dashboard de Workflows con Mermaid.js

Genera un dashboard interactivo de workflows de n8n o visualiza un workflow específico como diagrama Mermaid.js, permitiendo una visión clara de la estructura y conexiones.

Repo Original 12 nodos 9 tipos conectado
Cargando workflow...

Nodos

ManualTrigger RespondToWebhook N8n Aggregate Switch Set Code StickyNote Webhook

Herramientas

n8n API Webhook Mermaid.js HTML/CSS/JS RSS Feed

Detalles

ID
2944
Nodos
12
Conex.
Sí
Tipos
9

Pertenece a:

IT & DevOps n8n-api webhook mermaid-js

¿Qué hace este workflow?

Este workflow de n8n te permite construir un dashboard dinámico para visualizar todos tus procesos automatizados o desglosar un workflow específico en un diagrama Mermaid.js. Con esta herramienta, podrás obtener una visión clara de cómo se conectan tus nodos, identificar cuellos de botella y mejorar la eficiencia operativa. Es ideal para equipos que gestionan múltiples automatizaciones y necesitan una manera rápida y efectiva de entender la lógica interna y las dependencias de sus sistemas. Facilita la documentación, la auditoría y la toma de decisiones estratégicas, ahorrando tiempo en el análisis manual y reduciendo la complejidad de la gestión de workflows.

¿Cómo funciona?

Este workflow usa 12 nodos conectados con 9 tipos diferentes: ManualTrigger, RespondToWebhook, N8n, Aggregate, Switch y 4 más. La estructura está totalmente conectada — listo para importar.

¿Para quién es?

Diseñado para equipos de IT & DevOps. Nivel intermedio — necesitas familiaridad con n8n. Alto valor de negocio: automatiza una tarea recurrente con impacto directo.

¿Lo quieres en tu empresa?

→

Lo implementamos por ti end-to-end: integración, deploy, mantenimiento y soporte. Consultoría B2B con Genai Sapiens.

Hablemos de tu proyecto

¿Quieres aprender a hacerlo?

→

Sprints de 30 días con companion IA + comunidad. Aprende n8n, automatización y agentes IA desde cero o nivel avanzado.

Ver formación Momentum

Workflows similares

Dashboard Interactivo para Estadísticas de Uso de n8n

avanzado ★ Alto

Automatiza la Creación de Workflows n8n por Webhook o API

intermedio

Identifica workflows n8n con conexiones erróneas tras bug de re-cableado

intermedio

Organiza tus Workflows n8n: Grafo de Dependencias y Auto-Etiquetado

avanzado ★ Alto

Auditor de Workflows n8n: Detecta Errores de Cableado Post-Actualización

intermedio ★ Alto

Dashboard n8n para Visualizar Workflows y Generar Diagramas Mermaid.js

intermedio ★ Alto

Panel de Control n8n para Monitorizar Estadísticas de Workflows

avanzado ★ Alto
\n \n\n\n
\n

n8n automation flowcharts with mermaid.js

\n
\n
\n \n
\n\n
\n

About

\n
\n\n
\n \"Eduard\"\n

Eduard

\n

More templates

\n

LinkedIn

\n
\n\n
\n
\n
\n \"How\n
\n
\n
🦅 Workflow Dashboard for n8n
\n

Get an overview of your n8n instance. This dashboard displays all workflows, nodes, and tags on a single page.

\n Grab the template!\n
\n
\n
\n\n
\n
\n\n \n\n \n\n \n\n"},"typeVersion":1.1},{"id":"7f964438-a211-40bf-a991-a93848607513","name":"Prepare workflow list","type":"n8n-nodes-base.set","position":[1800,360],"parameters":{"options":{},"assignments":{"assignments":[{"id":"1ce915da-7ee4-487c-9233-0b603d4a913b","name":"wf_data","type":"object","value":"={\n\"id\" :\"{{ $json.id }}\",\n\"name\":\"{{ $json.name }}\"\n}"}]}},"typeVersion":3.4},{"id":"d379a0b6-aaee-4f4d-91be-74d79c160bb8","name":"CONFIG","type":"n8n-nodes-base.set","position":[2300,360],"parameters":{"options":{},"assignments":{"assignments":[{"id":"07da029f-3de3-45cb-8d33-798fa1a3d529","name":"instance_url","type":"string","value":"={{$env[\"N8N_PROTOCOL\"]}}://{{$env[\"N8N_HOST\"]}}"},{"id":"f7dae7f3-e51b-4da3-ac8b-d198747679d2","name":"webhook_name","type":"string","value":"={{ $('Webhook').params.path}}"},{"id":"185e41a7-8b61-46e3-99ea-0b0a66982080","name":"webhook_path","type":"string","value":"={{$env[\"N8N_ENDPOINT_WEBHOOK\"] || \"webhook\"}}"}]},"includeOtherFields":true},"typeVersion":3.4},{"id":"bfc42a15-130c-4e81-9f89-c07b3bb56928","name":"Code","type":"n8n-nodes-base.code","position":[1800,560],"parameters":{"jsCode":"const workflow = $input.first().json;\n\n// Extract nodes from the workflow\nconst nodes = workflow.nodes || [];\n\n// Node types to exclude\nconst excludedNodeTypes = ['n8n-nodes-base.stickyNote'];\n\n// Define shapes and their corresponding brackets\n// https://mermaid.js.org/syntax/flowchart.html\nconst shapes = {\n 'rect': ['[', ']'],\n 'rhombus': ['{', '}'],\n 'circle': ['((', '))'],\n 'hexagon': ['{{', '}}'],\n 'subroutine': ['[[', ']]'],\n 'parallelogram': ['[\\/', '\\/]'],\n 'wait': ['(', ')']\n // Add more shapes here as needed\n};\n\n// Define special shapes for specific node types\nconst specialShapes = {\n 'n8n-nodes-base.if': 'rhombus',\n 'n8n-nodes-base.switch': 'rhombus',\n 'n8n-nodes-base.code': 'subroutine',\n 'n8n-nodes-base.executeWorkflow': 'subroutine',\n 'n8n-nodes-base.httpRequest':'parallelogram',\n 'n8n-nodes-base.wait':'wait'\n // List more special node types\n};\n\n// Function to get the shape for a node type\nfunction getNodeShape(nodeType) {\n return specialShapes[nodeType] || 'rect';\n}\n\n// Create a map of node names to their \"EL\" identifiers, disabled status, and shape\nconst nodeMap = {};\nlet nodeCounter = 1;\nnodes.forEach((node) => {\n if (!excludedNodeTypes.includes(node.type)) {\n const shape = getNodeShape(node.type);\n nodeMap[node.name] = {\n id: `EL${nodeCounter}`,\n disabled: node.disabled || false,\n shape: shape,\n brackets: shapes[shape] || shapes['rect'] // Default to rect if shape not found\n };\n nodeCounter++;\n }\n});\n\n// Function to convert special characters to HTML entities\nfunction convertToHTMLEntities(str) {\n return str.replaceAll('\"',\"'\").replace(/[^\\w\\s-]/g, function(char) {\n return '&#' + char.charCodeAt(0) + ';';\n });\n}\n\n// Function to format node text (with strike-through if disabled)\nfunction formatNodeText(nodeName, isDisabled) {\n const escapedName = convertToHTMLEntities(nodeName);\n return isDisabled ? `${escapedName}` : escapedName;\n}\n\n// Generate connections and isolated nodes\nconst connections = [];\nconst isolatedNodes = new Set(Object.keys(nodeMap));\n\nif (workflow.connections) {\n Object.entries(workflow.connections).forEach(([sourceName, targetConnections]) => {\n Object.entries(targetConnections).forEach(([connectionType, targets]) => {\n targets.forEach(targetArray => {\n targetArray.forEach(target => {\n const sourceNode = nodeMap[sourceName];\n const targetNode = nodeMap[target.node];\n if (sourceNode && targetNode) {\n let connectionLine = ` ${sourceNode.id}${sourceNode.brackets[0]}${formatNodeText(sourceName, sourceNode.disabled)}${sourceNode.brackets[1]}`;\n if (connectionType === 'main') {\n connectionLine += ` -->`;\n } else {\n connectionLine += ` -.- |${connectionType}|`;\n }\n connectionLine += ` ${targetNode.id}${targetNode.brackets[0]}${formatNodeText(target.node, targetNode.disabled)}${targetNode.brackets[1]}`;\n connections.push(connectionLine);\n isolatedNodes.delete(sourceName);\n isolatedNodes.delete(target.node);\n }\n });\n });\n });\n });\n}\n\n// Add isolated nodes to the connections array\nisolatedNodes.forEach(nodeName => {\n const node = nodeMap[nodeName];\n connections.push(` ${node.id}${node.brackets[0]}${formatNodeText(nodeName, node.disabled)}${node.brackets[1]}`);\n});\n\n// Generate the Mermaid flowchart string\nconst mermaidChart = `\n---\nconfig:\n look: neo\n theme: default\n---\nflowchart LR\n${connections.join('\\n')}`;\n\n// Output the result\nreturn {\n json: {\n mermaidChart: mermaidChart\n }\n};"},"typeVersion":2},{"id":"28375139-c433-4c6c-a5ac-3d725c9b79ef","name":"Sticky Note3","type":"n8n-nodes-base.stickyNote","position":[2120,100],"parameters":{"color":3,"width":470.91551628883894,"height":419.34820384538847,"content":"## IMPORTANT NOTE FOR CLOUD USERS\n### Since the cloud version doesn't support environmental variables, please update the following fields:\n\n1. **instance_url**. Change the `{{$env[\"N8N_PROTOCOL\"]}}://{{$env[\"N8N_HOST\"]}}` expression to your cloud instance URL\n2. **webhook_path**. Change the `{{$env[\"N8N_ENDPOINT_WEBHOOK\"] || \"webhook\"}}` simply to the `webhook`. So that the production webhook is called correclty."},"typeVersion":1},{"id":"63245902-69d7-4d75-8cb3-58198208220a","name":"Webhook","type":"n8n-nodes-base.webhook","position":[1220,360],"webhookId":"dd9e2c5d-6c48-428e-aa54-bef9e369d3b0","parameters":{"path":"dd9e2c5d-6c48-428e-aa54-bef9e369d3b0","options":{},"responseMode":"responseNode"},"typeVersion":2}],"active":true,"pinData":{},"settings":{"callerPolicy":"workflowsFromSameOwner","executionOrder":"v1","saveManualExecutions":true,"saveDataSuccessExecution":"all"},"versionId":"e73fe710-a873-4827-9a3f-2740b5479d62","connections":{"Code":{"main":[[{"node":"Respond with Mermaid","type":"main","index":0}]]},"CONFIG":{"main":[[{"node":"Send Page","type":"main","index":0}]]},"Switch":{"main":[[{"node":"List workflows","type":"main","index":0}],[{"node":"Single workflow","type":"main","index":0}]]},"Webhook":{"main":[[{"node":"Switch","type":"main","index":0}]]},"Aggregate":{"main":[[{"node":"CONFIG","type":"main","index":0}]]},"List workflows":{"main":[[{"node":"Prepare workflow list","type":"main","index":0}]]},"Single workflow":{"main":[[{"node":"Code","type":"main","index":0}]]},"Prepare workflow list":{"main":[[{"node":"Aggregate","type":"main","index":0}]]},"When clicking ‘Test workflow’":{"main":[[{"node":"Switch","type":"main","index":0}]]}}}