n8n Workflow Visualizer

{ "edges": [], "nodes": [ { "id": "c1f74b3a-2ae6-4491-ac02-e1e0fd188664", "name": "When clicking ‘Test workflow’", "type": "manualTrigger", "params": {}, "position": [ 1220, 560 ] }, { "id": "2aef0899-91bb-4141-9ec1-def1c31806ae", "name": "Respond with Mermaid", "type": "passthrough", "params": { "mode": "noOp", "options": { "responseHeaders": { "entries": [ { "name": "Content-Type", "value": "text/plain" } ] } }, "respondWith": "text", "responseBody": "={{ $json.mermaidChart }}" }, "position": [ 2640, 560 ] }, { "id": "2c60a2e2-9f35-45dc-94d1-daf75314e934", "name": "List workflows", "type": "passthrough", "params": { "mode": "noOp", "filters": {}, "requestOptions": {} }, "position": [ 1620, 360 ] }, { "id": "ce4e49b9-e1ab-44d1-9490-5c685c9023d9", "name": "Aggregate", "type": "passthrough", "params": { "mode": "aggregate", "options": {}, "fieldsToAggregate": { "fieldToAggregate": [ { "fieldToAggregate": "wf_data" } ] } }, "position": [ 1980, 360 ] }, { "id": "bc48416a-01ff-45f4-9bf2-9f4a39054b54", "name": "Single workflow", "type": "passthrough", "params": { "mode": "noOp", "operation": "get", "workflowId": { "__rl": true, "mode": "id", "value": "={{ $json.query.wfid }}" }, "requestOptions": {} }, "position": [ 1620, 560 ] }, { "id": "85f28981-544b-4510-b1ee-d4d538455074", "name": "Switch", "type": "switch", "params": { "rules": { "values": [ { "outputKey": "YOUR_CREDENTIAL_HERE", "conditions": { "options": { "leftValue": "", "caseSensitive": true, "typeValidation": "loose" }, "combinator": "and", "conditions": [ { "operator": { "type": "array", "operation": "empty", "singleValue": true }, "leftValue": "={{ Object.keys($json?.query)}}", "rightValue": "wfid" } ] }, "renameOutput": true }, { "outputKey": "YOUR_CREDENTIAL_HERE", "conditions": { "options": { "leftValue": "", "caseSensitive": true, "typeValidation": "loose" }, "combinator": "and", "conditions": [ { "id": "a4c4c624-2ff5-4fc0-9bdb-802412a5d92f", "operator": { "type": "string", "operation": "contains" }, "leftValue": "={{ Object.keys($json.query).join(',') }}", "rightValue": "wfid" } ] }, "renameOutput": true } ] }, "options": { "looseTypeValidation": true } }, "position": [ 1420, 460 ] }, { "id": "95e0b67b-5e5b-4433-9822-da86900c12ca", "name": "Send Page", "type": "passthrough", "params": { "mode": "noOp", "options": {}, "respondWith": "text", "responseBody": "=\n\n\n \n \n n8n Workflow Visualizer\n \n \n \n\n\n

n8n automation flowcharts with mermaid.js

\n \n

\n\n

About

\n\n

\n $\"Eduard\"$ \n

Eduard

More templates

\n\n

\n $\"How$ \n

🦅 Workflow Dashboard for n8n

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" }, "position": [ 2640, 360 ] }, { "id": "7f964438-a211-40bf-a991-a93848607513", "name": "Prepare workflow list", "type": "set", "params": { "options": {}, "assignments": { "assignments": [ { "id": "1ce915da-7ee4-487c-9233-0b603d4a913b", "name": "wf_data", "type": "object", "value": "={\n\"id\" :\"{{ $json.id }}\",\n\"name\":\"{{ $json.name }}\"\n}" } ] } }, "position": [ 1800, 360 ] }, { "id": "d379a0b6-aaee-4f4d-91be-74d79c160bb8", "name": "CONFIG", "type": "set", "params": { "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 }, "position": [ 2300, 360 ] }, { "id": "bfc42a15-130c-4e81-9f89-c07b3bb56928", "name": "Code", "type": "code", "params": { "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// {{ $env.WEBHOOK_URL }}\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};" }, "position": [ 1800, 560 ] }, { "id": "63245902-69d7-4d75-8cb3-58198208220a", "name": "Webhook", "type": "trigger", "params": { "kind": "n8n-nodes-base.webhook", "path": "dd9e2c5d-6c48-428e-aa54-bef9e369d3b0", "options": {}, "responseMode": "responseNode" }, "position": [ 1220, 360 ] } ] }

Visual Workflow Dashboard with Mermaid.js