excalidraw-diagram-generatorавтор GitHub

Excalidraw Diagram Generator Skill.

Навык для Claude Code и Codex в области диаграмм и графиков: создаёт диаграммы и интеллект-карты Excalidraw из описания на естественном языке.

Diagrams & Data Visualization
Diagram

Скачать OpenDesign Инструкция по использованию

github/awesome-copilot · skills/excalidraw-diagram-generator/SKILL.mdSKILL.md

--- name: excalidraw-diagram-generator description: Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw. --- ## When to Use This Skill ## Prerequisites ## Step-by-Step Workflow ## Best Practices ## Example Prompts and Responses ## Advanced Techniques

Метаданные и заголовки разделов прочитаны из исходного файла 2026-09-14 · 24 276 символов полностью

01 Что делает

Что делает skill excalidraw-diagram-generator в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Генерирует диаграммы в формате Excalidraw из описаний на естественном языке. Поддерживает девять типов диаграмм: блок-схемы для последовательных процессов, диаграммы связей для отношений сущностей, mind-карты для иерархий концепций, диаграммы архитектуры для проектирования систем, диаграммы потоков данных для процессов преобразования данных, диаграммы бизнес-процессов со swimlane для межфункциональных workflow, диаграммы классов для объектно-ориентированного дизайна, диаграммы последовательностей для взаимодействий объектов во времени и ER-диаграммы для отношений сущностей базы данных.

Выводит файлы .excalidraw в формате JSON с соответствующими элементами (прямоугольники, эллипсы, ромбы, стрелки, текст), расположенными с использованием вычисленных координат и оформленными в единой цветовой схеме. Файлы открываются непосредственно в Excalidraw на excalidraw.com или через расширение VS Code.

Что он выдаёт

Полный JSON-файл .excalidraw с описательным именем файла
Сводка о том, что было создано, включая тип диаграммы и количество элементов
Инструкции по открытию и редактированию диаграммы в Excalidraw

Смотрите пример запроса ↗

Как это работает

01
Понять запрос
Анализирует описание пользователя, чтобы определить тип диаграммы (блок-схема, диаграмма связей, карта мыслей, архитектура), ключевые элементы (сущности, шаги, понятия), связи (поток, соединения, иерархия) и сложность (количество элементов).
02
Выбрать подходящий тип диаграммы
Сопоставляет намерение пользователя с типом диаграммы, распознавая ключевые слова.
03
Извлечь структурированную информацию
Перечисляет элементы в зависимости от типа диаграммы. Для блок-схем: последовательные шаги, точки принятия решений, начальная и конечная точки.
04
Сгенерировать JSON для Excalidraw
Создаёт файл .excalidraw с соответствующими типами элементов (прямоугольник, эллипс, ромб, стрелка, текст) и задаёт ключевые свойства, включая позицию (координаты x, y), размер (width, height), стиль (strokeColor, backgroundColor, fillStyle), шрифт (fontFamily: 5 для Excalifont) и связи (массив points для стрелок).
05
Отформатировать вывод
Формирует полный файл Excalidraw с type, version, source, массивом elements, appState (viewBackgroundColor, gridSize) и объектом files.
06
Сохранить и предоставить инструкции
Сохраняет файл как descriptive-name.excalidraw и объясняет пользователю, как его открыть: посетить excalidraw.com, нажать Open или перетащить файл, либо использовать расширение Excalidraw для VS Code.

02 Определите своё применение

Когда использовать skill excalidraw-diagram-generator

Используйте skill excalidraw-diagram-generator в Claude Code или Codex, когда задача — диаграммы и схемы такого рода. Возможности и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

Последовательные процессы, рабочие процессы и деревья решений с помощью блок-схем
Связи сущностей, компоненты системы и зависимости с помощью диаграмм связей
Иерархии понятий, результаты брейнштормов и организация тем с помощью карт мыслей
Проектирование системы, взаимодействие модулей и поток данных с помощью архитектурных диаграмм
Межфункциональные рабочие процессы и потоки процессов на основе акторов с помощью диаграмм-дорожек бизнес-процессов

