Генератор архитектурных диаграмм
Architecture Diagram Generator
Скилл рисует архитектурную схему системы в виде одного HTML-файла с SVG, кнопками копирования и экспорта в PNG и PDF
- 7 504 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл содержит только инструкции и HTML-шаблон
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/architecture-diagram-generatorОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл содержит только инструкции и HTML-шаблон
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
По текстовому описанию системы скилл собирает диаграмму архитектуры в темной теме. Компоненты окрашиваются по типу: фронтенд, бэкенд, базы, облако, безопасность, шина сообщений и внешние системы. Группы безопасности и регионы выделяются пунктирными рамками, стрелки показывают потоки данных. Под схемой добавляются карточки с ключевыми деталями. Результат открывается в любом браузере, а в шапке есть кнопки для копирования картинки и выгрузки в PNG или PDF.
Для кого. Для разработчиков, архитекторов и техписателей, которым нужна аккуратная схема системы без графического редактора.
Подходит, если
- Нужна схема архитектуры для документации или презентации
- Нужно наглядно показать облачную инфраструктуру и связи сервисов
- Хотите быстро пересобирать схему правками в чате
Не подходит, если
- Нужна пошаговая схема процесса: для этого у автора есть отдельный скилл
- Нужна диаграмма в редактируемом формате вроде draw.io или Mermaid
Пример запроса к агенту
Нарисуй архитектурную схему: фронтенд на React, API на Node.js, PostgreSQL, Redis для кэша, все в AWS за CloudFrontОграничения
Стиль один: темная тема с моноширинным шрифтом JetBrains Mono, который подгружается с Google Fonts, поэтому без доступа к ним шрифт заменится системным. В claude.ai для загрузки скилла нужно включить выполнение кода.
Как отключить. В claude.ai выключите или удалите скилл в разделе Customize, Skills. В Claude Code удалите папку architecture-diagram из ~/.claude/skills.
Частые вопросы
Откуда взять описание архитектуры?
Можно попросить агента проанализировать кодовую базу, написать список компонентов вручную или попросить типовую архитектуру для вашего вида продукта.
Нужно ли что-то ставить, чтобы открыть результат?
Нет, это один HTML-файл со встроенными стилями и SVG.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл рисует редакторские диаграммы как самостоятельные файлы HTML и SVG: архитектура, блок-схемы, ER, воронки и еще около сорока типов
Скилл рисует по короткой JSON-спецификации анимированные диаграммы 45 типов и сохраняет их в HTML, SVG, PNG, GIF и MP4
Скилл рисует проверенные схемы архитектуры, процессов, последовательностей и потоков данных в один интерактивный HTML-файл
Скилл для редактируемых диаграмм draw.io из текста, кода, Terraform, Kubernetes, SQL и OpenAPI с экспортом и самопроверкой
Скилл рисует анимированные схемы архитектуры и процессов в стиле рисунка от руки: темный неон и светлая бумага. README на китайском
Draw.io Skill
Draw.io Skill for Claude & Codex
Скиллы для диаграмм draw.io: архитектура, сети, блок-схемы, импорт из Terraform и кода, офлайн-генерация из YAML и экспорт в PNG и SVG
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Генератор архитектурных диаграмм (эта запись) | нет | 7 504 | |
| Anatomy | нет | 22 392 | скилл рисует интерактивные изометрические иллюстрации в SVG |
| tld — диаграммы архитектуры | нет | 294 | CLI и веб-интерфейс для диаграмм архитектуры по модели C4 |
| ClaudeMap | нет | 295 | скилл строит карту репозитория по смысловым блокам |
Из блога
Коротко о README
README предлагает три шага: установить скилл, получить текстовое описание системы и попросить Claude нарисовать схему. Даны примеры запросов для веб-приложения, бессерверной схемы в AWS и микросервисов, таблица цветов по типам компонентов и описание структуры выходного файла. Установка через загрузку архива в claude.ai, в знания проекта или распаковку в каталог скиллов Claude Code. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: architecture-diagram description: Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams. --- # Architecture Diagram Skill Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling. > **Version 1.1** · MIT License · Authored by [Cocoon AI](mailto:hello@cocoon-ai.com) ## Design System ### Color Palette Use these semantic colors for component types: | Component Type | Fill (rgba) | Stroke | |---------------|-------------|--------| | Frontend | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) | | Backend | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) | | Database | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) | | AWS/Cloud | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) | | Security | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) | | Message Bus | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) | | External/Generic | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) | ### Typography Use JetBrains Mono for all text (monospace, technical aesthetic): ```html <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> ``` Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.