architecture-diagram-creator — скилл для Claude Code: суть и запуск
Генерирует автономный HTML-файл с архитектурной схемой проекта и SVG-диаграммами потоков данных. Пригодится, когда нужно задокументировать систему или показать пайплайн обработки.
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a claude-codeЧто делает architecture-diagram-creator
Скилл анализирует репозиторий, README и структуру файлов, после чего собирает единый отчёт [project]-architecture.html. В документ входят шесть секций: контекст продукта, потоки данных, многостадийный пайплайн обработки, архитектурные слои системы, функциональные требования и параметры развёртывания.
Для визуализации связей генератор строит встроенные SVG-схемы прямо в разметке. В них используется чёткая семантическая палитра: синий #4299e1 для источников данных, оранжевый #ed8936 для обработки, фиолетовый #9f7aea для ИИ и зелёный #48bb78 для готовых результатов.
Вся вёрстка строится на стандартном HTML и встроенных стилях без сторонних библиотек. Поэтому сгенерированную схему можно сразу открыть в обычном браузере.
Какие задачи решает
- составить документацию по архитектуре проекта
- визуализировать движение данных от источников к выводам
- описать слои системы и пайплайн обработки
- собрать требования к развёртыванию в отдельный документ
Примеры запросов агенту
- Создай архитектурную диаграмму для текущего проекта
- Документируй системную архитектуру и покажи пайплайн обработки данных
- Сделай обзор архитектуры проекта в HTML
Как установить architecture-diagram-creator
1Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a claude-code2Вручную: положить файлы
~/.claude/skills/architecture-diagram-creator/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/architecture-diagram-creator/
1Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a codex2Вручную: положить файлы
.agents/skills/architecture-diagram-creator/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a cursor2Вручную: положить файлы
.cursor/skills/architecture-diagram-creator/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mhattingpete/claude-skills-marketplace architecture-diagram-creator2Вручную: положить файлы
.github/skills/architecture-diagram-creator/SKILL.md1Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a gemini-cli2Командой платформы
gemini skills install https://github.com/mhattingpete/claude-skills-marketplace --path visual-documentation-plugin/skills/architecture-diagram-creatorВручную: положить файлы
.devin/skills/architecture-diagram-creator/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора7
Похожие
Рядом в теме «Тексты и документация»
Всё по теме «Тексты и документация» →Вопросы о architecture-diagram-creator
Как установить architecture-diagram-creator в Claude Code?
Выполните команду npx skills add mhattingpete/claude-skills-marketplace --skill architecture-diagram-creator -a claude-code в терминале или сохраните файл в ~/.claude/skills/architecture-diagram-creator/SKILL.md.
Что делает architecture-diagram-creator?
Скилл изучает структуру проекта и создаёт файл [project]-architecture.html. Внутри находятся шесть разделов с описанием архитектуры и SVG-схемы движения данных.
Какие разделы входят в итоговый HTML-файл?
Скилл генерирует блоки с бизнес-контекстом, потоками данных, пайплайном обработки, слоями архитектуры, списком функций и параметрами развёртывания.
Исходный текст
SKILL.md · Apache-2.0
---
name: architecture-diagram-creator
description: Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
---
# Architecture Diagram Creator
Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.
## When to Use
- "Create architecture diagram for [project]"
- "Generate high-level overview"
- "Document system architecture"
- "Show data flow and processing pipeline"
## Components to Include
1. **Business Context**: objectives, users, value, metrics
2. **Data Flow**: sources → processing → outputs with SVG diagram
3. **Processing Pipeline**: multi-stage visualization
4. **System Architecture**: layered components (data/processing/services/output)
5. **Features**: functional and non-functional requirements
6. **Deployment**: model, prerequisites, workflows
## HTML Structure
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Project] Architecture</title>
<style>
body { font-family: system-ui; max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; }
.section { margin: 30px 0; }
svg { max-width: 100%; }
/* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */
</style>
</head>
<body>
<h1>[Project Name] - Architecture Overview</h1>
<!-- Business Context Section -->
<!-- Data Flow Diagram (SVG) -->
<!-- Processing Pipeline (SVG) -->
<!-- System Architecture Layers -->
<!-- Features Grid -->
<!-- Deployment Info -->
</body>
</html>
```
## SVG Pattern for Data Flow
```html
<svg viewBox="0 0 800 400">
<!-- Data sources (left, blue) -->
<rect x="50" y="150" width="120" height="80" fill="#4299e1"/>
<!-- Processing (center, orange) -->
<rect x="340" y="150" width="120" height="80" fill="#ed8936"/>
<!-- Outputs (right, green) -->
<rect x="630" y="150" width="120" height="80" fill="#48bb78"/>
<!-- Arrows connecting -->
<path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>
```
## Workflow
1. Analyze project (README, code structure)
2. Extract: purpose, data sources, processing, tech stack, outputs
3. Create HTML with all 6 sections
4. Use semantic colors for visual hierarchy
5. Write to `[project]-architecture.html`
Keep diagrams clear, use consistent styling, include real project details.
© mhattingpete · Apache-2.0 · mhattingpete/claude-skills-marketplace
