Visualize Your Workflows with AI

Build a chatbot that turns plain-English descriptions into flowchart images.

Introduction

30 Second Summary

Think about the last time you tried to explain a process to someone. A simple flowchart would have made everything click, but who has time to draw one from scratch?

In this project, you will build an AI-powered chatbot that turns plain-English workflow descriptions into visual flowchart diagrams. You will connect OpenAI's GPT-4o mini to n8n's visual automation canvas, creating a tool that generates shareable diagram images from your words.

What You'll Build

Describe any workflow in plain English, hit send, and watch a clean flowchart image appear right in the chat window, ready to share with anyone.

By the end of this project, you'll have:

  • A chat interface where you describe any process in plain English and get back a rendered flowchart image right in the conversation.
  • A visual automation pipeline on n8n's drag-and-drop canvas, where you can click any node and watch your data transform step by step.
  • Shareable diagram URLs you can drop into docs, Slack, or anywhere that accepts images.
  • Secret Mission: Add conversation memory so you can refine diagrams through back-and-forth chat.

Do I need to pay for anything?

This project uses n8n Cloud's free 14-day trial (no credit card required) and OpenAI's API, which requires a minimum $5 credit purchase. At GPT-4o mini's pricing, that $5 will last you thousands of requests.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters.

You're about to build a chatbot that turns plain-English workflow descriptions into visual flowchart diagrams, all inside a visual automation canvas. Taking a moment to commit to that goal makes the hands-on steps ahead feel purposeful.

Set Up n8n Cloud and OpenAI

To build a chatbot that turns plain-English descriptions into visual diagrams, you need two things working together. A visual automation platform to wire up the pipeline, and an AI model that can understand your words and produce structured output.

In this step, you will create accounts on n8n Cloud and OpenAI, then link them so your workflows can send prompts to GPT and get responses back.

In this step, get ready to:
  • Sign up for an n8n Cloud free trial account.
  • Create an OpenAI API key and purchase API credits.
  • Save your OpenAI API key as a credential inside n8n.
Sign up for n8n Cloud

n8n Cloud is a hosted automation platform where you build workflows by dragging and dropping nodes on a visual canvas. The free trial gives you everything you need for this project.

  • Open https://n8n.io/cloud/ in your browser.
  • Click Start free trial on the pricing page.
  • Fill in your name, email, and a password on the registration form.
  • Click the button to start your trial. n8n may send you a confirmation email. If it does, check your inbox and click the verification link.
  • Once your workspace is ready, you should see the n8n workflow canvas in your browser.

What is n8n Cloud?

n8n is a workflow automation platform. You build automations by connecting nodes on a visual canvas, with data flowing along the lines between them. Think of each node as a step in your pipeline.

n8n Cloud hosts everything for you so there is no software to install. The free trial runs for 14 days and includes all Pro features with no credit card required.

Signup button not working?

Some browser extensions and VPNs can block the captcha widget on the signup page. Try opening the registration page in an incognito window with extensions disabled. If the issue persists, try a different browser or device.

If you do not receive a confirmation email, check your spam or promotions folder. Delivery can occasionally take a few minutes.

Help me troubleshoot n8n Cloud signup issues.

Create an OpenAI API key

OpenAI provides the AI model that will understand your workflow descriptions and generate diagram code. You need an account, some prepaid API credits, and an API key.

  • Open https://platform.openai.com in your browser.
  • Click Sign up to create a new account, or Log in if you already have one.
  • Navigate to the billing settings in your account dashboard.
  • Add a payment method and purchase at least $5 in prepaid API credits. The default purchase amount is $10, but you can change it to $5.

How much will this cost?

This project uses GPT-4o mini, which costs $0.15 per million input tokens and $0.60 per million output tokens. Each diagram request uses a tiny number of tokens. Your $5 in credits will last you thousands of requests for this project.

