Навык для Claude и coding-агентов, который превращает короткую JSON-спецификацию в анимированные интерактивные диаграммы с экспортом в SVG, PNG, GIF или MP4.
68638JavaScriptMITОбновлён 3 дня назад
coleam00/excalidraw-diagram-skill
Навык для coding-агентов, который позволяет Claude Code и похожим агентам создавать диаграммы Excalidraw по описанию на обычном языке.
Open source альтернатива:Lucidchart
- Звёзды
- 5,043
- Форки
- 584
- Открытые issues
- 34
- Последний коммит
- 8 месяцев назад
Что это?
Этот навык позволяет coding-агентам, таким как Claude Code и OpenCode, создавать диаграммы Excalidraw по описаниям на обычном языке. Агент сам разбирает концепцию, продумывает расположение элементов, генерирует JSON и рендерит результат. Пользователь может попросить изобразить систему или протокол и получить редактируемый файл Excalidraw.
Проект уделяет внимание структуре диаграммы, а не только простым блокам и стрелкам. Формы располагаются так, чтобы отражать концепцию: например, веером — связи «один ко многим», в виде временной шкалы — последовательности, а со схождением элементов — агрегацию. В технические диаграммы можно включать фрагменты кода и примеры JSON-полезной нагрузки.
Пайплайн рендеринга на базе Playwright позволяет агенту просматривать собственный результат, проверять, не перекрывается ли текст и правильно ли выровнены стрелки, и вносить правки перед выдачей диаграммы. Цвета и фирменные стили задаются в одном файле палитры, который можно заменить.
Ключевые возможности
- 01Создаёт диаграммы Excalidraw по описаниям на обычном языке.
- 02Располагает формы в соответствии с концепцией: например, веером, в виде временной шкалы или со схождением элементов.
- 03Рендерит результат с помощью Playwright, чтобы агент мог проверять и исправлять проблемы с расположением элементов.
- 04Добавляет в технические диаграммы фрагменты кода и примеры JSON-полезной нагрузки.
- 05Собирает фирменные цвета в одном файле палитры, который легко настроить.
Сценарии использования
- Документирование архитектуры системы или потока данных прямо во время работы с coding-агентом.
- Иллюстрация последовательности взаимодействия с API или протоколом для проектной документации.
- Создание диаграмм в фирменном стиле с помощью редактирования файла палитры цветов.
Быстрый старт
- 1
Клонируйте репозиторий
git clone https://github.com/coleam00/excalidraw-diagram-skill.git - 2
Скопируйте skill в каталог skills вашего проекта
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram - 3
Установите зависимости рендерера и Chromium
cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium - 4
Попросите своего агента для программирования создать диаграмму
Что важно знать
- В README не указана лицензия, поэтому права на использование неясны.
- Для конвейера рендеринга требуются uv и Playwright с установленным Chromium.
Темы
Частые вопросы
- Что такое excalidraw-diagram-skill?
- Навык для coding-агентов, который позволяет Claude Code и похожим агентам создавать диаграммы Excalidraw по описанию на обычном языке. Этот навык позволяет coding-агентам, таким как Claude Code и OpenCode, создавать диаграммы Excalidraw по описаниям на обычном языке. Агент сам разбирает концепцию, продумывает расположение элементов, генерирует JSON и рендерит результат. Пользователь может попросить изобразить систему или протокол и получить редактируемый файл Excalidraw.
- excalidraw-diagram-skill можно использовать бесплатно? Какая у него лицензия?
- У excalidraw-diagram-skill не указана лицензия. Код открыт, но без лицензии нет явного разрешения на его использование — уточните у автора, прежде чем на него полагаться.
- excalidraw-diagram-skill всё ещё поддерживается?
- Нет коммитов больше 6 месяцев. Последний коммит в excalidraw-diagram-skill — 1 мар. 2026 г..
- Для чего можно использовать excalidraw-diagram-skill?
- Документирование архитектуры системы или потока данных прямо во время работы с coding-агентом. Иллюстрация последовательности взаимодействия с API или протоколом для проектной документации. Создание диаграмм в фирменном стиле с помощью редактирования файла палитры цветов.
- Как установить excalidraw-diagram-skill?
- Клонируйте репозиторий: git clone https://github.com/coleam00/excalidraw-diagram-skill.git Скопируйте skill в каталог skills вашего проекта: cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram Установите зависимости рендерера и Chromium: cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium Попросите своего агента для программирования создать диаграмму
- Где скачать excalidraw-diagram-skill?
- Исходный код и инструкции по установке — на GitHub: https://github.com/coleam00/excalidraw-diagram-skill
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Навык для AI-агентов, который превращает идеи, планы и кодовые базы в интерактивные HTML-диаграммы для Claude Code, Codex, Cursor и OpenCode.
85,6 тыс.5,8 тыс.JavaScriptMITОбновлён вчера
Навык для AI-агентов, который оформляет диаграммы, обзоры diff, планы и таблицы в виде HTML-страниц вместо ASCII-графики.
10,6 тыс.677JavaScriptMITОбновлён 12 часов назад
Agent Skill, с помощью которого coding-агенты пишут и запускают собственные Playwright-скрипты для тестов и многошаговых задач в браузере.
3,2 тыс.266JavaScriptMITОбновлён 19 дней назад
Навык для AI-агентов и линтер без зависимостей, который помогает создавать SVG-диаграммы с вручную размещёнными элементами в едином стиле.
62945JavaScriptMITОбновлён 2 месяца назад
Навык для агентских инструментов, который создаёт редакционные диаграммы в одном автономном HTML-файле с SVG и поддерживает 45 типов диаграмм и оформление в стиле бренда.
58,1 тыс.3,7 тыс.HTMLMITОбновлён 4 дня назад