Best Practices: Prompting drawio-mcp for the right result

[alderg]

A short guide to phrasing your prompts so you get the diagram you actually wanted — quickly. This is written for people using drawio-mcp through Claude, ChatGPT, or any other AI assistant: you never have to write any code or markup yourself.

What the AI is doing behind the scenes

When you ask an AI to make you a diagram, drawio-mcp gives it two ways to do that. Most of the time the AI picks the right one and you'll never need to think about it — but knowing the trade-off lets you steer it when the first attempt isn't quite right.

	Quick mode (Mermaid)	Rich mode (draw.io XML)
Speed	Fast — diagram appears in seconds	Slower — the AI has to write much more detail
Auto-layout	Yes, always — nothing for the AI to position	The AI places every box by hand; layout is sometimes patchy
Coverage	26 well-known diagram types	Anything draw.io can draw — thousands of icons across every industry
Icons	Generic shapes only	AWS, Azure, Cisco, P&ID, electrical, floor-plan furniture, etc.
Best for	Most everyday diagrams	Branded architectures, engineering schematics, mockups, anything visual

Rule of thumb: if the diagram doesn't need specific icons, you want quick mode. It's faster, cheaper, and the layout usually looks better than what the AI can position by hand.

---

📋 What you can ask for in quick mode

These are the 26 diagram types that get the fast, auto-laid-out treatment. Just describe what you want in plain language — the AI maps your request to the right type.

Process & flow

• Flowcharts — boxes, decisions, arrows
• Sequence diagrams — interactions between people or systems over time
• State diagrams — state machines and transitions
• User journeys — step-by-step experiences with satisfaction scores
• Gantt charts — project schedules
• Git graphs — branch and merge history

Structure & data

• Class diagrams — UML classes and relationships
• Entity-relationship diagrams — database schemas
• Requirement diagrams — SysML-style requirement traceability
• Block diagrams — labelled block layouts
• C4 model — context, container and component views
• Architecture diagrams — generic cloud architecture (no brand icons)
• Packet diagrams — network packet structures
• ZenUML sequence diagrams — alternative sequence style

Charts & metrics

• Pie charts
• XY charts — bar and line graphs
• Sankey diagrams — flow magnitudes
• Quadrant charts — 2×2 matrices
• Radar charts — spider/star plots
• Treemaps — nested boxes sized by value

Thinking & planning

• Mindmaps — radial idea trees
• Timelines — chronological events
• Kanban boards — task columns
• Ishikawa diagrams — fishbone / cause-and-effect
• Venn diagrams — overlapping sets
• Tree views — hierarchical trees

If your request fits one of these, the AI will almost certainly use quick mode and you'll have your diagram in a few seconds.

---

🛠️ When you need rich mode

The 26 types above use plain geometric shapes. The moment you need real icons — anything branded, technical, or industry-specific — the AI switches to rich mode, which can reach into draw.io's full shape library of around 10,000 icons.

The trade-off: rich-mode diagrams take longer to appear and the AI positions every element by itself, so layout can be a bit untidy. For some diagram types (flowcharts, trees, layered diagrams) the AI can apply an automatic cleanup pass, but it isn't available everywhere.

Things you can ask for that require rich mode:

Cloud & SaaS

AWS • Azure • Google Cloud • IBM Cloud • Alibaba Cloud • Oracle • OpenStack • SAP • Kubernetes • VMware • Veeam • Citrix • Office 365 • Active Directory • Salesforce • Dynamics 365 • Atlassian

Networking & infrastructure

Cisco • Cisco Safe • Allied Telesis • Cumulus • Network topology diagrams • Server rack layouts

Software & modelling

Classic UML (in styled form, not just Mermaid syntax) • ArchiMate 3.2 / 2.1 • BPMN 2.0 • SysML • Data flow diagrams • Threat models • Enterprise integration patterns (EIP)

Engineering & operations

Process & Instrumentation Diagrams (P&ID) • Electrical schematics • Fluid power (ISO 1219) • Value stream mapping • Server cabinets • Office and home floorplans

Visual & UI

Mockups and wireframes (web, Android, iOS) • Bootstrap UI elements • Material Design • Sitemaps • Infographics • Signs and clipart • Web icons

Whenever your prompt mentions one of these domains — "draw our AWS architecture", "diagram the P&ID for the cooling loop", "mock up the sign-up screen" — the AI will pick rich mode automatically.

---

🎯 Nudging the AI's choice

If the AI made the wrong call, you can simply tell it. A sentence is enough:

To get faster, simpler output:

"Use a simple Mermaid diagram — I don't need fancy icons."
"Just a quick flowchart, nothing fancy."
"Skip the brand icons, plain boxes are fine."

To get the rich, icon-heavy version:

"Use real AWS icons."
"Use Cisco networking shapes."
"Use P&ID symbols for the valves and pumps."
"I want a proper draw.io diagram I can edit afterwards."

If the layout looks messy in rich mode:

"Can you apply the automatic layout to clean it up?"

---

✅ Best practices

1. Start simple. "Draw our auth flow" usually gives you the quick, clean version. Add detail later if you need it.
2. Name the domain when icons matter. Saying "AWS", "Cisco", "P&ID", "floorplan" is the clearest signal that you want the real icons.
3. Match your language. Ask in German, French, Japanese — the diagram labels will follow.
4. Use the editor for polish. Every diagram comes with an Open in draw.io button. It's almost always faster to tweak there than to ask the AI for ten revisions.
5. If the first attempt is wrong, say what's wrong specifically. "Make it left-to-right", "use real AWS icons", "add a database between the API and the worker" — small redirects work much better than "try again".

---

🧭 Quick decision flow

Do you need real branded icons (AWS, Cisco, P&ID, etc.), a mockup, a floorplan, or precise visual styling?
→ Yes: ask for it by name — the AI will use rich mode and pull in the right icons.
→ No: just describe the diagram in plain words — the AI will use quick mode and you'll have it in seconds.

---

Got a diagram request that didn't work the way you expected? Drop a comment with what you asked for and what came back — we'll use it to improve the prompts.