Unused credits remain in your OpenAI account for up to 1 year.

  • Open the API keys page in the OpenAI dashboard. You can navigate there directly at https://platform.openai.com/api-keys.
  • Click + Create new secret key.
  • Enter n8n-workflow-viz as the name for your key.
  • Leave the permissions at the default (All) and click Create secret key.
  • Copy the key immediately and save it somewhere safe, like a text file on your computer. OpenAI only shows the full key once. If you lose it, you will need to create a new one.

Can't find the API keys page?

The OpenAI dashboard layout can vary depending on whether you have an organization set up. Look for API keys in the left sidebar or navigation menu. You can also go directly to platform.openai.com/api-keys.

Help me find the API keys page in the OpenAI dashboard.

Save your OpenAI credential in n8n

Now you will connect your OpenAI account to n8n so that any workflow node can use your API key without you pasting it each time.

  • Switch back to your n8n Cloud workspace in your browser.
  • Click the Create button in the upper-left corner of the side menu.
  • Select Credential.
  • Search for OpenAI in the list of apps and select it.
  • Paste your API key into the API Key field.
  • Leave the Organization ID field blank (you only need this if you belong to multiple OpenAI organizations).
  • Click Save. n8n automatically tests the credential to confirm it works.

What does saving a credential do?

n8n stores your API key securely so any workflow node that needs OpenAI access can use it. You set it up once here, and every OpenAI-related node in your workflows can reference this credential without you pasting the key again.

When you click Save, n8n runs a quick test call to confirm your key is valid. If the test passes, your credential is ready.

After saving, you should see a success message confirming that your OpenAI credential is connected and working.

Credential test failed?

Double-check that you pasted the full API key with no extra spaces before or after it. If you lost your key, go back to the OpenAI API keys page, create a new secret key, and paste the new one.

Make sure your OpenAI account has at least $5 in prepaid credits. Without credits, API calls will fail even with a valid key.

Help me fix my OpenAI credential connection in n8n.

Your tools are connected and ready to go. Next up, you will build your first chat-to-AI pipeline on the n8n canvas and watch GPT respond to your messages in real time.

Build Your First Chat-to-AI Pipeline

Your accounts are set up and your OpenAI credential is saved inside n8n. Now it is time to build something with them.

Before you can generate diagrams, you need the basic pipeline working: a chat interface where you type a message and GPT responds. This is the baby version of your end product that proves the core connection between n8n and OpenAI works.

In this step, get ready to:
  • Create a new workflow and add a Chat Trigger node to the canvas.
  • Connect an AI Agent node to GPT-4o mini using your OpenAI credential.
  • Test the pipeline by chatting with GPT in the built-in chat window.
Create a new workflow and add the Chat Trigger node

Every n8n automation starts with a trigger node that decides what kicks off your workflow. For a chatbot, you need a Chat Trigger node. It gives you a built-in chat interface right inside n8n for testing.

  • In your n8n workspace, click Add workflow to create a fresh workflow.
  • On the empty canvas, click Add first step. The nodes panel opens.
  • Search for Chat Trigger and select it.
  • n8n adds the Chat Trigger node to your canvas and opens its settings. Leave all the default settings as they are.
  • Close the node settings panel to return to the canvas.

What is a Chat Trigger?

The Chat Trigger node creates a built-in chat interface inside n8n for testing your workflow. When you type a message in the chat, the Chat Trigger captures it and passes it downstream to the next node in the pipeline.

You should see a single Chat Trigger node sitting on your canvas. That is your workflow's entry point.

Add an AI Agent node and connect it to GPT-4o mini

The Chat Trigger captures your message, but it needs somewhere to send it. An AI Agent node takes the message and passes it to a language model for a response.

  • Click the Add node connector on the right side of the Chat Trigger node. The nodes panel opens.
  • Search for AI Agent and select it. n8n adds the AI Agent to the canvas and automatically connects it to the Chat Trigger.

