Diagram Design генерує брендовані архітектурні діаграми у Claude Code та Codex
Diagram Design — це агентський скіл для Claude Code, Codex і Pi, що створює чисті SVG-діаграми за 27 візуальними патернами. Інструмент за 60 секунд витягує палітру вашого сайту й адаптує графіку під айдентику бренду.
Вплив: Середній
Чому це важливо
Встановіть цей скіл у своє агентське середовище розробки, щоб генерувати готові архітектурні SVG-схеми та діаграми систем просто з текстового опису.
TL;DR
- 01Містить 27 адаптивних типів схем для агентських консольних інтерфейсів
- 02Автоматично імпортує кольори та шрифтові гарнітури з URL-адреси вашого сайту
- 03Гарантує доступність коду SVG та валідацію контрасту за стандартом WCAG AA
Ключові факти
- Кількість типів діаграм
- 27 візуальних патернів
- Підтримувані середовища
- Claude Code, OpenAI Codex, Pi
- Формат виводу
- Статичний SVG / HTML
Універсальна інтеграція в AI-агенти
Diagram Design підключається до Claude Code, OpenAI Codex та Pi за допомогою стандартних команд керування плагінами. Інструмент містить 27 базових візуальних шаблонів, які генерують чистий векторний код без JavaScript та зовнішніх ресурсів.
Встановлення у Claude Code:
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designДля термінального клієнта Codex:
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-designАвтоматичний онбординг бренду та контроль контрастності
Команда онбордингу зчитує стилі безпосередньо з вебсайту. Команда onboard diagram-design to https://yoursite.com витягує кольори, зіставляє їх із семантичними ролями (акцентні елементи, фонові відтінки) та перевіряє контраст за критеріями WCAG AA для дрібних розмірів шрифту (9–12px), зберігаючи результат у references/style-guide.md.
Профілі проєктів та імпорт із Mermaid
Конфігурації зберігаються в ~/.diagram-design/profiles/. Файл .diagram-design із директивою profile: <slug> прив'язує окремий репозиторій до потрібного бренду. Інструмент також підтримує перетворення існуючих схем із Mermaid та draw.io у векторний формат.
Спробуй за 2 хвилини
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designbash
✓ Коли використовувати
- Створення технічної документації та схем архітектури безпосередньо в консольному агенті
- Заміна ручного малювання блок-схем у Figma чи Miro
- Стилізація схем Mermaid для публікації в технічних блогах та базах знань
Що зробити сьогодні
- Підключіть плагін diagram-design до свого середовища Claude Code або Codex
- Запустіть онбординг для власного домену, щоб сформувати файл семантичних токенів
- Спробуйте конвертувати існуючі схеми Mermaid у векторні SVG-ілюстрації
Джерела