Знайте границы

Сложные кривые, которые упрощаются до прямых или базовых изогнутых линий
Встроенные изображения при автоматической генерации не поддерживаются
Диаграммы с более чем 20 элементами, так как максимально рекомендуемое количество — 20 на диаграмму
Автоматическое обнаружение коллизий, так как skill вместо этого использует рекомендации по отступам

Что предоставить

Чёткое описание того, что нужно визуализироватьОписание на естественном языке процесса, системы, связей или понятий, которые нужно изобразить на диаграмме
Определение ключевых сущностей, шагов или понятийОсновные компоненты, которые станут элементами диаграммы
Понимание связей или потока между элементамиКак соединяются сущности, какова последовательность шагов или иерархическая структура

03 Внутри скилла

Правила, которые skill excalidraw-diagram-generator задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

Ограничения по количеству элементов
Шаги блок-схемы: рекомендуется 3–10, максимум 15. Сущности отношений: рекомендуется 3–8, максимум 12. Ветви ментальной карты: рекомендуется 4–6, максимум 8.
Обязательное семейство шрифта
Все текстовые элементы должны использовать fontFamily: 5 (Excalifont) для единообразного визуального оформления. Это требование проверяется в чек-листе валидации.
Рекомендации по отступам
Горизонтальный зазор между элементами: 200–300px. Вертикальный зазор между рядами: 100–150px. Размер текста: 16–24px для читаемости.
Единообразие цветовой схемы
Основные элементы используют светло-синий (#a5d8ff), вторичные элементы — светло-зелёный (#b2f2bb), важные/центральные элементы — жёлтый (#ffd43b), а предупреждения/оповещения — светло-красный (#ffc9c9).
Управление сложностью
Если в запросе пользователя слишком много элементов, предложите разбить на несколько диаграмм, сначала сосредоточьтесь на основных элементах и предложите создать детализированные под-диаграммы.
Направление потока данных
Для диаграмм потоков данных не отображайте порядок процессов, только поток данных. Потоки данных должны отображаться слева направо или из верхнего левого угла в нижний правый.
Максимальное количество элементов
Количество элементов должно быть разумным — менее 20 элементов для ясности. Это проверяется в чек-листе валидации перед сдачей.
Уникальные ID и отсутствие перекрытий
У всех элементов должны быть уникальные ID, а координаты должны исключать перекрытие. Это обязательные проверки перед сдачей диаграммы.

04 Применение

Установите excalidraw-diagram-generator в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте excalidraw-diagram-generator в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

Стандартная форма CLI команды skills для skills/excalidraw-diagram-generator/SKILL.md; репозиторий может документировать свой собственный путь.

Дайте навыку первую задачу на диаграммы и графики

Адаптируйте этот промт с вашим содержимым и ограничениями, затем запустите его в Claude Code или Codex.

Example prompt

Create a flowchart for user registration

Источник: пример SKILL.md (буквально).

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Убедитесь, что у всех элементов уникальные ID
Проверьте, что текст читаем при размере шрифта 16 или больше
Убедитесь, что все текстовые элементы используют fontFamily: 5 (Excalifont)
Подтвердите, что стрелки соединены логично, а цвета следуют единой схеме

В OpenDesign импортируйте excalidraw-diagram-generator по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: GitHub
Repository: github.com/github/awesome-copilot Ветка main
Файл skill: skills/excalidraw-diagram-generator/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 1899b18
License: MIT Из LICENSE.
Звёзды репозитория: 38 981 Снимок GitHub сделан 2026-09-14 для всего репозитория github/awesome-copilot, который содержит 6 навыков в этом каталоге. Не является рейтингом или счётчиком использования для excalidraw-diagram-generator.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Когда использовать этот skillПеречисляет триггерные фразы и поддерживаемые типы диаграмм, включая блок-схемы, отношения, ментальные карты, архитектуру, DFD, диаграммы дорожек (swimlane), классов, последовательностей и ER-диаграммы
Предварительные требованияТребуется чёткое описание, определение ключевых сущностей или шагов, а также понимание связей или последовательности
Пошаговый workflowПроцесс из шести шагов: от понимания запроса до выбора типа диаграммы, извлечения информации, генерации JSON, форматирования вывода и сохранения с инструкциями
РекомендацииРекомендации по количеству элементов, советы по расположению и интервалам, цветовые схемы, размер текста и стратегии управления сложностью
Примеры запросов и ответовТри примера: блок-схема регистрации пользователя, связи «пользователь — публикация — комментарий» и mind map по машинному обучению с шагами извлечения
Устранение неполадокРешения для перекрывающихся элементов, проблем с размещением текста, избыточного количества элементов, неясной раскладки и несогласованных цветов
Продвинутые техникиФормула сеточной раскладки для диаграмм связей, радиальная раскладка для mind map и шаблон автогенерации ID на основе временной метки и случайной строки
Формат выводаВсегда предоставляйте полный JSON-файл .excalidraw, сводку с количеством элементов и инструкции по открытию в excalidraw.com или VS Code
Чек-лист проверкиВосемь проверок перед сдачей результата: уникальные ID, отсутствие перекрывающихся координат, читаемый текст, шрифт Excalifont, логичные стрелки, согласованные цвета, валидный JSON и разумное количество элементов
Библиотеки иконок (опциональное улучшение)Workflow на Python для добавления иконок облачных сервисов из библиотек Excalidraw, включая инструкции по настройке и использование add-icon-to-diagram.py и add-arrow.py
Справочные материалыВстроенная документация по схеме, спецификации типов элементов, восемь шаблонов диаграмм, три Python-скрипта для интеграции иконок и стрелок, а также README к скриптам
ОграниченияУпрощённые кривые, отсутствие встроенных изображений, рекомендуется не более 20 элементов, отсутствует автоматическое определение коллизий

Собственное описание skill

«Генерирует диаграммы Excalidraw из описаний на естественном языке. Используйте, когда просят „создать диаграмму", „сделать блок-схему", „визуализировать процесс", „нарисовать архитектуру системы", „создать интеллект-карту" или „сгенерировать файл Excalidraw". Поддерживает блок-схемы, диаграммы связей, интеллект-карты и диаграммы архитектуры систем. Выводит JSON-файлы .excalidraw, которые можно открыть напрямую в Excalidraw.»

Описание из front-matter файла SKILL.md. Полный файл содержит около 24 276 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill excalidraw-diagram-generator

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Как открыть сгенерированный файл диаграммы?

Перейдите на excalidraw.com и нажмите Open или перетащите файл .excalidraw. Также можно использовать расширение Excalidraw для VS Code, чтобы открыть его прямо в редакторе.

Можно ли использовать иконки AWS или облачных сервисов в диаграммах?

Да, skill поддерживает библиотеки иконок с excalidraw.com/libraries. Вы скачиваете файл .excalidrawlib, запускаете скрипт split-excalidraw-library.py, чтобы разбить его на отдельные иконки, а затем используете Python-скрипты add-icon-to-diagram.py и add-arrow.py для добавления иконок и связей на диаграмму.

Такой подход избегает расхода токенов и обеспечивает точное преобразование координат с автоматической генерацией UUID.

Excalidraw Diagram Generator

Запустите excalidraw-diagram-generator на реальной задаче по созданию диаграмм и графиков.

Скачайте OpenDesign, импортируйте excalidraw-diagram-generator по ссылке на его SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

Что делает skill excalidraw-diagram-generator в Claude Code и Codex

Словами самого skill

Как это работает

Когда использовать skill excalidraw-diagram-generator

Хорошо подходит

Знайте границы

Что предоставить

Правила, которые skill excalidraw-diagram-generator задаёт Claude Code и Codex

Ограничения по количеству элементов

Обязательное семейство шрифта

Рекомендации по отступам

Единообразие цветовой схемы

Управление сложностью

Направление потока данных

Максимальное количество элементов

Уникальные ID и отсутствие перекрытий