Show HN: How to Use Mermaid Chart as an AI Diagram Generator for Developers

1 November 2023 • 9 mins

Would an AI diagram generator make your life easier? We think it would!

Building diagrams to complement your code has historically been viewed as a time thief often consuming 10%-20% of a developers time that could otherwise be spent coding.

Developers are using artificial intelligence (AI) to bring greater efficiency to every part of their day. So why not use AI to help make the process of creating, editing, and maintaining diagrams a little bit easier?

Mermaid Chart is excited to unveil a host of AI features, including our AI Chatbot and an integration with ChatGPT. These AI driven tools help users create and edit diagrams faster by turning plain language prompts into visuals, saving time and reducing complexity.

We built Mermaid Chart as a platform on top of Mermaid.js, the open-source text-to-diagramming tool. Our team leaned into Mermaid’s award-winning workflow that’s allowed thousands of developers to render diagrams from simple code. Now, we’re continuing to add functionality (such as our AI-powered tools) to Mermaid Chart to make the user experience as easy and fun as possible.

Your search for an AI diagram generator stops here. Let’s explore how Mermaid Chart’s new AI features can help you build effective diagrams more efficiently than ever:

Why Choose Mermaid Chart’s AI Diagram Generator?

Working with Mermaid AI can help you in a variety of ways:

• Helping you get started: Oftentimes, the hardest part about building a diagram is getting started. Our AI tools can help you build a baseline visual to which you can add more specific details. It’s like having a professionally built template curated just for you and your use case!
• Working more efficiently: When you can take some of the burden of diagramming off your plate, you’ll be able to return to your code more quickly. That means more time for high-level, strategic work.
• Quick fixes for bugs and errors: Using the “Repair Diagram” feature of our AI chatbot (more on that later!), you can more easily find those frustrating syntax errors that might be stopping your diagram from rendering properly.

How Mermaid Chart’s AI Tools Supercharge Your Diagramming

Let’s discuss Mermaid Chart’s essential AI tools – Mermaid AI and our ChatGPT integration.

Mermaid AI – The diagramming AI Chatbot

Mermaid Chart’s AI Chatbot is a lot like a virtual assistant that can build your diagrams, edit them, and polish them for you.

The AI Chatbot is embedded into the Mermaid Chart platform to help users jumpstart the diagramming process. Free, Pro and Enterprise users can access the AI Chatbot through the Mermaid Chart editor. You can use the bot to…

• Start a diagram: Ask the bot to create a diagram to give you inspiration. The more context you provide or data you paste in, the more accurate your diagram will be. Try building a process flowchart from a call transcript in Mermaid AI.
• Edit a diagram: Update the diagram content, layout, colors, and more
• Repair a diagram: If your code is broken, our bot can help try to fix it

Just click “Mermaid AI” in the bottom right of the editor to recruit help from your personal AI assistant.

ChatGPT Integration

The ChatGPT integration is another great perk. Free and Paid users with ChatGPT Plus can access the Mermaid Chart GPT and then continue editing the generated diagram within the editor. You can even use Mermaid AI to make the edits once you’re in the editor!

You can easily generate Mermaid diagrams in ChatGPT using simple prompts — and jump right into Mermaid Chart to fine-tune your visual with our text-based diagramming editor.

Simply search for Mermaid Chart when you explore GPTs, and then give ChatGPT a prompt that generates a Mermaid diagram.

Let’s consider some examples. Using prompts such as “Create a state diagram showing the states of a stereo”, “Draw a timeline of World War II”, or “Make a flowchart showing the process of making tea” will generate a ready-made diagram right in your conversation.

This often gives users a great starting point that can kickstart their diagramming process. From there, you can easily continue editing in the Mermaid Chart platform.

5 prompts to try with Mermaid Chart AI

Here are five ways to use the Mermaid AI chatbot while building your diagrams. You can slightly tweak the language to fit the context of your diagram:

1. “Create a flowchart showing the purchase request process, from employee submission to manager approval, finance review, and final purchase.”
2. “Build a Gantt chart for a 6-month software development project with phases: Planning, Design, Development, Testing, and Deployment.”
3. “Create an org chart for a company with a CEO, a CTO with two dev teams, a CFO with one accountant, and a COO with HR and Operations managers.”
4. “Generate a sequence diagram for a user logging in through a web application, including steps for frontend, backend API, and authentication server.”
5. “Create a state diagram for a delivery package from ‘Ordered’ to ‘Delivered’, including states like ‘Packed’, ‘Shipped’, ‘Out for Delivery’, and ‘Failed Delivery’.”

Try these to make edits or styling changes to your output

1. Add the nodes “Continue and Evaluate” after the [node name] node
2. Highlight the node “Continue” with an orange background with white text
3. Add a new node “Option 4″ and create a link from Evaluate to it
4. Change the node Start to a circle shape
5. Add an edge from Start to Evaluate

As you can see, Mermaid’s AI chatbot can help you save time and build your diagrams more efficiently.

5 Advanced Tips for Faster AI-Powered Diagramming

