fcp-drawio
The fcp-drawio server enables creating, editing, querying, and managing draw.io diagrams through high-level, intent-based commands — no manual XML, IDs, or geometry required.
Diagram Manipulation (drawio)
Add shapes of 12 types (svc, db, api, queue, cloud, actor, doc, box, decision, circle, process, triangle) with optional themes, positions, and sizes
Connect shapes with styled edges (solid, dashed, dotted, animated, thick, curved, orthogonal) and arrow types (directed, bidirectional, undirected)
Remove shapes or connections individually or via selectors (e.g.,
@type:db,@orphan,@all)Style shapes with fill/stroke/font colors, bold/italic, and predefined color themes (blue, green, red, orange, purple, yellow, gray, dark)
Move, resize, and swap shapes; auto-position relative to others using
near:/dir:heuristics with collision avoidanceAuto-layout using ELK algorithms (layered, force, tree) with configurable direction (TB/LR/BT/RL)
Group/ungroup shapes, manage pages and layers (add, switch, remove, show, hide)
Define reusable custom component types and load shape packs
Export diagrams as PNG, SVG, or PDF (inline or file)
Diagram Inspection (drawio_query)
Query current diagram state: list shapes, describe nodes, inspect connections, find elements by type/group/position/recency
Session Management (drawio_session)
Create new diagrams, open existing
.drawiofiles, save or save-asUndo/redo operations or revert to a named checkpoint
Help (drawio_help)
Retrieve the full command reference with all operations, options, and examples
Allows creating and editing draw.io diagrams through intent-level commands, enabling AI agents to build architecture diagrams, flowcharts, and system maps by describing high-level operations.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@fcp-drawioDraw a diagram: blue AuthService connects to green UserDB"
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.
fcp-drawio
MCP server for creating and editing draw.io diagrams through intent-level commands.
What It Does
fcp-drawio lets LLMs build architecture diagrams, flowcharts, and system maps by describing what they want -- not how to draw it. The LLM sends high-level operations like add svc AuthService theme:blue and connect AuthService -> UserDB, and fcp-drawio renders them into fully styled draw.io XML, positioning shapes with near:/dir: heuristics and collision avoidance by default -- or hands off to an ELK auto-layout pass on demand via the layout op. Built on the FCP framework.
Related MCP server: AI Charts
Quick Example
drawio([
'add svc AuthService theme:blue',
'add db UserDB theme:green near:AuthService dir:right',
'connect AuthService -> UserDB label:queries',
])Response:
+svc AuthService @(200,200 140x60) blue
+db UserDB @(400,200 120x80) green
~AuthService->UserDB "queries" solid
digest: 3s 1e 0gThis produces a draw.io diagram with a blue rounded-rectangle service node, a green database cylinder, and a labeled edge between them -- all positioned automatically.
Available MCP Tools
Tool | Purpose |
| Batch mutations -- add shapes, connect, style, group, layout |
| Inspect the diagram -- map, list, describe, connections, find |
| Lifecycle -- new, open, save, checkpoint, undo, redo |
| Full reference card |
Component Library
Type | Shape | Use For |
| Rounded rect | Services, components |
| Cylinder | Databases, storage |
| Hexagon | APIs, gateways |
| Parallelogram | Queues, streams |
| Cloud | External services |
| Person | Users, personas |
| Document | Files, reports |
| Rectangle | Generic |
| Diamond | Decisions, conditions |
| Ellipse | States, events |
| Double-bordered rect | Predefined processes |
| Triangle | Warnings, deltas |
Themes
Apply color themes to any shape: blue, green, red, orange, purple, yellow, gray, dark.
Installation
Requires Node >= 22.
npm install @ostk-ai/fcp-drawioMCP Client Configuration
{
"mcpServers": {
"drawio": {
"command": "node",
"args": ["node_modules/@ostk-ai/fcp-drawio/dist/index.js"]
}
}
}Architecture
4-layer architecture:
MCP Server (Intent Layer)
src/server/ -- Parses op strings, resolves refs, dispatches
|
Semantic Model (Domain Brain)
src/model/ -- In-memory entity graph, event sourcing
|
Layout
Default: near/dir positioning heuristics + collision-pushing
On demand: `layout` op runs elkjs (layered/force/tree, flow:TB/LR/BT/RL)
|
Serialization (XML)
src/serialization/ -- Semantic model <-> mxGraphModel XMLSupporting modules:
src/parser/-- Operation string parsersrc/lib/-- Component library, themes, stencils, draw.io CLI integration
See docs/examples/ for example diagrams (including the multiplayer game backend) and docs/ for design documents.
Development
npm install
npm run build # tsc
npm test # vitest, 498 tests
npm run test:watch
npm run dev # tsc --watchLicense
MIT
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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/os-tack/fcp-drawio'
If you have feedback or need assistance with the MCP directory API, please join our Discord server