Excalidraw Skill — генерация диаграмм

Claude Code skill для создания диаграмм в стиле ручного рисунка из естественного языка с автоматическим экспортом в PNG/SVG.

English

Зачем этот skill

• Генерация диаграмм из естественного языка — опишите нужную схему на русском или английском, и диаграмма будет создана автоматически без ручного перетаскивания элементов.
• Нулевой порог входа — не нужно изучать формат Excalidraw JSON, синтаксис Mermaid или любой другой DSL.
• Экспорт без установки (Kroki API) — достаточно curl, не нужны npm, Docker или инструменты браузерной автоматизации.
• Проактивная генерация — когда Claude обнаруживает сложную систему, требующую визуализации, диаграмма создаётся автоматически без явного запроса.
• Профессиональная дизайн-система — встроенная семантическая цветовая система (правило 60-30-10), иерархия размеров шрифтов, семантика стрелок (сплошная/пунктирная/точечная) и шаблоны компоновки для разных типов диаграмм.
• 5 режимов диаграмм — блок-схемы, архитектурные схемы, диаграммы последовательностей, ментальные карты, диаграммы с дорожками — каждый со своими правилами компоновки и отступов.
• Защита от антипаттернов — задокументированные типичные ошибки (наложение текста в областях, запутанные стрелки, коллизии подписей) позволяют Claude избегать проблем ещё до генерации.
• Умный расчёт размеров — автоматическое вычисление ширины элементов по длине подписи (max(160, charCount * 9)), адаптация для CJK-символов, исключение обрезки текста.
• Точная система отступов — пиксельные правила для стрелок с подписями и без, межколоночные расстояния, внутренние отступы областей.
• 3 режима маршрутизации стрелок — прямые линии, L-образные ломаные, кривые изгибы.
• Редактируемый вывод — файлы .excalidraw открываются и редактируются на excalidraw.com с полным сохранением привязок стрелок.
• Поддержка офлайн — локальный CLI (на базе Firefox) работает полностью без сети.

Сравнение с аналогами

Ключевые преимущества перед нативным Claude Code:

• Полный конвейер — Claude Code умеет писать Excalidraw JSON, но не экспортирует изображения автоматически и не знает дизайн-норм. Этот skill обеспечивает полную автоматизацию от генерации до готового результата.
• Профессиональное качество — встроенные семантические цвета, точные отступы, маршрутизация стрелок: вывод готов к использованию без ручных правок.
• Защита от ошибок — антипаттерны предотвращают наложение текста, запутанные стрелки и другие типичные проблемы.
• Проактивная визуализация — диаграммы создаются автоматически при обсуждении архитектуры, без явного запроса.

Почему Skill, а не MCP?

Формат JSON в Excalidraw — это просто массив элементов с полями x/y/width/height, которые Claude умеет писать нативно. Skill учит Claude «как рисовать», MCP даёт Claude «кисть». Когда LLM сам умеет рисовать — лучше научить его делать это правильно.

Ценность MCP — в предоставлении Claude возможностей, недоступных ему самому: доступ к базам данных, браузерная автоматизация, API с аутентификацией. Ядро генерации диаграмм — дизайн компоновки + написание JSON — как раз то, в чём LLM наиболее силён.

Функциональность

• Генерация файлов .excalidraw JSON по описанию на естественном языке
• Экспорт в SVG через Kroki API — без установки, только curl
• Локальный экспорт в PNG/SVG через excalidraw-brute-export-cli (на базе Firefox)
• Автоматический запуск при необходимости визуализации сложных систем
• Автоматическое применение семантических цветов, иерархии шрифтов и стилей стрелок
• Автоматический расчёт ширины элементов по подписи с адаптацией для CJK-символов
• Пошаговое построение больших диаграмм для предотвращения превышения лимита токенов
• Генерация полностью интерактивных файлов с двусторонней привязкой стрелок

Возможности

Семантическая цветовая система

8 семантических категорий цветов — основной (синий), успех (зелёный), предупреждение (жёлтый), ошибка (красный), внешний (фиолетовый), процесс (голубой), триггер (оранжевый), нейтральный (серо-синий). Правило 60-30-10: 60% пустое пространство, 30% основной цвет, 10% акцентный.

Режимы диаграмм

Точная система отступов

Маршрутизация стрелок

3 режима: прямые линии (по умолчанию), L-образные ломаные (прямоугольные повороты через points), кривые изгибы (roundness: { type: 2 }).

Семантика стрелок

Умный расчёт размеров элементов

Автоматический расчёт ширины по подписи: латинские символы — max(160, charCount * 9), CJK-символы — max(160, charCount * 18). Исключает обрезку текста в генерируемых диаграммах.

Иерархия шрифтов

Заголовок (28px) → Заголовок группы (24px) → Подпись (20px) → Описание (16px) → Примечание (14px)

Защита от антипаттернов

Встроенная документация типичных ошибок — центрирование текста с наложением в областях, запутанные стрелки между зонами, коллизии подписей коротких стрелок, правила прозрачности контейнеров — позволяет Claude избегать ошибок ещё до генерации.

Зависимости

curl предустановлен на macOS, Linux и Windows (Git Bash/WSL).

Установка skill

Claude Code (глобально):

git clone https://github.com/Agents365-ai/excalidraw-skill.git ~/.claude/skills/excalidraw

Claude Code (только текущий проект):

git clone https://github.com/Agents365-ai/excalidraw-skill.git .claude/skills/excalidraw

OpenClaw:

git clone https://github.com/Agents365-ai/excalidraw-skill.git skills/excalidraw

SkillsMP: найдите excalidraw на skillsmp.com и установите в один клик.

Установка зависимостей

Вариант A: Kroki API (рекомендуется — без установки, только SVG)

# curl предустановлен, достаточно проверить:
curl --version

Дополнительная настройка не требуется. SVG рендерится через https://kroki.io.

Вариант B: Локальный CLI (обязателен для PNG)

npm install -g excalidraw-brute-export-cli
npx playwright install firefox

Особенности платформ

Патч для macOS (однократно, обязателен для локального CLI)

CLI использует Control+O / Control+Shift+E, но macOS требует клавишу Meta (Cmd):

CLI_MAIN=$(npm root -g)/excalidraw-brute-export-cli/src/main.js
sed -i '' 's/keyboard.press("Control+O")/keyboard.press("Meta+O")/' "$CLI_MAIN"
sed -i '' 's/keyboard.press("Control+Shift+E")/keyboard.press("Meta+Shift+E")/' "$CLI_MAIN"

Использование

Просто опишите нужную диаграмму:

Claude автоматически создаст файл .excalidraw и экспортирует его в PNG.

Пример

Запрос:

Нарисуй архитектурную схему микросервисного интернет-магазина: клиенты Mobile/Web/Admin, API Gateway (с аутентификацией, ограничением запросов и маршрутизацией), микросервисы Auth/User/Order/Product/Payment, очередь Kafka, сервис Notification, User DB / Order DB / Product DB / Redis Cache / Stripe API

Результат:

Структура файлов

• SKILL.md — файл инструкций skill, загружаемый Claude Code
• README.md — этот файл (на китайском)
• README_EN.md — описание на английском
• assets/ — примеры диаграмм

Лицензия

MIT