{"id":49181259,"url":"https://github.com/jgraph/drawio-mcp","last_synced_at":"2026-04-23T01:30:51.126Z","repository":{"id":338021299,"uuid":"1148214569","full_name":"jgraph/drawio-mcp","owner":"jgraph","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-17T16:56:10.000Z","size":793,"stargazers_count":3021,"open_issues_count":0,"forks_count":181,"subscribers_count":12,"default_branch":"main","last_synced_at":"2026-04-17T18:31:44.060Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jgraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-02T17:56:33.000Z","updated_at":"2026-04-17T17:30:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/jgraph/drawio-mcp","commit_stats":null,"previous_names":["jgraph/drawio-mcp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jgraph/drawio-mcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgraph%2Fdrawio-mcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgraph%2Fdrawio-mcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgraph%2Fdrawio-mcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgraph%2Fdrawio-mcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgraph","download_url":"https://codeload.github.com/jgraph/drawio-mcp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgraph%2Fdrawio-mcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32162601,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T17:06:48.269Z","status":"ssl_error","status_checked_at":"2026-04-22T17:06:19.037Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-23T01:30:48.858Z","updated_at":"2026-04-23T01:30:51.110Z","avatar_url":"https://github.com/jgraph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Draw.io MCP Server\n\nThe official [draw.io](https://www.draw.io) MCP (Model Context Protocol) server that enables LLMs to create and open diagrams in the draw.io editor.\n\n## Four Ways to Create Diagrams\n\nThis repository offers four approaches for integrating draw.io with AI assistants. Pick the one that fits your setup:\n\n| | [MCP App Server](#mcp-app-server) | [MCP Tool Server](#mcp-tool-server) | [Skill + CLI](#skill--cli) | [Project Instructions](#alternative-project-instructions-no-mcp-required) |\n|---|---|---|---|---|\n| **How it works** | Renders diagrams inline in chat | Opens diagrams in your browser | Generates `.drawio` files, optional PNG/SVG/PDF export | Claude generates draw.io URLs via Python |\n| **Diagram output** | Interactive viewer embedded in conversation | draw.io editor in a new tab | `.drawio` or `.drawio.png` / `.svg` / `.pdf` | Clickable link to draw.io |\n| **Requires installation** | No (hosted at `mcp.draw.io`) | Yes (npm package) | Copy skill file + draw.io Desktop | No — just paste instructions |\n| **Supports XML, CSV, Mermaid** | XML only | ✅ All three | XML only (native format) | ✅ All three |\n| **Editable in draw.io** | Via \"Open in draw.io\" button | ✅ Directly | ✅ Directly | Via link |\n| **Works with** | Claude.ai, VS Code, any MCP Apps host | Claude Desktop, any MCP client | Claude Code | Claude.ai (with Projects) |\n| **Best for** | Inline previews in chat | Local desktop workflows | Local development workflows | Quick setup, no install needed |\n\n---\n\n## MCP App Server\n\nThe MCP App server renders draw.io diagrams **inline** in AI chat interfaces using the [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps) protocol. Instead of opening a browser tab, diagrams appear directly in the conversation as interactive iframes.\n\nThe official hosted endpoint is available at:\n\n```\nhttps://mcp.draw.io/mcp\n```\n\nAdd this URL as a remote MCP server in Claude.ai or any MCP Apps-compatible host — no installation required.\n\nYou can also run the server locally via Node.js or deploy your own instance to Cloudflare Workers.\n\n**Tools:**\n- **`create_diagram`** — Renders draw.io XML as an interactive diagram inline in chat\n- **`search_shapes`** — Searches 10,000+ shapes across all draw.io libraries (AWS, Azure, GCP, P\u0026ID, electrical, Cisco, Kubernetes, UML, BPMN, etc.) by keyword. Returns exact style strings that can be used directly in XML. Use this to find the correct shape before calling `create_diagram`.\n\n**[Full documentation →](mcp-app-server/README.md)**\n\n\u003e **Note:** Inline diagram rendering requires an MCP host that supports the MCP Apps extension. In hosts without MCP Apps support, the tool still works but returns the XML as text.\n\n---\n\n## MCP Tool Server\n\nThe original MCP server that opens diagrams directly in the draw.io editor. Supports XML, CSV, and Mermaid.js formats with lightbox and dark mode options. Published as [`@drawio/mcp`](https://www.npmjs.com/package/@drawio/mcp) on npm.\n\nQuick start: `npx @drawio/mcp`\n\n**[Full documentation →](mcp-tool-server/README.md)**\n\n---\n\n## Skill + CLI\n\nA Claude Code skill that generates native `.drawio` files, with optional export to PNG, SVG, or PDF (with embedded XML so the exported file remains editable in draw.io). No MCP setup required — just copy a skill file.\n\nBy default, the skill writes a `.drawio` file and opens it in draw.io. Mention a format in your request (`/drawio png ...`) to export using the draw.io desktop CLI with `--embed-diagram`.\n\n**[Full documentation →](skill-cli/README.md)**\n\n---\n\n## Alternative: Project Instructions (No MCP Required)\n\nAn alternative approach that works **without installing anything**. Add instructions to a Claude Project that teach Claude to generate draw.io URLs using Python code execution. No MCP server, no desktop app — just paste and go.\n\n**[Full documentation →](project-instructions/README.md)**\n\n---\n\n## XML Reference (Single Source of Truth)\n\nThe draw.io XML generation reference — covering edge routing, containers, layers, tags, metadata, dark mode, style properties, and XML well-formedness — lives in a single canonical file:\n\n**[`shared/xml-reference.md`](shared/xml-reference.md)**\n\nAll four approaches above use this file as their single source of truth for LLM prompts:\n\n| Approach | How it accesses the reference |\n|----------|-------------------------------|\n| MCP App Server | Reads the file at startup / build time and includes it in the tool description |\n| MCP Tool Server | Reads the file at startup (from repo or bundled copy via `prepack`) |\n| Skill + CLI | References the [GitHub raw URL](https://raw.githubusercontent.com/jgraph/drawio-mcp/main/shared/xml-reference.md) |\n| Project Instructions | Users copy its contents into their Claude Project |\n\nWhen updating XML generation guidance, edit only `shared/xml-reference.md` — changes propagate to all consumers automatically.\n\n---\n\n## Shape Search Index\n\nThe `search_shapes` tool is powered by a pre-built index of all draw.io shapes. The index is generated from the draw.io client source code (`app.min.js`) by running all sidebar palette initializations in Node.js via jsdom and capturing the shape data.\n\n```bash\n# Generate the shape search index (requires ../drawio-dev checkout)\ncd shape-search\nnpm install\nDRAWIO_DEV_PATH=../../drawio-dev node generate-index.js\n\n# Rebuild the MCP App Server worker to embed the updated index\ncd ../mcp-app-server\nnpm run build:worker\n```\n\n**When to regenerate:** Re-run `generate-index.js` after updating `drawio-dev` (new shapes, renamed stencils, updated style strings). The script loads `app.min.js` and all sidebar palettes, so it captures any changes to the shape libraries automatically.\n\nThe generated `search-index.json` is committed to the repository so that the MCP App Server can be built and deployed without a local `drawio-dev` checkout.\n\n---\n\n## Development\n\n```bash\n# MCP App Server\ncd mcp-app-server\nnpm install\nnpm start\n\n# MCP Tool Server\ncd mcp-tool-server\nnpm install\nnpm start\n```\n\n## Related Resources\n\n- [draw.io](https://www.draw.io) - Free online diagram editor\n- [draw.io Desktop](https://github.com/jgraph/drawio-desktop) - Desktop application\n- [@drawio/mcp on npm](https://www.npmjs.com/package/@drawio/mcp) - This package on npm\n- [drawio-mcp on GitHub](https://github.com/jgraph/drawio-mcp) - Source code repository\n- [Mermaid.js Documentation](https://mermaid.js.org/intro/)\n- [MCP Specification](https://modelcontextprotocol.io/)\n- [MCP Apps Extension](https://modelcontextprotocol.io/docs/extensions/apps)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgraph%2Fdrawio-mcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgraph%2Fdrawio-mcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgraph%2Fdrawio-mcp/lists"}