The AI Agent now needs a language model to power it. You will connect it to GPT-4o mini using your saved OpenAI credential.

  • With the AI Agent node open, click the + Chat Model button at the bottom of the settings panel.
  • Search for OpenAI Chat Model and select it. n8n adds it as a sub-node attached to the AI Agent.
  • In the OpenAI Chat Model settings, select your saved OpenAI credential from the Credential to connect with dropdown.
  • In the Model dropdown, select gpt-4o-mini.
  • Close the OpenAI Chat Model settings to return to the canvas.

What is a sub-node?

In n8n, a sub-node extends the functionality of a parent node. The OpenAI Chat Model sub-node gives the AI Agent access to a specific language model. You will see it visually attached underneath the AI Agent on the canvas.

Your canvas should now show two connected nodes: Chat Trigger on the left and AI Agent on the right, with the OpenAI Chat Model sub-node attached below the AI Agent.

Don't see the OpenAI Chat Model option?

Make sure you are clicking the + Chat Model connector on the AI Agent node, not the Add node connector on its right side. The Chat Model connector appears at the bottom of the AI Agent settings panel.

If your OpenAI credential does not appear in the dropdown, return to the Credentials section in the left sidebar to verify it was saved correctly.

Help me connect my OpenAI Chat Model to the AI Agent node.

Test the chat

The pipeline is wired up. Time to see if GPT-4o mini actually responds to your messages.

Before you send a message, what do you think will happen? Will GPT respond conversationally, or will you see raw data?

  • Click Chat at the bottom of the n8n canvas to open the built-in chat panel.
  • Type Hello, what can you do? and press Enter to send it.

GPT-4o mini responds conversationally in the chat window. You should see a friendly reply describing its capabilities.

  • Click on the AI Agent node on the canvas after the chat to inspect the exact input and output data that flowed through it.

What should I see?

The AI Agent node's output panel shows the raw data that moved through the pipeline. You will see your original message as the input and GPT-4o mini's conversational response as the output.

This is how n8n lets you inspect every step of your workflow. You can click any node to see exactly what data it received and what it sent downstream.

Not seeing a response in the chat?

Check that the Chat Trigger node is connected to the AI Agent node with a visible line between them on the canvas. A missing connection means the message has nowhere to go.

If you see an error mentioning a missing Chat Model, open the AI Agent node and verify the OpenAI Chat Model sub-node is attached with gpt-4o-mini selected.

Help me fix my Chat Trigger and AI Agent connection.

Your chat-to-AI pipeline is live. You type a message, GPT responds. Next up, you will teach GPT to stop chatting and start generating visual diagram code instead.

Teach GPT to Speak in Diagrams

In the last step, you got GPT-4o mini talking back to you in the n8n chat panel. That proves the connection between your Chat Trigger, AI Agent, and OpenAI is working.

There is a problem, though. If you describe a workflow right now, GPT will just describe it back to you in words. You need it to speak a completely different language: Mermaid, a text-based syntax that turns simple code into visual flowcharts. In this step, you will engineer the prompt so GPT outputs structured Mermaid code instead of plain English.

In this step, get ready to:
  • Add a system message that transforms GPT into a Mermaid diagram generator.
  • Test the updated prompt with a real workflow description.
  • Verify that the generated Mermaid code renders as a valid flowchart.
Add a system message to the AI Agent

A system message is a set of instructions sent to GPT before any conversation starts. It defines GPT's role, what it can and cannot do, and how it should format its responses.

  • Click the AI Agent node on your canvas to open its settings.
  • Scroll down to the Options section at the bottom of the node panel.
  • Click Add Option and select System Message.
  • Paste the following prompt into the System Message field:
You are a workflow visualization assistant. Your ONLY job is to convert workflow descriptions into Mermaid flowchart diagrams.

Rules:
- Always use flowchart TD (top-down) layout
- Output ONLY the Mermaid code with no other text
- Do NOT wrap the code in markdown code fences
- Use --> for connections between nodes
- Use [text] for process nodes
- Use {text} for decision nodes

Example:
flowchart TD
    A[Wake Up] --> B{Raining?}
    B -->|Yes| C[Stay Inside]
    B -->|No| D[Go for a Walk]

