Превратите текстовые описания в профессиональные диаграммы на живом холсте Excalidraw. Ваш агент ИИ рисует, скриншотирует свою собственную работу и повторяет ее, пока она не выглядит правильно.

Что вы получаете

10 визуальных методов — эффекты свечения, цветовые зоны, связанные стрелки, узлы принятия решений, иерархия шрифтов, семантические цвета и многое другое ** Самокорректирующиеся диаграммы** - агент видит свое собственное полотно через скриншоты и автоматически исправляет проблемы ** Наилучшие практики** - правила интервала, маршрутизация стрелок, ярлыки зон, которые действительно работают ** Контрольный список качества ** - ловит усечение, перекрытие и плохие стрелки перед экспортом Множественный экспорт - PNG, SVG, .excalidraw (перередактируемый) или общий URL

Предпосылки

Вам нужен установленный и работающий сервер Excalidraw MCP.

###1 Клонирование и создание MCP-сервера

###2 Добавить код Клода

Замените /absolute/path/to/ везде, где вы клонировали репо.

###3 Начните с холста

Откройте http://localhost:3000 в своем браузере, чтобы увидеть живое полотно.

##Установка навыков

Либо вручную: скопируйте .claude/skills/excalidraw/SKILL.md в папку .claude/skills/excalidraw/ вашего проекта.

Попробуйте

После запуска сервера MCP и установки навыка:

Excalidraw Skill for Claude Code

Turn text descriptions into professional diagrams on a live Excalidraw canvas. Your AI agent draws, screenshots its own work, and iterates until it looks right.

What You Get

• 10 visual techniques – glow effects, color-coded zones, bound arrows, decision nodes, font hierarchy, semantic colors, and more
• Self-correcting diagrams – the agent sees its own canvas via screenshots and fixes issues automatically
• Layout best practices – spacing rules, arrow routing, zone labels that actually work
• Quality checklist – catches truncation, overlap, and bad arrows before you export
• Multiple exports – PNG, SVG, .excalidraw (re-editable), or shareable URL

Prerequisites

You need the Excalidraw MCP server installed and running.

1. Clone and build the MCP server

git clone https://github.com/yctimlin/mcp_excalidraw && cd mcp_excalidraw
npm ci && npm run build

2. Add to Claude Code

claude mcp add excalidraw -s user \
  -e EXPRESS_SERVER_URL=http://localhost:3000 \
  -- node /absolute/path/to/mcp_excalidraw/dist/index.js

Replace /absolute/path/to/ with wherever you cloned the repo.

3. Start the canvas

cd /path/to/mcp_excalidraw
PORT=3000 npm run canvas

Open http://localhost:3000 in your browser to see the live canvas.

Install the Skill

claude skill add --url https://raw.githubusercontent.com/robonuggets/excalidraw-skill/main/.claude/skills/excalidraw/SKILL.md

Or manually: copy .claude/skills/excalidraw/SKILL.md into your project’s .claude/skills/excalidraw/ folder.

Try It

Once the MCP server is running and the skill is installed:

• “Draw an architecture diagram for a web app with a load balancer, two servers, and a database”
• “Create a flowchart showing user authentication with success and failure paths”
• “Make a comparison diagram: monolith vs microservices”

Visual Techniques Included

Known Limitations

• Images: Can’t be added via MCP – drag them into the browser manually
• Freedraw: Draw freehand in the browser, not via MCP
• SVG import: Use the browser’s native paste feature

License

MIT