Can ChatGPT or Claude write Mermaid?

Yes, well. Ask for the diagram type you want. With Diagram connected, the AI also saves the rendered diagram at a link, so you don’t need a live editor to see it.

Is this a Mermaid live editor?

No. Diagram has no editor; you ask your AI for the change and it saves the new version at the same link. If you want to type Mermaid yourself, the Mermaid live editor is the right tool.

Can I export the Mermaid?

Ask the AI to keep the source on the page, or to paste it into your README. GitHub and many docs tools render Mermaid directly.

When should I not use Mermaid?

When the diagram is big or needs a particular layout. The AI can draw the same diagram as a web page, where it places every box itself.

← AI diagram generator

Mermaid diagrams with AI

Mermaid turns short text into flowcharts, sequence diagrams, ER diagrams and Gantt charts, and every AI writes it well. The awkward part is seeing it: you paste the code into a live editor, export a picture, and do it again after every change. Connect Diagram and the AI saves the rendered diagram at a link, with the Mermaid kept underneath, so you ask for a change and the same link updates.

Connect Diagram, free

1. Open your AI tool

Any AI can write Mermaid. Coding tools can also read the code it describes:

Each guide has the one-minute setup. Once Diagram is connected, every diagram the AI draws is saved at a link instead of staying in the chat.

2. Ask for it

Say what you want to see in plain words. These requests work, and each is one message:

A Mermaid flowchart

The most common Mermaid diagram.

“Write a Mermaid flowchart of the order process, render it and give me a link. Keep the Mermaid source on the page.”

Sequence and ER diagrams

Mermaid handles both well for small diagrams.

“Write a Mermaid sequence diagram of the login flow from the code, and give me a link.”
“Write a Mermaid ER diagram from our Prisma schema.”

Fix or tidy Mermaid you have

Mermaid that won’t render, or is hard to read.

“This Mermaid doesn’t render. Fix it, then group the nodes by service and render it at a link: (paste it)”

Past what Mermaid does well

When the automatic layout gets crowded, ask for the same diagram without Mermaid.

“Redraw this as a hand-laid-out diagram instead of Mermaid, grouped by team, with the same content.”

An example

Written by Claude in Mermaid, drawn by Mermaid’s own library, shared with Diagram.Open it on Diagram

3. Check it

The AI draws what it read or was told. These habits catch most mistakes:

Keep the source. Ask the AI to keep the Mermaid on the page. Then it can be copied into a README or docs that render Mermaid.
Small diagrams suit Mermaid. Mermaid lays the diagram out for you, which is quick up to a dozen or so nodes and crowded after that.
Name the diagram type. flowchart, sequenceDiagram, erDiagram, gantt, stateDiagram: saying which one avoids the AI guessing.
Check it renders. Diagram renders every saved version and tells the AI about layout problems, so it can fix them before you look.

4. Share the link and keep it current

Put the link in the README, the pull request or the doc. When things change, ask for the change in plain words. It’s saved at the same link and every earlier version is kept, so nobody is looking at an old picture.

Questions

Can ChatGPT or Claude write Mermaid?: Yes, well. Ask for the diagram type you want. With Diagram connected, the AI also saves the rendered diagram at a link, so you don’t need a live editor to see it.
Is this a Mermaid live editor?: No. Diagram has no editor; you ask your AI for the change and it saves the new version at the same link. If you want to type Mermaid yourself, the Mermaid live editor is the right tool.
Can I export the Mermaid?: Ask the AI to keep the source on the page, or to paste it into your README. GitHub and many docs tools render Mermaid directly.
When should I not use Mermaid?: When the diagram is big or needs a particular layout. The AI can draw the same diagram as a web page, where it places every box itself.