cathrynlavery/diagram-design

Что это?

Ключевые возможности

• 01Создаёт один автономный HTML-файл со встроенным SVG, который открывается в любом браузере.
• 02Поддерживает 45 типов диаграмм, включая архитектурные, последовательностей, блок-схемы, ER-диаграммы, диаграммы Ганта и графики.
• 03Извлекает палитру и шрифты с сайта, чтобы применять стиль бренда ко всем диаграммам.
• 04Перерисовывает существующие файлы draw.io, Mermaid и Excalidraw в едином стиле.
• 05Экспортирует диаграммы в SVG или PNG; доступен дополнительный режим с локальными шрифтами.

Сценарии использования

• Создание архитектурных диаграмм или диаграмм последовательностей для технических статей и документации.
• Преобразование диаграммы Mermaid или draw.io в оформленную иллюстрацию для слайдов.
• Сохранение единого стиля диаграмм в соответствии с брендом сайта компании на протяжении всего проекта.
• Создание квадрантных диаграмм, диаграмм Венна или таймлайнов для презентаций.

Быстрый старт

1. 1

   Установите skill с помощью skills CLI

   npx skills add cathrynlavery/diagram-design
2. 2

   В Claude Code добавьте marketplace плагинов (необязательно)

   /plugin marketplace add cathrynlavery/diagram-design
3. 3

   В Claude Code установите плагин (необязательно)

   /plugin install diagram-design@diagram-design
4. 4

   Попросите агента обычными словами создать диаграмму — он подготовит один файл .html, который можно открыть в браузере

Что важно знать

• !Качество результата зависит от используемой модели, а один и тот же prompt может приводить к разным вариантам оформления.
• !Результат не представлен в редактируемом исходном формате, поэтому текст для просмотра различий отсутствует, как и холст для непосредственного редактирования.
• !Согласно README, обновления пакета могут заменить руководство по стилю skill, если вы настроили его при управляемой установке.

Темы

Частые вопросы

Что такое diagram-design?

Навык для агентских инструментов, который создаёт редакционные диаграммы в одном автономном HTML-файле с SVG и поддерживает 45 типов диаграмм и оформление в стиле бренда. Diagram Design — это навык для агентских инструментов программирования, таких как Claude Code, Codex, GitHub Copilot, Cursor и Pi. Вы описываете диаграмму обычным языком, а агент выбирает один из 45 типов и создаёт HTML-файл со встроенным SVG. Файл можно открыть прямо в браузере — сборка и JavaScript не нужны.

diagram-design можно использовать бесплатно? Какая у него лицензия?

diagram-design распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

diagram-design всё ещё поддерживается?

Активно поддерживается. Последний коммит в diagram-design — 16 окт. 2026 г..

Для чего можно использовать diagram-design?

Создание архитектурных диаграмм или диаграмм последовательностей для технических статей и документации. Преобразование диаграммы Mermaid или draw.io в оформленную иллюстрацию для слайдов. Сохранение единого стиля диаграмм в соответствии с брендом сайта компании на протяжении всего проекта. Создание квадрантных диаграмм, диаграмм Венна или таймлайнов для презентаций.

Как установить diagram-design?

Установите skill с помощью skills CLI: npx skills add cathrynlavery/diagram-design В Claude Code добавьте marketplace плагинов (необязательно): /plugin marketplace add cathrynlavery/diagram-design В Claude Code установите плагин (необязательно): /plugin install diagram-design@diagram-design Попросите агента обычными словами создать диаграмму — он подготовит один файл .html, который можно открыть в браузере

Где скачать diagram-design?

Исходный код и инструкции по установке — на GitHub: https://github.com/cathrynlavery/diagram-design