Getting Mermaid code that renders on the first try

One sentence makes the difference

Ask an assistant to “draw me a flowchart” and you may get an image, a paragraph, or a markdown list. Ask it to “draw a flowchart in Mermaid, first line flowchart TD, reply with one complete mermaid code block only” and the reply is code that renders. The difference is that the syntax keyword is in the prompt.

“No code yet?” at the right end of the editor's status line has one prompt per diagram type (flowchart, mind map, sequence, Gantt, class, state, pie). Pick one and copy it. The flowchart prompt reads:

Draw a flowchart in Mermaid for: ____. Requirements: reply with one complete mermaid code block only, the first line must be flowchart TD, keep node labels short.

Four things worth spelling out

1. The diagram type's keyword: flowchart TD, sequenceDiagram, mindmap, gantt, classDiagram, stateDiagram-v2, pie. Mind maps especially: say “use Mermaid's mindmap syntax”, or you will often get a plain list.
2. Code block only: “reply with one complete mermaid code block only”. Not strictly required, since Diagramate extracts the code from a whole reply, but less prose means fewer places for something to go wrong.
3. Short labels: long node text makes wide, crowded diagrams. Ask for short labels and add detail later.
4. The content itself: give it the steps, the roles and the dates. Left to itself, an assistant produces a generic template; the more specific you are, the less you edit afterwards.

To generate a diagram with a known structure, every page in the template library includes a prompt that asks the assistant for that exact shape.

What the “Copy” button gives you

Diagramate takes the whole reply; you never need to cut the code block out. What the copy button returns differs a little between assistants (tested 2026-09-02):

• ChatGPT: the web app renders the diagram itself. Signed in, “Copy” under the reply returns the full Markdown including the code block. Signed out, it copies only the node labels, not the code, so sign in first.
• Claude: “Copy” under the reply returns the full Markdown with the code block.
• Other assistants: any reply containing Mermaid code works the same way.

More detail in the Help Center: How to copy a whole reply.

After pasting

When the status line says “flowchart code extracted from the reply”, you are done. Three shapes are detected: a code block tagged mermaid, an untagged code block whose first line is a diagram keyword, and bare code with no fences at all.

If it says “No diagram type found”, the assistant probably put the keyword in the prose instead of the code. Add flowchart TD (or the right keyword) as the first line. When a reply contains several code blocks, the first one is used; to export all of them at once, paste the whole reply into “Batch / bundle export” in the export menu (Lite).

Try one

This is the code extracted from a typical reply to the prompt above. Click “Open in the editor”:

flowchart TD
    A([Start]) --> B[Submit leave request]
    B --> C{3 days or fewer?}
    C -- Yes --> D[Line manager approves]
    C -- No --> E[Department head approves]
    D --> F{Approved?}
    E --> F
    F -- Yes --> G[HR records it]
    F -- No --> H[Notify the employee]
    G --> I([End])
    H --> I

Next

• Previous: Five-minute start
• Next: Edit, lay out and fix