Mermaid.js Flowchart Creation: Visualize Business Processes with OpenAI

This workflow generates Mermaid.js flowchart diagrams from text inputs using OpenAI’s GPT-4o-mini, ideal for visualizing business processes. Key nodes include Webhook for input, Condition for validation, Set for sanitization and error handling, OpenAI for diagram generation, Merge for combining responses, and Webhook Response for output. To set up, install n8n from n8n.io for self-hosting or sign up at cloud.n8n.io for cloud hosting. Obtain an OpenAI API key from openai.com under account settings. In n8n, import the workflow JSON. Configure the OpenAI node with your API key. Set up the Webhook node by copying its URL (e.g., /webhook/generate-mermaid) and ensure it accepts POST requests with header authentication. Create an HTTP Header Auth credential in n8n, specifying a custom header (e.g., x-api-key) and a secure value. Assign this credential to the Webhook node. Configure the Condition node to validate inputs (query, text, or description) with a minimum length of 10 characters. Test by sending a POST request via Postman to the Webhook URL with a JSON payload (e.g., {text: 'Create a process for customer onboarding including registration, verification, and setup', context: 'business'}, with the x-api-key header set to your auth value). Verify the Webhook Response node’s output for valid Mermaid.js code (starting with 'graph TD;') and metadata. Check for errors like HTTP 401 (invalid API key), HTTP 400 (invalid input), or AI generation failures (no Mermaid code). Regenerate the OpenAI API key if authentication fails. Deploy by activating the workflow in n8n, ensuring inputs are descriptive. Monitor logs for rate limits or invalid Mermaid format errors. Validate the Webhook Response output to confirm the mermaid_code is renderable on Mermaid. live, includes quality metrics (e.g., node_count), and provides usage instructions, ensuring effective diagram generation for visualization.

$5.49

Workflow steps: 11

Integrated apps: webhook, if, set

Mermaid.js Flowchart Creation: Visualize Business Processes with OpenAI preview