Introduction
In my role as a Solutions Architect and consultant, I create architecture diagrams constantly to communicate high-level system design, software flows, and component interactions.
Previously, the process was entirely manual. I had to read documentation, review source code, analyze the current state of products or projects, and then translate that understanding into diagrams using draw.io or Excalidraw. The work is intellectually engaging, but it is time-consuming and demands precision for every element and connection inside the web editor.
Last week, I came across two MCP app tools introduced in the architecture community: drawio-mcp and excalidraw-mcp. They immediately captured my attention. I wanted to understand how far they could go in supporting real architecture workflows.
After several days of hands-on use, the impact was clear. These tools fundamentally change how diagrams can be created and evolved. The shift from manual drawing to prompt-driven, programmatic diagram generation is substantial.
This post provides a practical guide to setting up and running simple prompts to visualize a hypothetical TODO application. The goal is to help developers and architects quickly get started with drawio-mcp and excalidraw-mcp and understand their real potential in day-to-day architecture work.
Prerequisites
- MacOS
- vscode (I used
1.109.3) - GitHub Copilot in Agent mode (
Claude Opus 4.5) - Any source codes
Setup drawio-mcp and excalidraw-mcp on vscode
Press Shift + Command + P on the vscode, then type mcp to search, and choose add MCP server as following:
The choose HTTP option:
Next, assign a file name of your choice and repeat the same process with both the drawio-mcp and excalidraw-mcp servers.
The result should resemble the following:
That is the setup. Now proceed with experimentation.
In VS Code, enter read the project structure and visualise all main components using excalidraw in the GitHub Copilot chat window. After a short processing period, the generated diagram will appear:
Focus on the red box. It reads the entire source code, sends it to the LLM, and then uses the Excalidraw MCP tools to generate the diagram. This ensures the output reflects the actual system structure rather than a rough interpretation.
Ref Todo App architecture using Excalidraw
Now switch to draw.io by typing: now with draw.io pls:
Ref: Todo App architecture using draw.io
Conclusion
MCP app tools redefine how architecture diagrams are created and maintained. By allowing AI to read source code, infrastructure definitions, and system constraints, diagrams can be generated and updated programmatically rather than drawn manually.
This approach shifts architecture from static documentation to an adaptive, automation-ready asset. It provides a practical blueprint for integrating AI directly into architecture design, improving accuracy, consistency, and delivery speed across projects.
Happy hacking!!!
Top comments (0)