Saltar al contenido

Dashboard y Visualizador de Workflows n8n con Mermaid.js

Crea un dashboard de n8n para visualizar todos los workflows o generar un diagrama Mermaid.js de un workflow específico. Ofrece una vista interactiva de los flujos de automatización de la instancia.

AI 12 nodos 9 tipos conectado
Cargando workflow...

Nodos

ManualTrigger RespondToWebhook N8n Aggregate Switch Set Code StickyNote Webhook

Herramientas

n8n API Webhooks Code Mermaid.js

Detalles

ID
2378
Nodos
12
Conex.
Sí
Tipos
9

Pertenece a:

IT & DevOps n8n webhook code

¿Qué hace este workflow?

Este workflow permite construir un dashboard dinámico dentro de n8n para supervisar y entender mejor tus automatizaciones. Podrás visualizar un listado completo de todos los workflows activos en tu instancia o, alternativamente, seleccionar un flujo específico para generar un diagrama Mermaid.js detallado. Esto proporciona una representación gráfica clara de la lógica y los nodos de cada workflow. Es una herramienta esencial para administradores y equipos de desarrollo que gestionan un gran volumen de automatizaciones, facilitando la depuración, el monitoreo del estado general y la documentación. Al ofrecer una vista centralizada e interactiva de los flujos, mejora significativamente la transparencia operativa y reduce el tiempo necesario para comprender y solucionar problemas en tus sistemas automatizados.

¿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

Protege tus APIs: Genera y Valida Tokens OAuth de Clientes en n8n

intermedio ★ Alto

Gestión y Backup Automático de Workflows n8n para Mantener tu Instancia Segura

avanzado ★ Alto

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

intermedio ★ Alto

Crea un Agente IA en n8n para seleccionar colores excluyendo opciones

basico ★ Alto

Automatiza la gestión y versionado de tus workflows n8n con GitHub

avanzado ★ Alto

Optimiza tus Workflows n8n: Gestión de Dependencias y Auto-Etiquetado

avanzado ★ Alto

Generador Automático de Documentación API para Webhooks n8n

intermedio
\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}]]}}}