{"_id":"@achmadya-dev/mcp-drawio","_rev":"12-433b97e61737989fc87702107b95553e","name":"@achmadya-dev/mcp-drawio","dist-tags":{"latest":"0.2.4"},"versions":{"0.2.2":{"name":"@achmadya-dev/mcp-drawio","version":"0.2.2","keywords":["mcp","model-context-protocol","drawio","draw.io","diagrams","mermaid","cursor"],"author":{"name":"achmadya"},"license":"Apache-2.0","_id":"@achmadya-dev/mcp-drawio@0.2.2","maintainers":[{"name":"madyardwn","email":"achmadya.dev@gmail.com"}],"homepage":"https://github.com/achmadya-dev/mcp-drawio#readme","bugs":{"url":"https://github.com/achmadya-dev/mcp-drawio/issues"},"bin":{"mcp-drawio":"dist/index.js"},"dist":{"shasum":"df768c155fdc57b1fc097b14720356bf6d2c59a4","tarball":"https://registry.npmjs.org/@achmadya-dev/mcp-drawio/-/mcp-drawio-0.2.2.tgz","fileCount":38,"integrity":"sha512-lLs92p+j5XhXRJaQB8B+rZoQNRreDxDOiTAn9JYvcy1TMX0RUOMLatA+w5kdkTMSyWMyL8BkjjQQfysCgD+0Hw==","signatures":[{"sig":"MEUCIQCE2Ixo+mEgcHD8Qk+u/MD6f0JrVTuF4lnOa73xPExBhwIgTtPp2pKMlwKLI9teebDXZGqx/9NvKfAwIEwGhXYQ0qE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5728910},"main":"dist/index.js","type":"module","_from":"file:achmadya-dev-mcp-drawio-0.2.2.tgz","types":"./dist/index.d.ts","engines":{"node":">=20"},"scripts":{"test":"node --experimental-vm-modules node_modules/jest/bin/jest.js","build":"tsc -p tsconfig.build.json && node dist/scripts/copy-assets.js","start":"node dist/index.js","format":"prettier --write .","changeset":"changeset","format:check":"prettier --check .","generate:shapes":"tsx src/scripts/generate-shape-index.ts","publish-packages":"pnpm run build && changeset publish","version-packages":"changeset version"},"_npmUser":{"name":"madyardwn","email":"achmadya.dev@gmail.com"},"_resolved":"/tmp/98de2213a9421637a2ae315777c142a0/achmadya-dev-mcp-drawio-0.2.2.tgz","_integrity":"sha512-lLs92p+j5XhXRJaQB8B+rZoQNRreDxDOiTAn9JYvcy1TMX0RUOMLatA+w5kdkTMSyWMyL8BkjjQQfysCgD+0Hw==","repository":{"url":"git+https://github.com/achmadya-dev/mcp-drawio.git","type":"git"},"_npmVersion":"11.13.0","description":"Model Context Protocol (MCP) server for draw.io — render diagrams inline in chat","directories":{},"_nodeVersion":"24.16.0","dependencies":{"zod":"4.3.6","pako":"^2.1.0","@achmadya-dev/mcp-core":"^0.5.0","@modelcontextprotocol/ext-apps":"^1.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.19.0","jest":"30.4.2","husky":"9.1.7","jsdom":"^26.1.0","ts-jest":"29.4.11","prettier":"^3.6.2","typescript":"5.7.2","@types/jest":"30.0.0","@types/node":"22.10.0","@types/pako":"^2.0.4","@types/jsdom":"^28.0.3","@jest/globals":"30.4.1","@types/express":"^5.0.0","@changesets/cli":"2.29.8"},"_npmOperationalInternal":{"tmp":"tmp/mcp-drawio_0.2.2_1781948425504_0.5302498358016248","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@achmadya-dev/mcp-drawio","version":"0.2.3","keywords":["mcp","model-context-protocol","drawio","draw.io","diagrams","mermaid","cursor"],"author":{"name":"achmadya"},"license":"Apache-2.0","_id":"@achmadya-dev/mcp-drawio@0.2.3","maintainers":[{"name":"madyardwn","email":"achmadya.dev@gmail.com"}],"homepage":"https://github.com/achmadya-dev/mcp-drawio#readme","bugs":{"url":"https://github.com/achmadya-dev/mcp-drawio/issues"},"bin":{"mcp-drawio":"dist/index.js"},"dist":{"shasum":"078f1e05f64c014dd6aadfd99ca2d2b79472a6af","tarball":"https://registry.npmjs.org/@achmadya-dev/mcp-drawio/-/mcp-drawio-0.2.3.tgz","fileCount":38,"integrity":"sha512-5k2inHiV+BAT3lhRdgPpDk74FWfSHrzqhATcW6S0+FJ/vVAoW+8VNksk9RAwxhq5AjOgOREiIGyWio3ZDThVwA==","signatures":[{"sig":"MEQCIFW7QgZVecyZbKtU+qsnL6+y9b8PKmnUf5FcKuiQ3YHfAiAS09MJL9PW6mIuL3eQlijMH9c8VpJ76r6P3T49Z8FHaA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5728488},"main":"dist/index.js","type":"module","_from":"file:achmadya-dev-mcp-drawio-0.2.3.tgz","types":"./dist/index.d.ts","engines":{"node":">=20"},"scripts":{"test":"node --experimental-vm-modules node_modules/jest/bin/jest.js","build":"tsc -p tsconfig.build.json && node dist/scripts/copy-assets.js","start":"node dist/index.js","format":"prettier --write .","changeset":"changeset","format:check":"prettier --check .","generate:shapes":"tsx src/scripts/generate-shape-index.ts","publish-packages":"pnpm run build && changeset publish","version-packages":"changeset version"},"_npmUser":{"name":"madyardwn","email":"achmadya.dev@gmail.com"},"_resolved":"/tmp/23d2f453ac9ee633a04b22dea8a5a463/achmadya-dev-mcp-drawio-0.2.3.tgz","_integrity":"sha512-5k2inHiV+BAT3lhRdgPpDk74FWfSHrzqhATcW6S0+FJ/vVAoW+8VNksk9RAwxhq5AjOgOREiIGyWio3ZDThVwA==","repository":{"url":"git+https://github.com/achmadya-dev/mcp-drawio.git","type":"git"},"_npmVersion":"11.13.0","description":"Model Context Protocol (MCP) server for draw.io — render diagrams inline in chat","directories":{},"_nodeVersion":"24.16.0","dependencies":{"zod":"4.3.6","pako":"^2.1.0","@achmadya-dev/mcp-core":"^0.6.0","@modelcontextprotocol/ext-apps":"^1.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.19.0","jest":"30.4.2","husky":"9.1.7","jsdom":"^26.1.0","ts-jest":"29.4.11","prettier":"^3.6.2","typescript":"5.7.2","@types/jest":"30.0.0","@types/node":"22.10.0","@types/pako":"^2.0.4","@types/jsdom":"^28.0.3","@jest/globals":"30.4.1","@types/express":"^5.0.0","@changesets/cli":"2.29.8"},"_npmOperationalInternal":{"tmp":"tmp/mcp-drawio_0.2.3_1782005511838_0.8185899269431187","host":"s3://npm-registry-packages-npm-production"}},"0.2.4":{"name":"@achmadya-dev/mcp-drawio","version":"0.2.4","description":"Model Context Protocol (MCP) server for draw.io — render diagrams inline in chat","type":"module","author":{"name":"achmadya"},"license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/achmadya-dev/mcp-drawio.git"},"keywords":["mcp","model-context-protocol","drawio","draw.io","diagrams","mermaid","cursor"],"main":"dist/index.js","bin":{"mcp-drawio":"dist/index.js"},"publishConfig":{"access":"public"},"engines":{"node":">=20"},"dependencies":{"@achmadya-dev/mcp-core":"^0.8.0","@modelcontextprotocol/ext-apps":"^1.7.0","pako":"^2.1.0","zod":"4.3.6"},"devDependencies":{"@changesets/cli":"2.29.8","@jest/globals":"30.4.1","@types/express":"^5.0.0","@types/jest":"30.0.0","@types/jsdom":"^28.0.3","@types/node":"22.10.0","@types/pako":"^2.0.4","husky":"9.1.7","jest":"30.4.2","jsdom":"^26.1.0","prettier":"^3.6.2","ts-jest":"29.4.11","tsx":"^4.19.0","typescript":"5.7.2"},"scripts":{"build":"tsc -p tsconfig.build.json && node dist/scripts/copy-assets.js","test":"node --experimental-vm-modules node_modules/jest/bin/jest.js","start":"node dist/index.js","generate:shapes":"tsx src/scripts/generate-shape-index.ts","format":"prettier --write .","format:check":"prettier --check .","changeset":"changeset","version-packages":"changeset version","publish-packages":"pnpm run build && changeset publish"},"types":"./dist/index.d.ts","_id":"@achmadya-dev/mcp-drawio@0.2.4","bugs":{"url":"https://github.com/achmadya-dev/mcp-drawio/issues"},"homepage":"https://github.com/achmadya-dev/mcp-drawio#readme","_integrity":"sha512-QOZtAV12Pc/DBdZa6V73KO6ACeIAp8UzRgmT8lI8UTZEur58UAdk1zBVGkjj6NFmU4uOgDypE2LRzSoE65As2g==","_resolved":"/tmp/4b1fbaf4c5bf97df283f1b64e451c8af/achmadya-dev-mcp-drawio-0.2.4.tgz","_from":"file:achmadya-dev-mcp-drawio-0.2.4.tgz","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-QOZtAV12Pc/DBdZa6V73KO6ACeIAp8UzRgmT8lI8UTZEur58UAdk1zBVGkjj6NFmU4uOgDypE2LRzSoE65As2g==","shasum":"d2fd4fa0d2abec686ab90d2396a314c34760f7ab","tarball":"https://registry.npmjs.org/@achmadya-dev/mcp-drawio/-/mcp-drawio-0.2.4.tgz","fileCount":38,"unpackedSize":5728488,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDTjzuUYPwHkczlwBNXnReHUj2TFINrTTlQLUPrT9/6zAiAiUhsXV9BAdr+/ZcE7MT4VMId7P0dBce9uOkNBFsw01A=="}]},"_npmUser":{"name":"madyardwn","email":"achmadya.dev@gmail.com"},"directories":{},"maintainers":[{"name":"madyardwn","email":"achmadya.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mcp-drawio_0.2.4_1782027908789_0.31951662151137517"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-20T09:40:25.376Z","modified":"2026-06-21T07:45:09.106Z","0.1.0":"2026-06-20T05:35:54.969Z","0.1.1":"2026-06-20T06:05:58.614Z","0.1.2":"2026-06-20T06:11:40.795Z","0.1.3":"2026-06-20T07:55:44.708Z","0.2.0":"2026-06-20T08:34:57.921Z","0.2.1":"2026-06-20T08:50:24.058Z","0.2.2":"2026-06-20T09:40:25.676Z","0.2.3":"2026-06-21T01:31:52.050Z","0.2.4":"2026-06-21T07:45:08.979Z"},"bugs":{"url":"https://github.com/achmadya-dev/mcp-drawio/issues"},"author":{"name":"achmadya"},"license":"Apache-2.0","homepage":"https://github.com/achmadya-dev/mcp-drawio#readme","keywords":["mcp","model-context-protocol","drawio","draw.io","diagrams","mermaid","cursor"],"repository":{"type":"git","url":"git+https://github.com/achmadya-dev/mcp-drawio.git"},"description":"Model Context Protocol (MCP) server for draw.io — render diagrams inline in chat","maintainers":[{"name":"madyardwn","email":"achmadya.dev@gmail.com"}],"readme":"# @achmadya-dev/mcp-drawio\n\nMCP server for [draw.io](https://www.draw.io). Create diagrams via LLM — rendered **inline in chat** using [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps).\n\nBuilt on [`@achmadya-dev/mcp-core`](https://www.npmjs.com/package/@achmadya-dev/mcp-core) and [`@modelcontextprotocol/ext-apps`](https://www.npmjs.com/package/@modelcontextprotocol/ext-apps).\n\n## Requirements\n\n- Node.js **≥ 20**\n- MCP host with MCP Apps support (e.g. **Cursor**)\n\n## Install via npx\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@achmadya-dev/mcp-drawio\"]\n    }\n  }\n}\n```\n\n## Tools\n\n| Tool | Description |\n| ---- | ----------- |\n| `show_inline_drawio` | Render a diagram inline in chat from **Mermaid** or draw.io **XML** |\n| `search_shapes` | Search 10k+ industry icon shapes (AWS, Cisco, P&ID, …) for XML diagrams |\n\n`search_shapes` is registered when the bundled shape index is present (included in the npm package after build).\n\n### `show_inline_drawio`\n\nProvide **exactly one** of `mermaid` or `xml`:\n\n| Input | Use for |\n| ----- | ------- |\n| `mermaid` | Flowchart, sequence, ER, class, state, gantt, mindmap, C4, and [25+ other types](src/assets/shared/mermaid-reference.md) |\n| `xml` | Hand-placed layouts, swimlanes, cloud/network/P&ID stencils, UI mockups |\n\nOptional layout passes (**XML only**):\n\n| Option | Effect |\n| ------ | ------ |\n| `postLayout: \"elk\"` | Re-layout vertices with ELK (flowcharts, pipelines, hierarchical diagrams) |\n| `direction: \"vertical\" \\| \"horizontal\"` | ELK flow direction (XML only; defaults to vertical) |\n| `routing: \"libavoid\"` | Obstacle-avoiding edge routing without moving vertices |\n\nFor industry icons in XML diagrams, call `search_shapes` first and use the returned `style` strings in `mxCell` attributes. References: [`xml-reference.md`](src/assets/shared/xml-reference.md), [`mermaid-reference.md`](src/assets/shared/mermaid-reference.md).\n\n## Inline viewer\n\nThe `create_diagram` tool renders an interactive iframe in chat:\n\n- Zoom, pan, and fit-to-view\n- Fullscreen mode\n- **Open in draw.io** — opens the diagram in [app.diagrams.net](https://app.diagrams.net) for editing and export (PNG, SVG, PDF)\n\nTo save a diagram as an image, use **Open in draw.io → File → Export as**.\n\n## Develop from source\n\n```bash\ngit clone https://github.com/achmadya-dev/mcp-drawio.git\ncd drawio-mcp\npnpm install\npnpm run build\npnpm start\n```\n\nLocal Cursor config (`.cursor/mcp.json`):\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"node\",\n      \"args\": [\"${workspaceFolder}/dist/index.js\"],\n      \"cwd\": \"${workspaceFolder}\"\n    }\n  }\n}\n```\n\nAfter changing viewer or server code, rebuild and **restart the MCP server** in Cursor.\n\n### Scripts\n\n| Command | Description |\n| ------- | ----------- |\n| `pnpm run build` | Compile TypeScript and copy `src/assets/` → `dist/assets/` |\n| `pnpm start` | Run MCP server (stdio) |\n| `pnpm test` | Run tests |\n| `pnpm run generate:shapes` | Regenerate shape search index (requires network) |\n| `pnpm run format` | Format with Prettier |\n\n## Environment\n\n| Variable | Description |\n| -------- | ----------- |\n| `DOMAIN` | MCP Apps iframe domain (passed in resource `_meta.ui`) |\n| `VIEWER_PATH` | Optional path to a local `viewer-static.min.js` override |\n| `ELK_PATH` | Optional path to a local `drawio-elk.min.js` override |\n| `MERMAID_PATH` | Optional path to a local `drawio-mermaid.min.js` override |\n\nThe draw.io viewer loads from `https://viewer.diagrams.net` by default (CDN). Optional bundle overrides are useful for offline development or pinning a specific draw.io release.\n\n## Project layout\n\n```\nsrc/\n  index.ts              MCP server entry (stdio, MCP Apps)\n  drawio/\n    drawio.ts           Bundle loader (HTML, shape index, references)\n    utils.ts            createDiagram, searchShapes, validation\n    viewer/html.ts      Inline MCP App viewer (draw.io + MCP SDK)\n  tools/\n    search_shapes.ts    Shape search tool (defineTool)\n  assets/\n    shared/             Tool description references (XML, Mermaid)\n    shape-search/       Pre-built shape index (~10k shapes)\n    vendor/app/         libavoid WASM (edge routing in viewer)\n  scripts/\n    copy-assets.ts      Build-time asset copy\n    generate-shape-index.ts\ndist/                   Published to npm\n```\n\n## Diagram formats (quick guide)\n\n| Need | Approach |\n| ---- | -------- |\n| Flowchart, sequence, ER, class, … | Mermaid via `show_inline_drawio` |\n| AWS / Azure / Cisco / P&ID icons | XML + `search_shapes` |\n| Edit or export PNG/SVG | **Open in draw.io** in the inline viewer |\n\n## libavoid vendor refresh\n\nBrowser WASM lives in `src/assets/vendor/app/libavoid/`. To refresh:\n\n```bash\ncd src/assets/vendor/app/libavoid\nnpm pack libavoid-js && tar -xzf libavoid-js-*.tgz\ncp package/dist/index.js libavoid.min.js\ncp package/dist/libavoid.wasm libavoid.wasm\n```\n\nRegenerate shape index (optional, when draw.io releases new shapes):\n\n```bash\npnpm run generate:shapes\npnpm run build\n```\n\n## Release\n\nUses [Changesets](https://github.com/changesets/changesets):\n\n```bash\npnpm changeset\npnpm run version-packages\n```\n\nPush to `main` → GitHub opens a **Version packages** PR → merge → npm publish via CI.\n\nRequires `NPM_TOKEN` secret on the repository.\n\n## License\n\nApache-2.0\n","readmeFilename":"README.md"}