draw.io

Quality 77 / 100good

3 tools, about 2,194 tokens to load them all · tool set f5ba0eeac8db · tools last changed 2026-10-17 · checked 2026-10-20 11:08 UTC

Tool changes

• 2026-10-17create_diagramchangeddescription, input schema
  before

  Creates and displays an interactive draw.io diagram from Mermaid.js syntax or draw.io XML — provide exactly one. **Choose the format first.** Use `mermaid` for every type it has a header for: flowchart/graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, xychart-beta, sankey-beta, requirementDiagram, C4Context/C4Container/C4Component, block-beta, architecture-beta, packet-beta, kanban, radar-beta, treemap-beta, treeView-beta, venn-beta, ishikawa-beta, zenuml, wardley-beta, eventmodeling. Don't write flowcharts as XML. Use `xml` for everything else (UI mockups, floor plans, cloud/network/P&ID/electrical diagrams with stencils, swimlanes, UML with deliberate placement, exact positions or colors) and whenever the user asks for draw.io XML or no Mermaid; then keep using 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 (&lt; &gt; &amp; &quot;). No XML comments. Don't add waypoints: set `postLayout: "elk"` for flowchart-like XML, `routing: "libavoid"` for a hand-placed layout.

  after · 72% of words in common

  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 (&lt; &gt; &amp; &quot;). 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.

• 2026-10-13get_drawio_referenceadded

  Returns the draw.io diagram generation reference as Markdown. Format "xml": styles, the layout grid, edges, containers, swimlanes, layers, tags, metadata, dark mode, the layout and routing passes, and the well-formedness rules for create_diagram's xml. Format "mermaid": the header keyword and syntax hints for every Mermaid type draw.io supports, flowchart styling and the ELK layout. Call it once per format and conversation, before the first diagram in that format; the reference stays valid for the rest of the conversation.

• 2026-10-13create_diagramchangeddescription, input schemameaning changed
  before

  Creates and displays an interactive draw.io diagram. Accepts either draw.io XML or Mermaid.js syntax — provide exactly one. **Format decision — this is the first thing to settle before you write anything:** if the diagram type appears on the Mermaid list below, use `mermaid`. Only use `xml` when the diagram type isn't on that list (UI mockups, floorplans, cloud/network/electrical architecture with stencils, hand-placed UML, etc.) or when the user has explicitly asked for draw.io XML. **Use Mermaid** for the following diagram types (all rendered natively, no upstream mermaid runtime): - flowchart / graph (TD, LR, …) - sequenceDiagram - classDiagram - stateDiagram / stateDiagram-v2 - erDiagram - gantt - pie - journey (user-journey) - gitGraph - mindmap - timeline - quadrantChart - xychart-beta - sankey-beta - requirementDiagram - C4Context / C4Container / C4Component - block-beta - architecture-beta - packet-beta - kanban - radar-beta - treemap-beta - treeview-beta (draw.io-specific) - venn (draw.io-specific) — syntax: `venn` then `set A ["Label"]` for each set, `union A,B` for declared overlaps (informational), and `text A` / `text A,B` followed by `["Region label"]` for text inside a region. Do NOT use `A AND B[...]` or `A["..."]` shorthand — those lines are ignored. - ishikawa (draw.io-specific) - zenuml **Strong default: use Mermaid for every diagram type on that list above.** Mermaid is simpler, more reliable, and the native Mermaid layout handles positioning and routing for you. For a flowchart, state diagram, sequence, ER, class, gantt, gitGraph, mindmap, etc. — reach for the `mermaid` parameter, not `xml`. Do not default to XML for flowcharts. **Use XML** when the diagram type isn't on the Mermaid list above OR when the user explicitly asks for XML / draw.io format. Typical cases where XML is the right choice: - **UI mockups / wireframes / screen designs** — buttons, form fields, sidebars, modal dialogs (`shape=mxgraph.bootstrap.*`, `shape=mxgraph.ios.*`, `shape=mxgraph.android.*`) - **Floor plans / seating charts / room layouts** — rooms, doors, furniture (`shape=mxgraph.floorplan.*`) - **Cloud architecture** with AWS / Azure / GCP / Kubernetes icons (`shape=mxgraph.aws4.*`, `shape=mxgraph.azure.*`, `shape=mxgraph.gcp2.*`, `shape=mxgraph.kubernetes.*`) - **Network topology** with Cisco / Rack / networking shapes (`shape=mxgraph.cisco*.*`, `shape=mxgraph.rack.*`, `shape=mxgraph.networking.*`) - **P&ID / electrical / engineering schematics** (`shape=mxgraph.pid2.*`, `shape=mxgraph.electrical.*`, `shape=mxgraph.mscae.*`) - **Swimlanes / pools** with custom colors and hand-placed contents - **UML class / component / deployment diagrams** where positioning carries meaning - **Venn diagrams, quadrant charts, concept maps** with custom regions — anything where hand-placed geometry is the point - **Any diagram requiring specific colors, fonts, stencils, or layouts** that Mermaid can't control precisely Call `search_shapes` first when you need industry icons (AWS / Azure / Cisco / P&ID / Kubernetes / floorplan / mockup / electrical) or brand logos / pictorial concept icons (e.g. 'react', 'slack', 'shopping cart') to find the correct `style` string for each shape. --- **XML reasoning discipline (applies ONLY when you chose XML — skip this whole section if you're using Mermaid):** Your job in XML is declaring logical structure — nodes, edges, labels, groupings. Follow these steps in order: (1) **Decide `postLayout` and `routing` FIRST, before writing any XML.** If the XML diagram is a flowchart, state diagram, decision tree, or any directional/hierarchical process diagram (which you should rarely be writing as XML — prefer Mermaid), you MUST pass `postLayout: "elk"` (add `direction: "horizontal"` when the flow is drawn left-to-right; it defaults to vertical). Omit `postLayout` only when the layout carries hand-crafted meaning (swimlanes, containers, architecture, UML) — the

  after · 10% of words in common

  Creates and displays an interactive draw.io diagram from Mermaid.js syntax or draw.io XML — provide exactly one. **Choose the format first.** Use `mermaid` for every type it has a header for: flowchart/graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, xychart-beta, sankey-beta, requirementDiagram, C4Context/C4Container/C4Component, block-beta, architecture-beta, packet-beta, kanban, radar-beta, treemap-beta, treeView-beta, venn-beta, ishikawa-beta, zenuml, wardley-beta, eventmodeling. Don't write flowcharts as XML. Use `xml` for everything else (UI mockups, floor plans, cloud/network/P&ID/electrical diagrams with stencils, swimlanes, UML with deliberate placement, exact positions or colors) and whenever the user asks for draw.io XML or no Mermaid; then keep using 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 (&lt; &gt; &amp; &quot;). No XML comments. Don't add waypoints: set `postLayout: "elk"` for flowchart-like XML, `routing: "libavoid"` for a hand-placed layout.

• 2026-10-01search_shapeschangedoutput schema

Full history: list_changes · trend: quality JSON.

Checks run on what our credential-free, read-only probes observe; tools are never called and no code audit is performed. How it is computed.