What does this system message do?

The first line defines GPT's role as a visualization assistant. This focuses its behavior on one task instead of being a general chatbot.

The rules section is the critical part. It tells GPT to respond with ONLY Mermaid code, no explanations, no markdown formatting. The example at the bottom shows GPT exactly what valid output looks like, using flowchart TD for top-down layout, --> for arrows, and curly braces for decision nodes.

What is Mermaid?

Mermaid is a text-based diagramming language. You write simple code like A --> B and tools render it as a visual flowchart with boxes and arrows. It is widely used in documentation, GitHub READMEs, and developer tools.

Test with a workflow description

Before you test, think about what you expect to see now. Will GPT respond with regular English like before, or something different?

  • Click Chat at the bottom of the n8n canvas to open the chat panel.
  • Type the following message and press Enter:
Every morning I check email, sort messages into urgent and not urgent, reply to urgent ones immediately, and save the rest for later.

GPT should respond with clean Mermaid syntax starting with flowchart TD, followed by node definitions and arrow connections. No English explanation, no markdown code fences.

GPT still responding with regular English?

If GPT adds explanatory text around the Mermaid code, go back to the AI Agent node and make the system message more explicit. Add a line like "Respond with ONLY the Mermaid code, no explanations, no markdown code fences" to the rules section.

If the chat shows an error instead of a response, check that your OpenAI credential is still connected by clicking the OpenAI Chat Model sub-node and verifying the credential is selected.

Why is GPT ignoring my system message and responding in plain English?

Verify the Mermaid output is valid

Getting Mermaid-looking text back from GPT is encouraging, but you need to confirm it is actually valid syntax that renders into a diagram.

  • Select and copy the entire Mermaid code from the chat response.
  • Open a new browser tab and go to https://mermaid.live.
  • Clear any sample code in the left Code panel.
  • Paste the Mermaid code from your chat response into the Code panel.

The diagram renders in real time on the right side of the editor. You should see a flowchart with boxes and arrows representing the email workflow you described.

What does a working Mermaid diagram look like?

A valid flowchart shows rectangular boxes for process steps (like "Check Email") connected by arrows. Decision points appear as diamond shapes (like "Urgent?") with labeled branches going to different outcomes.

If the right panel shows a rendered diagram instead of an error message, your prompt engineering is working. GPT is producing structurally valid Mermaid code.

Diagram not rendering in the Live Editor?

If the right panel shows an error, GPT likely produced a syntax mistake. Common issues include missing arrow syntax (--> is required, not ->) or labels with special characters that need to be wrapped in quotes.

Go back to the n8n chat, send the same workflow description again, and paste the new output into the Live Editor. GPT output varies slightly each time, so a second attempt often fixes minor syntax issues.

Help me fix Mermaid syntax errors in GPT's output.

Your AI Agent now speaks fluent Mermaid. Next up, you will turn that raw diagram code into an actual visual image that appears right in the chat window.

Turn Code into a Visual Diagram

Your AI Agent now speaks fluent Mermaid. Describe any workflow and GPT returns structured diagram code. The problem is that Mermaid code is still just text sitting in a chat bubble.

The whole point of this project is to see a visual diagram right in the chat window. In this step, you will add two new nodes that take the Mermaid text, encode it into a mermaid.ink image URL, and send the rendered flowchart image back to the chat.

In this step, get ready to:
  • Switch the Chat Trigger response mode so you control what gets sent back to the chat.
  • Add a Code node that converts Mermaid code into a clickable image URL.
  • Add a Respond to Webhook node to send the image back to the chat.
Switch the Chat Trigger response mode

By default, the Chat Trigger sends the AI Agent's raw output straight to the chat. That worked great for testing, but now you need to insert a transformation step before the response reaches the user.

  • Click the Chat Trigger node on your canvas to open its settings.
  • Find the Response Mode dropdown.
  • Change it from the default to Using Response Nodes.
  • Close the Chat Trigger settings panel.