1. Craft Structured Prompts for Precision with the AI Diagram Generator The Mermaid Chart AI diagram generator works best with structured, goal-oriented prompts. Be specific about:
   • The diagram type (e.g., flowchart, sequence, user journey)
   • Key entities and their relationships
   • Conditions, loops, or logic paths
   Example Prompt: “Use the AI diagram generator to create a user journey diagram from onboarding to retention, showing decision points for churn and engagement.” Tip: Think like you’re describing the diagram to a colleague, the more context the AI has, the better your first output will be.
2. Iteratively Refine Using Prompt-Driven AI Feedback Loops Instead of rewriting from scratch, refine your diagram using follow-up prompts directly in the AI diagram generator. You can say things like:
   • “Add a failed login path to the diagram”
   • “Highlight the analytics node”
   • “Make the process run left to right”
   Advanced Use: Continue layering instructions and let the AI diagram generator evolve your diagram step by step, similar to collaborating with a teammate.
3. Use Natural Language to Control Node groups and Direction A powerful feature of the Mermaid Chart AI diagram generator is its ability to interpret layout commands in plain English. Try prompts like:
   • “Set layout to top-down”
   • “Group all data-related nodes together in a subgraph”
   • “Separate frontend and backend in different subgraphs”
   Result: The AI will apply visual logic such as top-bottom or left-right flow (TB, LR), subgraph groupings, and clear spacing automatically.
4. Switch Between AI and Manual Modes for Maximum Control After generating a diagram with the AI diagram generator, you can:
   • Edit it in the visual drag-and-drop editor by toggling on the “Whiteboard”
   • Fine-tune the Mermaid code manually
   • Jump back into AI mode to request structural changes
   Pro Tip: Let the AI diagram generator handle the heavy lifting. Then, make manual adjustments or add custom features like click links, classDef styles, or conditional logic.
5. Embed, Reuse, and Collaborate with AI-Generated Diagrams Diagrams made with the AI diagram generator are interactive and reusable. You can:
   • Collaborate on them in real-time by sharing with your teammatesEmbed them live into Notion, Confluence, or internal docsReopen and prompt the AI to expand or revise them as your project evolves
   Workflow Hack: Use diagrams as living documentation. Return at any time and ask the AI to modify them based on new context or updated plans. Example: “Add sprint planning steps before development begins.”

Mermaid Chart AI vs. Other Diagramming Tools

Feature	Mermaid AI	Eraser	Miro	Lucidchart
AI Diagram Generation	✅ Natural language to full diagram (code + visual)	⚠️ Prompt-based but limited scope	⚠️ Basic AI assistant (experimental)	⚠️ AI-enhanced templates, not fully generative
Code + Visual Sync	✅ Real-time sync between Mermaid code and drag editor	⚠️ Code only in markdown/code pane	❌ Visual-only	❌ Visual-only
Embed Anywhere	✅ Markdown, VS Code, Jira, Notion, Confluence, etc.	⚠️ Markdown export	✅ Good embeds	✅ Good embeds
Team Collaboration	✅ Real-time + versioned	✅ Real-time	✅ Real-time	✅ Real-time
Open Standards Friendly	✅ Text-based, Git-friendly	✅ Text-based	❌ Closed ecosystem	❌ Closed ecosystem
Pricing	Free & paid (individual & teams)	Free & paid	Expensive for teams	Expensive for teams

Relevant Readings:

Mermaid AI Is Here to Change the Game For Diagram Creation

7 ER Diagram Examples For Database Modeling from Mermaid AI

Mermaid Whiteboard: Visual Collaboration Made Universal

FAQ section:

What is an AI diagram generator?

An AI diagram generator is a tool that automatically creates visual diagrams from text prompts or data. It uses artificial intelligence to interpret natural language or code and convert it into flowcharts, mind maps, org charts, and more. This automation streamlines the diagramming process by reducing manual effort, improving accuracy, and accelerating workflow creation. Tools like Mermaid Chart use AI to generate, edit, and repair diagrams quickly, making them ideal for developers and technical teams.

How do Mermaid Chart AI tools help developers?

Mermaid Chart uses AI to enhance developers’ productivity by automating and simplifying diagram creation. Using prompts, users can quickly generate starter diagrams, edit layouts, and fix syntax issues. The ChatGPT integration allows developers to create diagrams directly from prompts, saving time on manual coding. These features reduce repetitive tasks, minimize errors, and allow developers to focus on higher-level problem-solving rather than diagram formatting.

Can I edit AI-generated diagrams manually?

Yes, you can fully customize AI-generated diagrams in Mermaid Chart. After the AI creates a visual, you can edit the code manually to adjust shapes, colors, labels, and connections. The platform offers a text-based editor where you can refine or expand the diagram, ensuring it meets your exact specifications. This flexibility allows you to combine the speed of AI automation with the precision of manual customization, creating detailed and accurate visuals.

How to Get Started with Mermaid Chart’s AI Diagram Generator

If you haven’t already, you can click here to create your free Mermaid Chart account. A plan on the Free tier enables you to build three diagrams, five AI chats and use all of our plugins. A Pro plan – which includes access to all of our AI tools — starts at just $80/year.

If you’re looking for an AI diagram generator and some additional support from your own AI diagramming assistant, Mermaid Chart is here to help. We’re just getting started with our helpful AI-enabled tools, so stay tuned for more developments coming soon!

Looking to use AI to help you make effective diagrams more efficiently? Sign up for free with Mermaid Chart.

---