Diagram Design: аккуратные схемы для публикации без возни в Figma
Обычно агент рисует схему из одинаковых скруглённых прямоугольников, которая не вяжется с остальным сайтом. Diagram Design записывает вкус в правила: один акцентный цвет для одного-двух главных узлов, линии в 1 пиксель, никаких теней, все координаты на сетке 4 пикселя. На выходе один HTML-файл со встроенным SVG, который открывается двойным щелчком.
45 типов: архитектура, блок-схемы, sequence, ER-модели, таймлайны, swimlane, квадранты, Sankey, карты Уордли, Ганта и другие
Каждый тип в трёх вариантах: минимальный светлый, минимальный тёмный и полный редакционный, без сборки и внешних картинок
Настройка под бренд: по адресу сайта скилл забирает палитру и шрифты, а профили клиентов хранятся в ~/.diagram-design/profiles/
Импорт готовых схем из draw.io, Mermaid и Excalidraw и экспорт результата в SVG или PNG
Перед первой схемой в проекте спрашивает, настроить ли стиль, чтобы не выпустить схемы в стандартных цветах
Когда пригодится
Нужна схема архитектуры для статьи в блоге, и она должна выглядеть частью сайта, а не скриншотом из редактора
Готовите презентацию для руководства и хотите квадрант проектов по эффекту и трудозатратам
Старые схемы в Mermaid или draw.io пора перерисовать в едином фирменном стиле
Попросите агента
Нарисуй схему архитектуры приложения: фронтенд, бэкенд, база данных и кэш Redis
Сделай квадрант проектов второго квартала по эффекту и трудозатратам
Настрой diagram-design под наш сайт по адресу и перерисуй эту схему из Mermaid
Вопросы
Как установить Diagram Design?
Командой npx skills add cathrynlavery/diagram-design. В Claude Code лучше поставить плагин: /plugin marketplace add cathrynlavery/diagram-design и /plugin install diagram-design@diagram-design — так приходят обновления и слэш-команды.
Работает ли Diagram Design в Codex и Cursor?
Да. Для Codex в README есть плагин через codex plugin marketplace add, а в Cursor скилл ставится через npx skills; поддержаны также Copilot, Gemini CLI, Windsurf и другие.
Чем Diagram Design отличается от Mermaid?
Mermaid — текст, который удобно хранить в Git и сравнивать. Diagram Design даёт готовую к публикации картинку в фирменном стиле, но не редактируемый исходник, и автор сам советует Mermaid для часто меняющейся документации.
