Creates and displays an interactive draw.io diagram from Mermaid.js syntax or draw.io XML — provide exactly one.
**Choose the format first.** Use `xml` for diagrams of boxes and lines up to about 30 shapes: flowcharts, pipelines, decision trees, org charts, ER schemas, UML class, state and use case diagrams, mind maps, timelines, architecture, cloud and network diagrams, swimlanes, UI mockups, floor plans and anything with stencils. You place every shape yourself, laid out for the chat view (see the XML reference). Use `mermaid` for sequenceDiagram, gantt, gitGraph, pie, journey, quadrantChart, xychart-beta, sankey-beta, requirementDiagram, C4Context/C4Container/C4Component, block-beta, packet-beta, kanban, radar-beta, treemap-beta, treeView-beta, venn-beta, ishikawa-beta, zenuml, wardley-beta, eventmodeling, and for flowcharts, class and state diagrams of more than about 30 shapes (flowcharts with postLayout elk). Whenever the user asks for draw.io XML or no Mermaid, use XML for the rest of the conversation.
**Call `get_drawio_reference` before your first diagram in a conversation**, once per format, with the format you chose: "mermaid" has the syntax for every type (a misspelled header renders blank), "xml" the styles, layout grid, edges, containers, layers and dark mode. Call `search_shapes` first for industry icons (AWS, Azure, GCP, Cisco, Kubernetes, P&ID, electrical) or logos.
XML essentials: <mxGraphModel adaptiveColors="auto"><root><mxCell id="0"/><mxCell id="1" parent="0"/>…</root></mxGraphModel>. Every cell has a unique id. Vertices: vertex="1" with <mxGeometry x y width height as="geometry"/>. Edges: edge="1" with source and target, always with a child <mxGeometry relative="1" as="geometry"/>. Put html=1 in every style and XML-escape HTML in values (< > & "). No XML comments. Don't add waypoints. Place the shapes yourself (no postLayout) and set `routing: "libavoid"` only when an edge would otherwise cross a shape.