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 with automatic layout via ELK. Built on the FCP framework.

Multiplayer game backend — 20 nodes, 5 swim lanes, auto-layout (open in draw.io)

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 0g

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

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 (ELK)
  Auto-layout via elkjs -- flow:TB, flow:LR, near/dir positioning
        |
Serialization (XML)
  src/serialization/ -- Semantic model <-> mxGraphModel XML

Supporting 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, 465 tests
npm run test:watch
npm run dev       # tsc --watch

MIT