What does this change?

The default response mode automatically sends whatever the last connected node outputs. By switching to Using Response Nodes, you tell n8n to wait for a dedicated response node further downstream.

This gives you space to transform the AI Agent's raw Mermaid code into an image before sending it back to the chat.

Add a Code node to build the image URL

The AI Agent outputs raw Mermaid text. You need a node that takes that text, encodes it, and constructs a URL that mermaid.ink can render as a PNG image.

  • Click the + button on the right side of the AI Agent node to add a new node after it.
  • Search for Code and select the Code node.
  • Make sure the Language is set to JavaScript.

Your canvas now shows three nodes in a chain: Chat Trigger, AI Agent, and Code. You can see the data flow from left to right.

  • Delete any placeholder code in the Code node editor and paste the following code:
// Get the Mermaid code from the AI Agent's response
const mermaidCode = $input.first().json.output;

// Base64-encode the Mermaid code
const base64 = mermaidCode.base64Encode()
  .replace(/\+/g, '-')
  .replace(/\//g, '_')
  .replace(/=+$/g, '');

// Build the mermaid.ink image URL
const imageUrl = `https://mermaid.ink/img/${base64}?type=png&bgColor=!white`;

// Return a Markdown image tag so the chat renders it visually
return [{
  json: {
    text: `![Workflow Diagram](${imageUrl})`
  }
}];

What does this code do?

  • $input.first().json.output grabs the Mermaid code that the AI Agent generated. The AI Agent stores its response in the output property.
  • .base64Encode() is n8n's built-in string method that converts the Mermaid text into a base64 string.
  • The three .replace() calls make the base64 URL-safe by swapping + for -, / for _, and removing trailing = signs. Without this, slashes in the base64 string would break the URL.
  • The return statement wraps the image URL in a Markdown image tag. The text key is what the Chat Trigger reads and sends back to the chat window.

Seeing a syntax error in the Code node?

Make sure you deleted all of the placeholder code before pasting. Leftover lines above or below your pasted code will cause syntax errors.

Also check that the backtick characters (`) around the template strings were pasted correctly. Some text editors replace backticks with regular quotes.

Help me fix a syntax error in my n8n Code node

Add a Respond to Webhook node and test the full workflow

The Code node now builds the image URL, but nothing sends that output back to the chat yet. You need one final node to close the loop.

  • Click the + button on the right side of the Code node to add a new node after it.
  • Search for Respond to Webhook and select it.
  • In the Respond to Webhook settings, set Respond With to All Incoming Items.
  • Close the settings panel.

What is the Respond to Webhook node?

When you set the Chat Trigger to Using Response Nodes, it waits for a downstream node to tell it what to send back. The Respond to Webhook node is that final handoff.

It takes whatever the Code node produced and delivers it to the chat window. Without it, the chat would hang waiting for a response that never arrives.

Your canvas should now show four connected nodes in a chain: Chat Trigger, AI Agent, Code, and Respond to Webhook.

Before you run the workflow, what do you think you will see in the chat this time? Will it still be raw Mermaid code, or something different?

  • Click Chat at the bottom of the n8n canvas to open the chat panel.
  • Type a workflow description like: I wake up, check my phone, then decide if I exercise or sleep in.
  • Press Enter to send it.

You should see an actual flowchart image appear in the chat response instead of raw Mermaid code. The image shows your workflow as a visual diagram with nodes and arrows.

  • Click the Code node on the canvas after the chat runs to inspect its output data.
  • Confirm the text field contains a URL starting with https://mermaid.ink/img/.

Why inspect the Code node output?

Clicking any node after a workflow runs shows you the exact data that flowed through it. This is one of n8n's most powerful features for debugging.

If the image renders in the chat, the URL is valid. If not, the Code node's output panel shows you exactly what was generated so you can spot the issue.

Seeing a broken image or no image?

  • Copy the URL from the Code node's text field (just the URL between the parentheses) and paste it into a new browser tab. If the image loads there, the URL is correct and the issue is in how the chat renders the Markdown tag.
  • If the URL returns a 404 error, the base64 encoding may contain invalid characters. Double check that all three .replace() lines are present in your Code node.
  • Make sure the Respond to Webhook node is connected to the Code node's output, not directly to the AI Agent.

Help me fix my diagram image not rendering in n8n

Your chatbot now turns plain English into visual flowcharts. Describe any workflow and get back a real image you can share, save, or drop into a document. Next up, you will take this even further with a secret mission that adds conversation memory for iterative refinement.

Secret mission

Add Conversation Memory for Iterative Refinement

Right now, each message to your chatbot starts from scratch. You can describe a workflow and get a diagram, but ask GPT to tweak it and it has no idea what you were just talking about. In this mission, you will add conversation memory so you can refine diagrams through natural back-and-forth chat.

Clean Up Your Resources

Clean Up Your Resources

This project uses two cloud services: n8n Cloud (free trial) and OpenAI API (prepaid credits). Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Cost warning

Your n8n Cloud free trial lasts 14 days. After the trial ends, a paid subscription is required to continue using n8n Cloud (the Starter plan starts at 20 EUR/month billed annually). You will not be charged unless you manually subscribe.

Your OpenAI API credits ($5 minimum purchase) are prepaid. Unused credits remain in your account for up to 1 year. Your API key can be used by any application that has it, so revoke it if you want to prevent further usage.

Resources you used:

  • n8n Cloud trial account (free for 14 days, then requires a paid plan).
  • OpenAI API key and prepaid credits ($5 minimum purchase).
  • n8n workflow (Chat Trigger, AI Agent, Code node, Respond to Webhook node).
  • OpenAI credential saved in n8n.

Keep everything running

Choose this if you are still actively building or want to keep experimenting with your workflow during the trial period.

  • No action needed. Your workflow stays saved and ready to run in n8n Cloud for the remainder of your 14-day trial.
  • Your OpenAI API key remains active. Any application with this key can use your prepaid credits.
  • If you want to continue after the trial, click the Upgrade button in the upper-right corner of your n8n workspace to subscribe to a paid plan.

Pause - I'll come back to this later

Choose this if you want to take a break but plan to return. Your workflow stays saved in n8n Cloud during the trial. No executions happen unless you trigger them manually.

  • Your workflow remains in n8n Cloud as long as the trial is active. No charges occur during the trial.
  • If your trial ends before you return, n8n keeps your workflow data for up to 90 days. You can export your workflows from the Admin Panel before they are deleted.
  • Your OpenAI API credits remain available for up to 1 year. No action needed.

Delete - I don't want to use this again

Choose this to remove all project resources and prevent any further usage.

  • n8n Cloud trial: no action needed. Your trial ends automatically after 14 days, your workspace is deleted shortly after, and you will not be charged unless you manually subscribe to a plan.
  • OpenAI API key: go to https://platform.openai.com/api-keys, find the key you created for this project (named n8n-workflow-viz), and delete it. This prevents any further API usage against your prepaid credits.
  • OpenAI prepaid credits: unused credits remain in your account for up to 1 year. Deleting the API key does not refund credits, but it stops any new charges from being incurred against them.

That's a Wrap!

That's a Wrap!

Nice work! You just built an AI-powered chatbot that turns plain-English descriptions into visual flowchart diagrams, all inside n8n's drag-and-drop workflow canvas.

You've learned how to:

  • Connect n8n Cloud to OpenAI and build a working AI-powered automation pipeline from a chat interface to an AI Agent.
  • Engineer a system prompt that transforms GPT from a conversational assistant into a structured Mermaid diagram generator.
  • Use mermaid.ink and base64 encoding to convert Mermaid code into shareable flowchart images rendered right in the n8n chat window.
  • Secret Mission: Add conversation memory so you can iteratively refine diagrams through natural back-and-forth chat.

Ready to quiz yourself?