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 avoidance
Auto-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 .drawio files, save or save-as
Undo/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-drawio Draw 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.
MCP server for creating and editing draw.io diagrams through intent-level commands.
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: drawio-mcp
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.
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 |
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 |
Apply color themes to any shape: blue, green, red, orange, purple, yellow, gray, dark.
Requires Node >= 22.
npm install @ostk-ai/fcp-drawio{
"mcpServers": {
"drawio": {
"command": "node",
"args": ["node_modules/@ostk-ai/fcp-drawio/dist/index.js"]
}
}
}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 parser
src/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.
npm install
npm run build # tsc
npm test # vitest, 498 tests
npm run test:watch
npm run dev # tsc --watchMIT
Execute drawio operations. Each op string follows the FCP verb DSL.
SHAPES: add TYPE LABEL [theme:T] [near:REF dir:DIR] [at:X,Y] [size:WxH] [label:"Display Name"] remove REF | remove @SELECTOR define NAME base:TYPE [theme:T] [badge:"text"] [size:WxH]
CONNECTIONS: connect SRC ARROW TGT [label:"text"] [style:STYLE] [exit:FACE entry:FACE] disconnect SRC -> TGT
APPEARANCE: style REF [fill:#HEX] [stroke:#HEX] [font:#HEX] [fontSize:N] [bold] [italic] label REF "new text" | label SRC -> TGT "new text" badge REF "text" [pos:POSITION]
POSITION: move REF to:X,Y | to:REGION | near:REF dir:DIR resize REF to:WxH swap REF REF layout @all algo:layered|force|tree dir:TB|LR|BT|RL [spacing:N] orient TB|LR|BT|RL
ORGANIZATION: group REF REF ... as:"Group Name" ungroup "Group Name"
STRUCTURE: page add|switch|remove|list "Name" layer create|switch|show|hide|list "Name"
META: checkpoint NAME title "Diagram Title" load list | load PACK
VISUAL: export [inline|file] [fmt:png|svg|pdf] [width:N] [height:N] [page:N] [as:PATH]
NODE TYPES: box plain rectangle (generic) svc rounded rectangle (services, components) circle ellipse (states, events) decision diamond (decisions, conditions) db cylinder (databases, storage) api hexagon (apis, gateways) cloud cloud (external services) actor person shape (users, personas) doc document shape (files, reports) queue parallelogram (queues, streams) triangle triangle (warnings, deltas) process double-bordered rect (predefined processes)
THEMES (FILL / STROKE): blue #dae8fc / #6c8ebf green #d5e8d4 / #82b366 red #f8cecc / #b85450 yellow #fff2cc / #d6b656 orange #ffe6cc / #d79b00 purple #e1d5e7 / #9673a6 gray #f5f5f5 / #666666 dark #1a1a2e / #16213e (light text) white #ffffff / #000000
EDGE STYLES: solid, dashed (- - -), dotted (· · ·), animated, thick, curved, orthogonal Arrows: -> (directed), <-> (bidirectional), -- (undirected) Arrow heads: arrow, open-arrow, diamond, circle, crow-foot, none
SELECTORS: @type:TYPE, @group:NAME, @connected:REF, @recent, @recent:N, @all, @orphan, @page:NAME, @layer:NAME
RESPONSE PREFIXES:
shape created ~ edge created/modified
shape modified - shape/edge removed ! group operation @ layout/position change
CONVENTIONS:
Labels are unique identifiers - no ID management needed
Position auto-computed if omitted (near last created shape)
near:REF dir:DIRECTION places relative to existing shape
All XML structure, IDs, and geometry handled by the tool
Call drawio_help for full reference with examples
| Name | Required | Description | Default |
|---|---|---|---|
| ops | Yes | Array of operation strings |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description thoroughly discloses behavior: it executes operations that modify diagrams, returns response prefixes indicating actions (+, ~, *, -, !, @), and handles all XML structure internally. This fully informs the agent of side effects.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is lengthy but well-organized with clear section headings and a structured DSL. It is appropriately sized for the tool's complexity, though it could be slightly more front-loaded with a usage example.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description covers all aspects: shapes, connections, appearance, position, organization, structure, meta, visual export, node types, themes, edge styles, selectors, response prefixes, and conventions. It is fully self-contained and compensates for the lack of output schema and annotations.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The single parameter 'ops' is an array of strings, and the description provides an exhaustive DSL with syntax for shapes, connections, styling, and more. This adds immense semantic meaning beyond the schema's minimal description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Execute drawio operations' and provides a complete DSL specification, making the tool's purpose unmistakable. It distinguishes itself from siblings like drawio_help (reference) and drawio_query (query) by being the primary execution tool.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description includes a CONVENTIONS section that advises calling drawio_help for full reference, and the DSL details implicitly guide usage. However, it lacks explicit when-to-use vs when-not-to-use guidance compared to siblings, though the context is clear.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Returns the drawio FCP reference card.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of disclosing behavioral traits. It only states that the tool returns a reference card, without mentioning side effects, idempotency, or what the card contains, which is minimal transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single concise sentence that conveys the tool's purpose without any unnecessary words. It is perfectly sized for its simplicity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
While the tool is simple (no parameters, no output schema), the description is vague about the nature of the 'FCP reference card.' It does not specify what information the card contains, which is a gap for an agent needing to decide if this tool provides the needed context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so the baseline is 4 as per guidelines. The description does not need to add meaning beyond the schema, which already covers all parameters (none).
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Returns') and the specific resource ('the drawio FCP reference card'), making it easy for an agent to understand what the tool does. It also distinguishes itself from sibling tools (drawio, drawio_query, drawio_session) which have different purposes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance is provided on when to use this tool versus alternatives. It is implied that this tool should be used when a help reference is needed, but the description lacks explicit when-to-use or when-not-to-use instructions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Query drawio state. Read-only.
| Name | Required | Description | Default |
|---|---|---|---|
| q | Yes | Query string |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description explicitly states 'Read-only', which is a key behavioral trait. Without annotations, this disclosure is crucial. However, no other behaviors (e.g., error handling, performance characteristics) are mentioned, but for a simple query tool, this suffices.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is very concise with two short sentences that front-load the purpose. It is efficient, though slightly lacking in contextual depth. Still, it is well-structured and easy to parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the low complexity and full schema coverage, the description is slightly incomplete. It does not explain what the query returns or how to formulate queries, but the tool is simple. Sibling tools could provide additional context, so a score of 3 is appropriate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already describes the parameter 'q' with 100% coverage. The tool description adds no additional meaning about the query format or allowed values, thus falling at the baseline level of 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb 'Query' and the resource 'drawio state', and explicitly says 'Read-only', which distinguishes it from sibling tools like drawio (likely for modifications) and drawio_session. The purpose is immediately clear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided about when to use this tool versus alternatives like drawio or drawio_session. The description lacks any contextual information about usage scenarios, prerequisites, or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
drawio lifecycle: new, open, save, checkpoint, undo, redo.
| Name | Required | Description | Default |
|---|---|---|---|
| action | Yes | Action: 'new "Title"', 'open ./file', 'save', 'save as:./out', 'checkpoint v1', 'undo', 'undo to:v1', 'redo' |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description must carry behavioral info. It lists actions but gives no details on side effects, permissions, error conditions, or specific behaviors (e.g., does save overwrite? Are checkpoints persistent?). The description is too shallow.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is very short (one sentence), which is concise, but it omits important details. It sacrifices clarity for brevity, so while not verbose, it is under-specified.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (multiple actions like checkpoint and undo) and lack of annotations or output schema, the description is insufficient. It does not explain prerequisites, return values, or the exact behavior of each action, leaving the agent with ambiguity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% as the action parameter explicitly lists all commands. The tool description merely repeats a subset of the schema's parameter description, adding no new meaning beyond what the schema already provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description states it manages a drawio session lifecycle, listing actions like new, open, save, checkpoint, undo, redo. This identifies the domain but lacks a clear verb+resource statement. It distinguishes from sibling tools by focusing on session management rather than drawing or queries.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool vs alternatives like drawio, drawio_help, or drawio_query. The agent must infer from the name and description, which is insufficient for effective selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
The four tools have distinct purposes: drawio performs all diagram operations, drawio_help provides reference, drawio_query is read-only, and drawio_session manages lifecycle. However, the monolithic drawio tool bundles many actions into one, causing potential ambiguity for the agent when selecting the exact operation needed.
All tool names follow a consistent 'drawio_<suffix>' pattern (drawio, drawio_help, drawio_query, drawio_session), making it predictable and easy to navigate.
With only 4 tools for a complex diagramming domain, the count is too low. The main drawio tool alone encapsulates dozens of operations (shapes, connections, appearance, layout, etc.), which should ideally be split into multiple focused tools to avoid overloading the agent.
The monolithic drawio tool covers a broad range of operations: shapes, connections, styles, grouping, pages, layers, export, etc. Minor gaps might exist (e.g., importing), but the overall functionality is comprehensive for creating and editing diagrams.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
MCP server for AI dialogue using various LLM models via AceDataCloud
MCP server for generating rough-draft project plans from natural-language prompts.
Collaborative whiteboard MCP server — create objects, connectors, C4 diagrams, and manage boards
An MCP server that provides an API to LLMs to manage their JumpCloud resources.
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
