# etosin/arc-draw architecture

> Architecture diagram of the GitHub repository etosin/arc-draw, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/etosin/arc-draw
- Repository: https://github.com/etosin/arc-draw

## Overview

ARC-DRAW is an MCP server and draw.io plugin that lets an AI agent create SAP BTP solution diagrams on a live canvas. The main workflow is: an architect prompts an MCP client, which receives SAP diagram guidance and invokes diagram tools; the server routes requests over WebSocket to the connected draw.io plugin, which edits the canvas. Tool coverage includes SAP shape lookup and placement, diagram editing, Mermaid/diagram import and export, and document/page/layer operations. The README documents these capabilities; the sampled server entry point is partial, so uncertain internal dispatch details are omitted.

Main entry points: [`packages/drawio-mcp-server/src/index.ts`](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/index.ts) (MCP server), [`packages/drawio-mcp-plugin/src/plugin.ts`](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/plugin.ts) (draw.io plugin), [`packages/drawio-mcp-plugin/src/drawio-tools.ts`](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/drawio-tools.ts) (Plugin drawing tools), [`packages/drawio-mcp-extension/entrypoints/background.ts`](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-extension/entrypoints/background.ts) (Extension background)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_mcp["MCP interface"]
  node_server["MCP server<br/>[index.ts]"]
  node_tools["Diagram tools<br/>[index.ts]"]
end

subgraph group_bridge["Live connection"]
  node_ws_bridge["WebSocket bridge<br/>[index.ts]"]
  node_queue["Request queue<br/>[request_queue.ts]"]
end

subgraph group_drawing["Diagram editing"]
  node_plugin["draw.io plugin<br/>[plugin.ts]"]
  node_registry["Plugin tool registry<br/>[tool-registry.ts]"]
  node_plugin_tools["Plugin drawing tools<br/>[drawio-tools.ts]"]
  node_mermaid["Mermaid import<br/>[index.ts]"]
end

subgraph group_sap["SAP guidance"]
  node_sap_tools["SAP guidance tools<br/>[index.ts]"]
  node_constitution["SAP rules and patterns"]
  node_sap_shapes["SAP shape catalog<br/>[sap-shapes.ts]"]
end

subgraph group_extension["Browser extension"]
  node_background["Extension background<br/>[background.ts]"]
  node_content["Content scripts<br/>[contentScript.ts]"]
  node_popup["Extension popup<br/>[App.tsx]"]
end

node_architect(("Architect"))
node_client["MCP client"]
node_canvas["Live draw.io canvas"]
node_drawio["draw.io"]

node_architect -->|"prompts"| node_client
node_client -->|"invokes tools"| node_server
node_server -->|"provides SAP rules"| node_client
node_server -->|"registers tools"| node_tools
node_server -->|"registers tools"| node_sap_tools
node_sap_tools -->|"reads guidance"| node_constitution
node_server -->|"routes requests"| node_ws_bridge
node_ws_bridge -->|"queues requests"| node_queue
node_ws_bridge -->|"WebSocket messages"| node_background
node_background -->|"routes messages"| node_content
node_content -->|"forwards messages"| node_plugin
node_plugin -->|"dispatches tools"| node_registry
node_registry -->|"invokes drawing"| node_plugin_tools
node_plugin_tools -->|"edits diagram"| node_canvas
node_plugin -->|"uses shapes"| node_sap_shapes
node_plugin_tools -->|"imports Mermaid"| node_mermaid
node_drawio -->|"hosts"| node_canvas
node_background -->|"sends status"| node_popup

click node_server "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/index.ts"
click node_tools "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/tools/index.ts"
click node_sap_tools "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/tools/index.ts"
click node_constitution "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/sap-constitution.ts"
click node_ws_bridge "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/index.ts"
click node_queue "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/request_queue.ts"
click node_background "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-extension/entrypoints/background.ts"
click node_content "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-extension/contentScript.ts"
click node_plugin "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/plugin.ts"
click node_registry "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/tool-registry.ts"
click node_plugin_tools "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/drawio-tools.ts"
click node_mermaid "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/tools/import-mermaid/index.ts"
click node_sap_shapes "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/sap-shapes.ts"
click node_popup "https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-extension/entrypoints/popup/App.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_server,node_tools,node_client toneBlue
class node_ws_bridge,node_queue toneAmber
class node_plugin,node_registry,node_plugin_tools,node_mermaid toneMint
class node_sap_tools,node_constitution,node_sap_shapes toneRose
class node_background,node_content,node_popup,node_architect,node_canvas,node_drawio toneIndigo
```

## Components

### MCP interface

- [MCP server](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/index.ts): `packages/drawio-mcp-server/src/index.ts`
- [Diagram tools](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/tools/index.ts): `packages/drawio-mcp-server/src/tools/index.ts`

### Live connection

- [WebSocket bridge](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/index.ts): `packages/drawio-mcp-server/src/index.ts`
- [Request queue](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/request_queue.ts): `packages/drawio-mcp-server/src/request_queue.ts`

### Diagram editing

- [draw.io plugin](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/plugin.ts): `packages/drawio-mcp-plugin/src/plugin.ts`
- [Plugin tool registry](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/tool-registry.ts): `packages/drawio-mcp-plugin/src/tool-registry.ts`
- [Plugin drawing tools](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/drawio-tools.ts): `packages/drawio-mcp-plugin/src/drawio-tools.ts`
- [Mermaid import](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/tools/import-mermaid/index.ts): `packages/drawio-mcp-plugin/src/tools/import-mermaid/index.ts`

### SAP guidance

- [SAP guidance tools](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/tools/index.ts): `packages/drawio-mcp-server/src/tools/index.ts`
- [SAP rules and patterns](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-server/src/sap-constitution.ts): `packages/drawio-mcp-server/src/sap-constitution.ts`
- [SAP shape catalog](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-plugin/src/sap-shapes.ts): `packages/drawio-mcp-plugin/src/sap-shapes.ts`

### Browser extension

- [Extension background](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-extension/entrypoints/background.ts): `packages/drawio-mcp-extension/entrypoints/background.ts`
- [Content scripts](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-extension/contentScript.ts): `packages/drawio-mcp-extension/contentScript.ts`
- [Extension popup](https://github.com/etosin/arc-draw/blob/main/packages/drawio-mcp-extension/entrypoints/popup/App.tsx): `packages/drawio-mcp-extension/entrypoints/popup/App.tsx`

### Other components

- **Architect**
- **MCP client**
- **Live draw.io canvas**
- **draw.io**

## Connections

- Architect → MCP client: prompts
- MCP client → MCP server: invokes tools
- MCP server → MCP client: provides SAP rules
- MCP server → Diagram tools: registers tools
- MCP server → SAP guidance tools: registers tools
- SAP guidance tools → SAP rules and patterns: reads guidance
- MCP server → WebSocket bridge: routes requests
- WebSocket bridge → Request queue: queues requests
- WebSocket bridge → Extension background: WebSocket messages
- Extension background → Content scripts: routes messages
- Content scripts → draw.io plugin: forwards messages
- draw.io plugin → Plugin tool registry: dispatches tools
- Plugin tool registry → Plugin drawing tools: invokes drawing
- Plugin drawing tools → Live draw.io canvas: edits diagram
- draw.io plugin → SAP shape catalog: uses shapes
- Plugin drawing tools → Mermaid import: imports Mermaid
- draw.io → Live draw.io canvas: hosts
- Extension background → Extension popup: sends status