Diagram Design — skill для AI-агентов, предназначенный для создания аккуратных профессиональных диаграмм и схем. Вместо стандартных блок-схем в стиле Mermaid он генерирует визуально оформленные диаграммы в виде самостоятельных HTML + SVG файлов.
Поддерживает Claude Code, Codex и Pi. Агент самостоятельно выбирает подходящий тип диаграммы, структуру и оформление на основе описания пользователя.
Возможности
- 27 типов диаграмм: архитектура, flowchart, sequence, ER-модели, timeline, Gantt, оргструктуры, деревья, data flow, графики и другие;
- генерация HTML, SVG и PNG;
- светлые, тёмные и расширенные editorial-шаблоны;
- автоматическая адаптация цветов и шрифтов под дизайн сайта;
- импорт и перерисовка диаграмм из Mermaid и draw.io;
- опциональная анимация для пошагового отображения процессов;
- готовые файлы не требуют отдельной сборки или внешних зависимостей.
Пример запроса:
«Создай архитектурную диаграмму приложения: frontend, backend, PostgreSQL и Redis».
«Создай архитектурную диаграмму приложения: frontend, backend, PostgreSQL и Redis».
Примеры диаграмм
