Mermaid AI Is Here to Change the Game For Diagram Creation

No matter your professional role, there’s a good chance you’re using AI tools to speed up your workday.

Marketers are tapping into Jasper and Midjourney to help generate written and visual content for campaigns. Developers can use tools such as GitHub Copilot or Claude to write and debug their code. Customer service teams are leveraging AI chatbots to guide customers and prioritize high–urgency tickets.

Here at Mermaid Chart, we believe that diagrams and visuals can play a key role in improving communication and collaboration in the workplace – and beyond. We built the Mermaid Chart platform on top of the award-winning Mermaid.js, the open-source diagramming library. We’re continuously adding new tools to help our users work smarter and more efficiently. So naturally, our team is hard at work integrating helpful AI into the platform.

We’re excited to announce some major enhancements to our existing Mermaid AI functionality, and we’ve just gone live on Product Hunt.

The new-and-improved Mermaid AI offers an AI chat functionality, similar to tools such as ChatGPT and Gemini. Creating and editing diagrams has never been faster. We’ve made it easy to take what Mermaid AI generates and jump into our simple code editor or Visual Editor for fine-tuning.

Mermaid AI features fast, efficient prompt-to-diagram generation, meaning you can produce quick, clear visuals without investing loads of time with traditional tools. Let’s break down how you can use the new Mermaid AI to add some meaningful automation to your day:

How to use Mermaid AI: Step-by-step guide #

Pro and Enterprise users gain unlimited access to Mermaid AI; check out [our plans](pricing page) here.

New Mermaid Chart users can create an account to get started for free. Mermaid AI is currently limited for users on the Free tier.

Time to dive in:

You can launch Mermaid AI within a new or existing Mermaid Chart diagram.

New Diagrams: To create a new diagram using Mermaid AI, click on the Create new AI diagram button in the top right corner of the dashboard on your project page. This will open up Mermaid AI in full-screen view.

Existing Diagrams: If you’d like to use Mermaid AI in the context of the Editor of an existing diagram, simply click on the Mermaid AI button in the side menu, which will open up Mermaid AI on the side panel.

Once a diagram type is declared in the code panel, the Mermaid AI example prompts will change respectively. When you start with a new diagram, the prompts are more generic. If, however, you’re working on an existing flowchart and you switch to the Mermaid AI view, you’ll notice that the prompts are now specified for flowcharts.

Once you’re working on a diagram, at any point you may toggle the tab in the center of your screen from “Editor” to “Mermaid AI.”

Start your chat with Mermaid AI to begin the diagram generation process. You can either start with one of our sample prompts or type a message of your own. Mermaid AI is compatible with any type of diagram you can create in Mermaid Chart: timeline, mindmap, sequence diagram, etc.

For the sake of this demo article, we’re using the sample prompt, “Create a Flowchart for making pizza and add emojis.” But Mermaid AI will help with whatever prompt you have in mind!

Click on the Generate Diagram icon, and Mermaid AI will create a visual in seconds.

If you’re happy with Mermaid AI’s initial output, you can export a PNG or SVG file of the visual right away. You’ll now have an image that you can easily share in Slack or attach to an email. Your diagram will auto-save, and you can also save it as a new diagram from the hamburger icon on within the chat.

Does your diagram still need work? Message Mermaid AI again with additional requests to fine-tune your visual. You can ask Mermaid AI to expand on the diagram, change elements, switch up the style, and more.

In this pizza flowchart scenario, we might say “Add additional vegetable options” or “Add a step to garnish the pizza after baking it in an oven.”

Perhaps you just wanted to use Mermaid AI as a starting point. Click the Edit button to jump into either the simple code editor or the Visual Editor. Users familiar with Mermaid syntax might be comfortable making adjustments with the traditional editor on the left side of the screen. Non-technical users can easily use the drag-and-drop functionality of the Visual Editor to make their tweaks.

Users may also pan and zoom within their Mermaid AI-generated diagrams, in either the side panel view or full screen.

At any time, you can return to Mermaid AI by toggling the tab in the center of your screen. Click the “More details” dropdown within your chat window to see the Mermaid code for your diagram, as well as an explanation of the diagram. From a new chat window, you can also view a User Guide for more helpful tips.

Getting started with a diagram has never been easier, and Mermaid AI can help you elevate your visuals with just a few keystrokes.

There’s more AI innovation on the way #

We’re not stopping at the initial launch of Mermaid AI

Stay tuned for more AI updates coming soon. And if you haven’t already - sign up for free to start experimenting today.