TWO DRAFTING MODES
Explore in Mermaid. Commit in XML.
Use Mermaid for fast flow, state, and sequence drafts; switch to diagrams.net XML for exact layout, custom shapes, annotations, and wireframes.
graph LR
A --> B --> C<mxGraphModel>
<root />Agent-assisted diagrams.net
Move from a natural-language brief or Mermaid draft to reviewable draw.io XML, then refine every shape, connector, label, and layout in the embedded diagrams.net editor.
Native draw.io XMLReviewable versions
01 / CAPABILITIES
draw.io combines the speed of Agent drafting with the exact control of a mature diagram editor and a version history that stays reviewable.
TWO DRAFTING MODES
Use Mermaid for fast flow, state, and sequence drafts; switch to diagrams.net XML for exact layout, custom shapes, annotations, and wireframes.
graph LR
A --> B --> C<mxGraphModel>
<root />EDITOR
Open the generated scene inside diagrams.net and directly adjust geometry, styling, labels, and connectors.
PRESERVATION
Meaningful versions preserve the authored scene instead of silently replacing hand-tuned diagram work.
OUTPUTS
Keep native draw.io XML and Mermaid drafts alongside reviewable versions and standard diagram exports.
02 / WORKFLOW
Separate fast structural thinking from detailed visual refinement without losing continuity.
Provide a brief or an initial Mermaid graph.
Generate a structured, reviewable draw.io scene.
Tune shapes and routing in the embedded editor.
Save, restore, and export the approved diagram.
03 / USE CASES
Choose draw.io when detailed structure, established notation, and direct visual editing matter.
Map services, infrastructure, data stores, boundaries, and dependencies.
↗Model decisions, handoffs, exceptions, and ownership with explicit routing.
↗Create annotated interfaces and implementation-focused component maps.
↗draw.io for Xpert AI
Combine Agent-assisted structure with the direct control of diagrams.net and reviewable XML versions.