AIKraft/AI/Войти
AIKraft/Skills/architecture-diagram

architecture-diagram

Генерирует стильные диаграммы архитектуры (систем, инфраструктуры, облаков, безопасности, сетей) в виде самодостаточных HTML+SVG файлов с темной темой. Используйте, когда пользователь запрашивает визуализацию топологии или архитектуры.

CACocoon AI official Разработка ★ 7.4k

Что делает навык

Генерирует профессиональные диаграммы архитектуры (систем, инфраструктуры, облаков, безопасности, сетей) в виде самодостаточных HTML-файлов с встроенной SVG-графикой и темной темой. Включает встроенную панель экспорта для сохранения в PNG или PDF.

Когда применять

  • Визуализация топологии сети или архитектуры микросервисов
  • Создание схем облачной инфраструктуры (AWS/Cloud) и зон безопасности
  • Отрисовка диаграмм потоков данных с использованием очередей сообщений (Kafka, RabbitMQ)
  • Подготовка технических артефактов для документации с возможностью экспорта

Как работает

  1. Определить типы компонентов (Frontend, Backend, Database, AWS/Cloud, Security, Message Bus, External) и применить соответствующие цвета из палитры (rgba fill и stroke)
  2. Спроектировать макет с учетом правил отступов: минимальный вертикальный зазор 40px, размещение шин сообщений в промежутках между компонентами, а не поверх них
  3. Нарисовать стрелки связей в SVG до отрисовки блоков компонентов, чтобы они проходили под ними, используя полупрозрачные заполнители для маскировки
  4. Разместить легенду строго вне границ всех областей (регионов, кластеров, групп безопасности), увеличив viewBox при необходимости
  5. Собрать HTML-шаблон с подключением CDN-скриптов html2canvas и jspdf, вставив SVG и карточки сводки, сохранив структуру панели экспорта

Примеры запросов агенту

Построй диаграмму архитектуры микросервисного приложения с базой данных и Kafka
Сгенерируй схему облачной инфраструктуры AWS с зонами безопасности
Создай визуализацию сети с внешними сервисами и внутренними бэкенд-компонентами

Что понадобится

  • Доступ к интернету для загрузки шрифтов Google Fonts (JetBrains Mono) и библиотек html2canvas, jspdf через CDN
  • Браузер для рендеринга HTML+SVG и выполнения экспорта (PNG/PDF)
  • HTTPS или localhost для работы Clipboard API при копировании изображений

Описание составлено по SKILL.md навыка, сверено 09.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «cocoon-ai-architecture-diagram» из репозитория: # https://github.com/cocoon-ai/architecture-diagram-generator
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r cocoon-ai-architecture-diagram/ ~/.claude/skills/cocoon-ai-architecture-diagram/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.