Write prompts for diagrams in AI assistants
How your AI assistant turns a prompt into a draw.io diagram, what that costs, and how to steer it.
The two formats
The assistant writes each diagram in one of two formats. It picks one by itself, and you can ask for the other.
| Mermaid | draw.io XML | |
|---|---|---|
| What the assistant writes | A short text description: Order --> Payment | Every shape with its position, size and style |
| Layout | Automatic | Placed by the assistant, following a pattern for each diagram type |
| Typical time | 10–20 s | 35–60 s |
| Output tokens | About 1,500 | About 7,500 |
| Styles | Colours by role | Any draw.io style: colour themes, fonts, shadows, hand-drawn, gradients |
| Icons | None from the draw.io libraries | More than 10,000 draw.io shapes: AWS, Azure, Google Cloud, Cisco, Kubernetes, P&ID and more |
| Diagram types | 28, including sequence diagrams, Gantt charts and charts | Anything made of shapes and connectors |
| After Open in draw.io | Keeps its Mermaid text: double-click the diagram to edit the text | Native draw.io shapes, each editable on its own |
Which format the assistant uses
draw.io XML: for diagrams of boxes and lines up to about 30 shapes. These are flowcharts, decision trees, swimlane processes, org charts, ER diagrams, UML class, state and use case diagrams, mind maps, timelines, and architecture, cloud and network diagrams.
Mermaid: for the diagram types only Mermaid draws, and for large flowcharts. These are sequence diagrams, Gantt charts, pie, XY, quadrant and Sankey charts, git graphs, kanban boards, user journeys and the other Mermaid types, and flowcharts with more than about 30 shapes, which get an automatic layout.
Ask for a format
| You want | Add to your prompt |
|---|---|
| A faster result, or a diagram you edit as text later | "Use Mermaid." |
| Your own styling, exact placement or icons | "Use draw.io shapes, not Mermaid." |
| Official icons | "Use AWS icons." · "Use Cisco shapes." · "Use Kubernetes icons." |
For example, a 20-step insurance claim process placed as draw.io XML took 4–7 minutes and $0.55–0.99. The same prompt ending in "Use Mermaid." took 15 seconds and $0.07.
Time and cost
These were measured with Claude Sonnet 5.5 on 46 runs of common prompts in October 2026. The costs are at API prices. On a Claude or ChatGPT subscription, the same work counts towards your usage limits instead.
| Request | Format | Time | Output tokens | Cost |
|---|---|---|---|---|
| A diagram with 10–25 shapes | draw.io XML | 49 s | 7,500 | $0.22 |
| A diagram with 10–25 shapes | Mermaid | 17 s | 1,600 | $0.06 |
| A 20-step process | draw.io XML | 4–7 min | 31,000–62,000 | $0.55–0.99 |
| A 20-step process | Mermaid | 15 s | 1,900 | $0.07 |
| A change to the diagram (colours, a theme, one more shape) | As before | 30–45 s | 5,000–6,000 | $0.10–0.15 |
| Icons for every step | draw.io XML | 2–3 min | 15,000–25,000 | $0.30–0.50 |
Before its first diagram in a conversation, the assistant reads the drawing guide for the format once. This is about 11,000 tokens of input for draw.io XML, and 4,000 for Mermaid.
Choose a model
| Model | Result |
|---|---|
| Claude Sonnet 5.5 | Recommended. The numbers above are for this model. |
| Claude Opus 5.5 | The best layouts and the most complete content, at about twice the time and cost (draw.io XML: 115 s, $0.47). |
| Claude Haiku 5.5 | Not cheaper: it wrote 2–3 times as many tokens (draw.io XML: 75 s, $0.72), and chose the wrong format in 2 of 10 runs. |
| Other models, such as GPT and Gemini | They use the same drawing guide, but weren't measured. |
Write the prompt
- Name the diagram type: "a swimlane process", "an ER diagram", "a sequence diagram".
- List the content: the steps, components, tables or people. The assistant adds what is obviously missing, such as the start and end or error paths, but your list decides what appears.
- Say what connects to what where it matters: "the API gateway calls the order and payment services".
- Say where the diagram goes: "for a board slide" gets a corporate look, "a rough first sketch" a hand-drawn one. See colour themes.
- Name the icon set when you want icons: AWS, Azure, Google Cloud, Cisco, Kubernetes, P&ID.
- Write in any language: the labels will be in the same language.
When the result is off
Ask for the change in the same chat. The assistant sees the diagram as it is shown, and changes only what you name:
Make it left to right.
Add a Redis cache between the application servers and the database.
Highlight the photo upload path in orange and label each connector with what it carries.
Specific requests work better than "try again". For many small changes, click Open in draw.io and edit the diagram in the draw.io editor.
Related
- Diagram types and examples for AI assistants.
- Change and style a diagram in an AI assistant.
- Write better queries for AI generated diagrams in the draw.io Generate dialog.