ARC-DRAW
Provides SAP BTP solution diagramming capabilities, including 111 SAP BTP icons as native shapes, the SAP BTP Solution Diagram guideline rules, and tools such as get-sap-examples and get-sap-guideline for drawing SAP architecture diagrams on a live draw.io canvas.
Click on "Deploy 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., "@ARC-DRAWDraw a CAP app on Cloud Foundry that reads S/4HANA via Destination and Cloud Connector."
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.
An open-source MCP server that lets your AI agent draw SAP BTP solution diagrams on a live draw.io canvas, with the official SAP icons and the SAP diagram rules built in.
Quick start · Try a prompt · Help build it · Roadmap
Why this exists
Every SAP architect knows the routine. A whiteboard sketch turns into forty minutes of hunting for the right BTP icon, fixing colours and re-routing connectors, just so the diagram looks like something SAP would publish.
Generic AI diagram tools don't fix that. They draw boxes, not SAP products. They use black arrows and random colours, and they put your on-premise S/4HANA inside the BTP boundary.
ARC-DRAW gives your agent the two things it is missing.
What it is | Why it matters | |
🎨 Vocabulary | 111 SAP BTP icons as native | The agent places |
📐 Grammar | The SAP BTP Solution Diagram guideline distilled into a drawing constitution, sent to your MCP client the moment it connects | Colours, connector semantics (solid = sync, dashed = async), area nesting and compose order become rules the agent follows, not suggestions. |
On top of that, two tools the agent can call by itself: get-sap-examples (canonical patterns with ground-truth styles) and get-sap-guideline (specific rules by topic: areas, connectors, icons, numbering…).
flowchart LR
A["You<br/>(plain language)"] --> B["MCP client<br/>Claude Code · Claude Desktop · …"]
B -- "constitution auto-loaded<br/>+ get-sap-examples / get-sap-guideline" --> C["ARC-DRAW<br/>MCP server"]
C -- WebSocket --> D["draw.io plugin<br/>+ SAP icon catalog"]
D --> E["Live canvas<br/>you keep editing by hand"]Related MCP server: Draw.io MCP Server
🚀 Quick start
Status: early (v0.x). It works and we use it, but expect rough edges. Installation is from source for now; a one-line
npxinstall is on the roadmap.
You need: Node.js 22 LTS, Git, and pnpm (corepack enable, or npm i -g pnpm@10).
git clone https://github.com/etosin/arc-draw.git
cd arc-draw
pnpm install --frozen-lockfile
pnpm -r buildRegister the server in your MCP client, using the absolute path to your clone.
{
"mcpServers": {
"arc-draw": {
"type": "stdio",
"command": "node",
"args": [
"/absolute/path/to/arc-draw/packages/drawio-mcp-server/build/index.js",
"--editor"
]
}
}
}On Windows use forward slashes: C:/Users/you/dev/arc-draw/packages/drawio-mcp-server/build/index.js.
Corporate security agents like port 3000. Add "--http-port", "4000" to args and open http://localhost:4000/ instead.
Restart your MCP client, open http://localhost:3000/ and leave that tab open. It is the live canvas, and drawing tools only work while it is connected.
💬 Try these prompts
"Draw a TO-BE inbound integration: partner → SOAP sender adapter → Cloud Integration iFlow (enrichment) → REST receiver → S/4HANA on-premise via a standard API. Put Cloud Integration and API Management inside an Integration Suite area and add a legend."
"Show an AS-IS / TO-BE comparison for replacing a PI/PO interface with Cloud Integration."
"Side-by-side extension: a CAP app on Cloud Foundry reads S/4HANA through a Destination and Cloud Connector, users sign in through Cloud Identity Services. Number the flow steps."
Then edit the result by hand in the canvas, or ask the agent to change it. Got a prompt that works well, or one that goes wrong? Share it: that is the most useful thing you can do.
🧰 What's inside
Category | Icons |
| 43 |
| 15 |
| 17 |
| 8 |
| 17 |
| 11 |
ARC-DRAW is built on drawio-mcp-server v2.3, so everything from upstream still works: multi-page and multi-document targeting, layers, edges, Mermaid import, TLS, the browser extension, and the AWS/Azure/GCP/Cisco stencils. You can mix them with SAP shapes in one diagram.
🙋 Help build this
This project needs SAP practitioners more than it needs programmers. The agent is only as good as the rules and patterns we give it, and you know how these diagrams should look.
You don't need to write a line of TypeScript to make a real difference:
I have… | I can… | Time |
5 minutes | Report a diagram the agent got wrong. Include your prompt and a screenshot. | ⏱️ |
A diagram I draw every month | Propose a pattern: AS-IS/TO-BE, event-driven, side-by-side extension… | ⏱️⏱️ |
The SAP guideline open | Spot a rule in | ⏱️⏱️ |
A different MCP client | Tell us if it works with Cursor, Copilot, Codex, Zed…, or write the setup guide. | ⏱️⏱️ |
A screen recorder | Record the demo GIF that should sit at the top of this README. | ⏱️⏱️ |
TypeScript skills | Pick a | ⏱️⏱️⏱️ |
Questions and half-formed ideas are welcome in Discussions. Everything is in CONTRIBUTING.md.
Every contributor is credited in the release notes and below. ⭐ A star also helps other SAP people find the project.
🗺️ Roadmap
One-line install via
npx, with the Claude Code plugin pointing at ARC-DRAWDemo GIF and a gallery of community diagrams
Reusable SAP patterns (AS-IS/TO-BE, BTP inbound/outbound, side-by-side extension)
Diagram linter: check an existing
.drawiofile against the SAP guidelineDecide whether the bundled icon catalog can be retired in favour of draw.io's native SAP palette
Setup guides for more MCP clients
Server tests that pass on Windows
Have a better idea? Open a discussion.
⚠️ Known limitations
We would rather tell you now:
Installation is from source. The
/plugin marketplaceentry and thenpx drawio-mcp-server installcommand inherited from upstream install the plain draw.io server, without the SAP layer. Use the manual setup above until thenpxinstall lands.Tested with Claude Code. Other MCP clients should work, since this is a standard MCP server, but we have not verified them yet. Tell us what you find.
Diagram quality depends on the model. The constitution steers the agent; it can't make every model perfect. That is why diagram feedback is so valuable.
Windows: build and run work from PowerShell, but
pnpm testneeds Git Bash or WSL, and a few inherited upstream tests assume Linux/macOS.
🔧 Troubleshooting
The agent says there is no document / list-documents is empty. The canvas tab isn't open. Open http://localhost:3000/ and keep it open, then hard-refresh (Ctrl+F5).
MCP client shows Failed to reconnect: -32000. The build didn't run on this machine. Run pnpm install && pnpm -r build and check that packages/drawio-mcp-server/build/index.js exists.
The first launch is slow. The built-in editor downloads draw.io once and caches it. On restricted networks, see --asset-path in CONFIG.md.
More in TROUBLESHOOTING.md and docs/SAP-INTEGRATION.md.
Credits
ARC-DRAW stands on the shoulders of drawio-mcp-server by Ladislav Gazo (MIT). The MCP server, the draw.io plugin, the browser extension and all live-canvas tooling are his work; ARC-DRAW adds the SAP vocabulary and grammar. If you like this, please star the upstream project too. The original README is kept as README.upstream.md.
SAP icons and diagram conventions come from SAP's BTP Solution Diagrams (Apache-2.0). See NOTICE.md. Diagrams are rendered by draw.io.
Created and maintained by Emerson Tosin, SAP Solution Architect.
License & disclaimer
MIT. See LICENSE.md and NOTICE.md.
ARC-DRAW is an independent community project. It is not affiliated with, sponsored by, or endorsed by SAP SE. SAP, SAP BTP, SAP S/4HANA and other SAP product names are trademarks of SAP SE. SAP icon assets remain subject to their own license terms.
This server cannot be deployed
Maintenance
Related MCP Connectors
Create diagrams in chat, rendered as live interactive draw.io diagrams. 10,000+ searchable shapes.
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Generate cloud architecture diagrams, flowcharts, and sequence diagrams.
Create workflow, sequence, architecture, and mind map diagrams via AI assistants.
Related MCP Servers
- AlicenseBqualityAmaintenanceEnables AI agents to programmatically create, modify, and analyze Draw.io diagrams through the Model Context Protocol. Supports generating architectural diagrams, flowcharts, and visualizations with bidirectional communication between AI systems and Draw.io.1382 npm1,474MIT
- AlicenseNot gradedqualityCmaintenanceEnables AI assistants to create and edit draw.io diagrams programmatically, supporting a wide range of diagram types and styles.79 PyPI5MIT
- AlicenseNot gradedqualityCmaintenanceEnables creating and editing Draw.io diagrams via natural language, supporting shapes, connectors, and multi-line text.2MIT
- FlicenseNot gradedqualityFmaintenanceEnables AI assistants to create, read, and manage Draw.io diagrams programmatically through natural language interactions.1-