What can you do with this server?

The drawio server lets you create and display interactive diagrams directly inline in chat, supporting both Mermaid and draw.io XML syntax. * show_inline_drawio: Generate diagrams from Mermaid (28+ types: flowcharts, sequence, ER, class, state, Gantt, mind maps, C4, Kanban, Sankey, timelines, etc.) or draw.io XML. Diagrams render in an interactive iframe with zoom, pan, fullscreen, and an "Open in draw.io" button for further editing and export (PNG, SVG, PDF). * search_shapes: Search 10,000+ industry icons (AWS, Azure, GCP, Cisco, Kubernetes, P&ID, BPMN, electrical, etc.) and retrieve exact style strings for use in XML diagrams. * Advanced layout & routing: Apply postLayout: "elk" for automatic hierarchical re-layout, and routing: "libavoid" for obstacle-avoiding orthogonal edge routing while preserving node positions. * Advanced XML features: Containers, swimlanes, layers, cross-functional tables, custom styles, metadata/placeholders, and industry-specific stencils for cloud architecture, network topology, P&ID schematics, UI mockups, and floor plans. * Format guidance: Default to Mermaid for standard diagrams; use XML for precise layouts, cloud/network/electrical diagrams, or when explicitly requested.

Which integrations are available for this server?

Allows creating and editing diagrams using draw.io (diagrams.net) with inline viewer, supporting Mermaid and XML formats, and providing access to shape libraries including Cisco and AWS icons.

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@drawio create a flowchart for user login using mermaid" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

drawio

by achmadya-dev

Overview Schema Related Servers Score Discussions

TypeScript

Remote

@achmadya-dev/mcp-drawio

MCP server for draw.io. Create diagrams via LLM — rendered inline in chat using MCP Apps.

Built on @achmadya-dev/mcp-core and @modelcontextprotocol/ext-apps.

Requirements

Node.js ≥ 20
MCP host with MCP Apps support (e.g. Cursor)

Related MCP server: vaults-diagram-tools

Install via npx

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@achmadya-dev/mcp-drawio"]
    }
  }
}

Tools

Tool	Description
`show_inline_drawio`	Render a diagram inline in chat from Mermaid or draw.io XML
`search_shapes`	Search 10k+ industry icon shapes (AWS, Cisco, P&ID, …) for XML diagrams

search_shapes is registered when the bundled shape index is present (included in the npm package after build).

`show_inline_drawio`

Provide exactly one of mermaid or xml:

Input	Use for
`mermaid`	Flowchart, sequence, ER, class, state, gantt, mindmap, C4, and 25+ other types
`xml`	Hand-placed layouts, swimlanes, cloud/network/P&ID stencils, UI mockups

Optional layout passes (XML only):

Option	Effect
`postLayout: "elk"`	Re-layout vertices with ELK (flowcharts, pipelines, hierarchical diagrams)
`direction: "vertical" \| "horizontal"`	ELK flow direction (XML only; defaults to vertical)
`routing: "libavoid"`	Obstacle-avoiding edge routing without moving vertices

For industry icons in XML diagrams, call search_shapes first and use the returned style strings in mxCell attributes. References: xml-reference.md, mermaid-reference.md.

Inline viewer

The create_diagram tool renders an interactive iframe in chat:

Zoom, pan, and fit-to-view
Fullscreen mode
Open in draw.io — opens the diagram in app.diagrams.net for editing and export (PNG, SVG, PDF)

To save a diagram as an image, use Open in draw.io → File → Export as.

Develop from source

git clone https://github.com/achmadya-dev/mcp-drawio.git
cd drawio-mcp
pnpm install
pnpm run build
pnpm start

Local Cursor config (.cursor/mcp.json):

{
  "mcpServers": {
    "drawio": {
      "command": "node",
      "args": ["${workspaceFolder}/dist/index.js"],
      "cwd": "${workspaceFolder}"
    }
  }
}

After changing viewer or server code, rebuild and restart the MCP server in Cursor.

Scripts

Command	Description
`pnpm run build`	Compile TypeScript and copy `src/assets/` → `dist/assets/`
`pnpm start`	Run MCP server (stdio)
`pnpm test`	Run tests
`pnpm run generate:shapes`	Regenerate shape search index (requires network)
`pnpm run format`	Format with Prettier

Environment

Variable	Description
`DOMAIN`	MCP Apps iframe domain (passed in resource `_meta.ui`)
`VIEWER_PATH`	Optional path to a local `viewer-static.min.js` override
`ELK_PATH`	Optional path to a local `drawio-elk.min.js` override
`MERMAID_PATH`	Optional path to a local `drawio-mermaid.min.js` override

The 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.

Project layout

src/
  index.ts              MCP server entry (stdio, MCP Apps)
  drawio/
    drawio.ts           Bundle loader (HTML, shape index, references)
    utils.ts            createDiagram, searchShapes, validation
    viewer/html.ts      Inline MCP App viewer (draw.io + MCP SDK)
  tools/
    search_shapes.ts    Shape search tool (defineTool)
  assets/
    shared/             Tool description references (XML, Mermaid)
    shape-search/       Pre-built shape index (~10k shapes)
    vendor/app/         libavoid WASM (edge routing in viewer)
  scripts/
    copy-assets.ts      Build-time asset copy
    generate-shape-index.ts
dist/                   Published to npm

Diagram formats (quick guide)

Need	Approach
Flowchart, sequence, ER, class, …	Mermaid via `show_inline_drawio`
AWS / Azure / Cisco / P&ID icons	XML + `search_shapes`
Edit or export PNG/SVG	Open in draw.io in the inline viewer

libavoid vendor refresh

Browser WASM lives in src/assets/vendor/app/libavoid/. To refresh:

cd src/assets/vendor/app/libavoid
npm pack libavoid-js && tar -xzf libavoid-js-*.tgz
cp package/dist/index.js libavoid.min.js
cp package/dist/libavoid.wasm libavoid.wasm

Regenerate shape index (optional, when draw.io releases new shapes):

pnpm run generate:shapes
pnpm run build

Release

Uses Changesets:

pnpm changeset
pnpm run version-packages

Push to main → GitHub opens a Version packages PR → merge → npm publish via CI.

Requires NPM_TOKEN secret on the repository.

License

Apache-2.0

Install Server

license - permissive license

quality

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

0dRelease cycle

9Releases (12mo)

Commit activity

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

search_shapesA
show_inline_drawioAApp

Latest Blog Posts

Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
open source
OpenAI
Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/achmadya-dev/mcp-drawio'

If you have feedback or need assistance with the MCP directory API, please join our Discord server