Excalidraw is an open-source virtual whiteboard with a distinctive hand-drawn aesthetic. Claude Code is Anthropic's AI coding agent that lives in your terminal. Together, they let you describe a diagram in plain English and get an editable .excalidraw file in seconds.
This tutorial walks through three integration methods — from the simplest skill-based approach to the full MCP server setup — so you can pick the one that fits your workflow.
What you'll build
- Architecture diagrams from a codebase description
- Flowcharts from business logic or user stories
- System maps and data models generated on demand
Prerequisites
- Claude Code installed (
npm install -g @anthropic-ai/claude-code) - Node.js 18+ and npm
- A text editor for reviewing generated files
Method A: Excalidraw Skill (simplest)
Claude Code skills are markdown files in your .claude/skills/ directory that teach Claude new capabilities. The Excalidraw skill lets Claude generate .excalidraw files programmatically.
Install the skill
Create the skill file in your project:
Use it
Launch Claude Code in your project directory and ask for a diagram:
Claude reads the skill, generates the JSON structure for boxes, arrows, and labels, and writes a .excalidraw file to your project. Open it in Excalidraw to edit further.
.claude/ directory so every team member gets diagram generation automatically.
Method B: Excalidraw MCP Server
The Model Context Protocol (MCP) approach gives Claude a live connection to Excalidraw's rendering engine. Diagrams can be rendered to PNG/SVG and displayed in real time.
Install the MCP server
Configure Claude Code
Add the server to your Claude Code MCP configuration:
Generate diagrams
The MCP server handles rendering, so Claude can create, modify, and export diagrams without you leaving the terminal.
Method C: Code generation
If you prefer full control, Claude Code can write a Node.js script that programmatically builds Excalidraw files using the @excalidraw/excalidraw package:
This approach is ideal for CI/CD pipelines where you want diagrams auto-generated from source files on every commit.
Real-world use cases
- Architecture reviews — describe your system and get a diagram in seconds for team discussions
- Onboarding documentation — generate up-to-date visual maps of your codebase
- RFC proposals — illustrate proposed changes with before/after diagrams
- Database modeling — turn Prisma schemas or SQL DDL into entity-relationship diagrams
Tips for better diagrams
- Be specific about layout — mention "left-to-right flow" or "top-down hierarchy" in your prompt
- Name your components — "API Gateway, Auth Service, User DB" gives better results than "the services"
- Iterate — ask Claude to adjust colors, spacing, or add labels after the first generation
- Combine with code reading — point Claude at actual source files for accurate diagrams