No code? Draw a diagram from text

When to use it

Diagramate's main path is "the AI gives you code, we draw the diagram". Often, though, there is no code to paste:

• the assistant drew the diagram itself, and "Copy" only gave you its text or the node labels, one per line (ChatGPT does this when you're signed out);
• you have a process write-up, meeting notes or a list of steps and want it as a picture;
• you haven't asked an AI yet and just know what the diagram should show.

You don't need to go back for code. Give the text to Diagramate and click "Draw it with AI": the AI writes the Mermaid code for one diagram from it, your browser draws the picture, and themes, label edits and exports work as usual.

Step 1: give Diagramate the text

Three ways in, all doing the same thing:

• The box on the home page: just paste. Text with no diagram code doesn't send you to the editor to see an error; the box says "This is plain text with no diagram code". Click "Draw it with AI" and the drawing starts as soon as the editor opens, or "Open the editor anyway" to work on it yourself.
• An empty editor: "New" → blank diagram, and both the middle of the preview and the status line show "Describe a diagram". Write the description first (three examples are one click away), then press "Draw" or ⌘ / Ctrl + Enter. Open it directly.
• The error bar: if the text is already in the editor and reported as having no diagram type, the error bar offers "Draw it with AI" too.

Step 2: write the description

The AI draws what you write, so the more specific it is, the less you'll need to fix. Four things worth saying:

1. Which diagram: if you don't say, sequential steps usually become a flowchart and nested points a mind map. For anything else, start with "As a mind map, …" or "As a sequence diagram, …".
2. Steps and roles: who does what, in order.
3. Conditions and branches: phrases like "claims over $5,000 also go to the finance manager" or "rejected ones go back" turn into decisions and branches.
4. Your own words: node labels stay as close to what you wrote as possible, so write them the way you want them on the diagram.

A description that works as is:

Expense claims. An employee submits a claim and their manager approves it; claims over $5,000 also go to the finance manager; approved claims are paid out, rejected ones go back to the employee.

Step 3: check the result, keep adjusting

Once the AI has written the code, Diagramate first tries to parse it in your browser:

• It renders: it goes straight into the editor and the preview shows the diagram; the undo button at the preview's bottom-right takes you back;
• It doesn't render: nothing is put in automatically; the dialog offers "Try again" or "Use it anyway" to fix it yourself, or "Change it" to reword the description.

The description above comes out roughly like this (the exact code varies from run to run). Click "Open in the editor" to see it:

flowchart TD
    A([Employee submits a claim]) --> B{Manager approval}
    B -- Rejected --> R[Back to the employee]
    R --> A
    B -- Approved --> C{Over $5,000?}
    C -- Yes --> D{Finance manager approval}
    C -- No --> E[Pay out]
    D -- Approved --> E
    D -- Rejected --> R
    E --> F([Done])

To adjust it, there's no need to describe everything again:

• One sentence: click "AI edit" in the status line, for example "add a finance review before paying out" or "rename Back to the employee to Returned";
• Click on the diagram: double-click a node to rename it, click a node to add a step or change its shape or color; see Edit, lay out and fix.

As a mind map

For a list of points, say "as a mind map". "As a mind map, plan the annual event: goals, budget, venue, speakers, promotion, review" comes out roughly as:

mindmap
  root((Annual event plan))
    Goals
    Budget
    Venue
    Speakers
    Promotion
    Review

For more levels under a branch, keep writing, for example "promotion: newsletter, posters, community groups".

Allowance and privacy

• The text is sent to the AI engine once, and not stored, only when you click "Draw it with AI" or "Draw"; nothing is sent when the page opens or while you write.
• The free allowance: tidy, edit and draw share 2 requests a day, counted per account when signed in or per device otherwise, reset at 00:00 UTC+8 (AI fix is counted separately, 20 a month). Pro has 300 a month shared by all AI features. Details in AI fix, tidy, edit and draw.
• The AI writes code; Mermaid in your browser draws the picture, so rendering and export still happen locally and need no sign-in.

Related

• If you do have an AI reply, pasting the whole reply is quicker: Five-minute start
• Get the AI to give you code directly: Getting Mermaid code that renders on the first try
• Start from a ready-made structure: Templates