# draw.io > Create draw.io diagrams in chat from Mermaid or XML, shown live and interactive. 10,000+ shapes. - name: io.draw/mcp - version: 1.4.1 - connection class: R0 (autonomous) - trust: 95/100 - quality: 77/100 (good) - owner: not claimed - descriptor: https://api.protogrid.dev/v1/servers/io.draw%2Fmcp - tools: https://api.protogrid.dev/v1/servers/io.draw%2Fmcp/tools **An agent can connect right now, no human step.** Remote endpoint, no authentication, reachable on the last probe. ## Connection (mcpServers) ```json { "mcpServers": { "draw": { "type": "http", "url": "https://mcp.draw.io/mcp" } } } ``` ## Trust - hygiene: 100 - liveness: 99 - freshness: 100 - provenance: 85 - drivers: +repository +dns-namespace +website +reachable +uptime-98% +updated-1d-ago - Derived from observable signals (official registry feed and our own credential-free probes); no code audit performed. ## Quality 77/100 (good) ### protocol: 75 (weight 25) - warn `protocol.modern`: newest supported version is 2025-11-25; 2026-07-28 not supported, older versions are deprecated until 2027-07-28 - n/a `protocol.stateless`: only applies to 2026-07-28 servers - pass `protocol.transport`: streamable HTTP - n/a `protocol.list_ttl`: only applies to 2026-07-28 servers ### authorization: n/a (weight 15) - n/a `auth.prm`, `auth.as_metadata`, `auth.cimd`: no remote uses OAuth - n/a `auth.secret_in_url`: no templated URL ### tool hygiene: 93 (weight 30) - pass `tools.descriptions`: every tool has a description - warn `tools.description_length`: 1 tools have descriptions over 1,024 characters, which crowds the context - pass `tools.schemas`: every tool has an object input schema - pass `tools.annotations`: 3 of 3 tools declare readOnlyHint or destructiveHint - pass `tools.directory_hints`: every tool declares readOnlyHint, destructiveHint, idempotentHint and openWorldHint - pass `tools.token_cost`: about 2,194 tokens to load every tool - pass `tools.api_dump`: tools are not a one-to-one API dump ### stability: 50 (weight 15) - pass `stability.changes`: 4 tool changes in 30 days - fail `stability.rug_pull`: 1 tools kept their name but changed most of their description in 30 days; review before trusting them ### dependencies: n/a (weight 15) - n/a `deps.known_vulns`, `deps.mcp_sdk_version`, `deps.resolvable`: no npm or PyPI package - tools: 3, about 2,194 tokens to load them all - tool set hash: f5ba0eeac8dbf491b4f153c071ddc21d - tools last changed: 2026-10-17T18:37:59.559Z - badge: [![protogrid quality](https://protogrid.dev/badge/io.draw/mcp.svg)](https://protogrid.dev/servers/io.draw/mcp) - Checks run on what our credential-free, read-only probes observe; tools are never called and no code audit is performed. ### Tool changes - 2026-10-17 `create_diagram` changed (description, inputSchema) - 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: …. Every cell has a unique id. Vertices: vertex="1" with . Edges: edge="1" with source and target, always with a child . Put html=1 in every style and XML-escape HTML in values (< > & "). No XML comments. Don't add waypoints: set `postLayout: "elk"` for flowchart-like XML, `routing: "libavoid"` for a hand-placed layout. - after: 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: …. Every cell has a unique id. Vertices: vertex="1" with . Edges: edge="1" with source and target, always with a child . 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. - 2026-10-13 `get_drawio_reference` added - 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-13 `create_diagram` changed (description, inputSchema) **meaning 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: 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: …. Every cell has a unique id. Vertices: vertex="1" with . Edges: edge="1" with source and target, always with a child . Put html=1 in every style and XML-escape HTML in values (< > & "). No XML comments. Don't add waypoints: set `postLayout: "elk"` for flowchart-like XML, `routing: "libavoid"` for a hand-placed layout. - 2026-10-01 `search_shapes` changed (outputSchema) Full history: https://api.protogrid.dev/v1/servers/io.draw%2Fmcp/changes ## Remotes - https://mcp.draw.io/mcp (streamable-http, auth none, reachable true, uptime30d 0.982906) ## Packages _none_ ## Tools (3) - `create_diagram`: 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: …. Every cell has a unique id. Vertices: vertex="1" with . Edges: edge="1" with source and target, always with a child . 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. - `get_drawio_reference`: 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. - `search_shapes`: Search the draw.io shape library by keywords. Returns matching shapes with their exact style strings, dimensions, and titles. Covers ~10,000 built-in stencils (cloud architecture, network topology, P&ID, electrical, Cisco, Kubernetes, BPMN) and, when those are sparse, supplements results with the draw.io icon service (brand/product logos and general-purpose concept icons, e.g. 'react', 'slack', 'shopping cart', 'solar panel'). Use ONLY for diagrams that need industry-specific, branded, or pictorial icons. Do NOT use for standard diagram types like flowcharts, UML, ERD, org charts, or mind maps — these use basic geometric shapes (rectangles, diamonds, circles, cylinders) that are already covered in the XML reference. Also skip if the user asks to use basic/simple shapes or says not to search. The style string from the results can be used directly in mxCell style attributes.