code-to-diagram — скилл для Claude Code: что делает и установка
Скилл разбирает импорты в кодовой базе и строит архитектурные схемы, блок-схемы и иерархии файлов. Пригодится перед ревью или рефакторингом.
npx skills add zebbern/claude-code-guide --skill code-to-diagram -a claude-codeЧто делает code-to-diagram
code-to-diagram рекурсивно просматривает проект и связывает импорты с файлами внутри него. Для Python используется модуль ast, а для JavaScript, TypeScript, Go и Java — разбор конструкций импорта через регулярные выражения. На выходе получаются архитектурная диаграмма по модулям, блок-схема цепочек импортов и схема иерархии каталогов и файлов.
Скилл запускает scripts/analyze_codebase.py. Он умеет сохранять Mermaid в .mmd, выдавать результаты в JSON и отправлять схемы в заданный каталог. Тип диаграммы, формат, глубину и число сканируемых файлов можно задать параметрами --type, --format, --max-depth и --max-files.
Для работы нужен Python 3.7+ со стандартной библиотекой. SVG-вывод требует установленного @mermaid-js/mermaid-cli, потому что рендеринг выполняется через mmdc. Динамические импорты скилл не отслеживает, а слишком большая схема может плохо отображаться.
Какие задачи решает
- разобрать связи модулей в незнакомом проекте
- построить схему импортов между файлами
- подготовить Mermaid-диаграмму для документации
- найти циклические зависимости перед рефакторингом
- ограничить анализ числом файлов или глубиной каталогов
Примеры запросов агенту
- Построй архитектурную диаграмму проекта и сохрани её в Mermaid.
- Покажи цепочки импортов в
srcкак блок-схему. - Проанализируй проект и создай SVG-схемы в
/tmp/diagrams.
Как установить code-to-diagram
1Через Skills CLI (Vercel)
npx skills add zebbern/claude-code-guide --skill code-to-diagram -a claude-code2Вручную: положить файлы
~/.claude/skills/code-to-diagram/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/code-to-diagram/
1Через Skills CLI (Vercel)
npx skills add zebbern/claude-code-guide --skill code-to-diagram -a codex2Вручную: положить файлы
.agents/skills/code-to-diagram/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add zebbern/claude-code-guide --skill code-to-diagram -a cursor2Вручную: положить файлы
.cursor/skills/code-to-diagram/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install zebbern/claude-code-guide code-to-diagram2Вручную: положить файлы
.github/skills/code-to-diagram/SKILL.md1Через Skills CLI (Vercel)
npx skills add zebbern/claude-code-guide --skill code-to-diagram -a gemini-cli2Командой платформы
gemini skills install https://github.com/zebbern/claude-code-guide --path skills/code-to-diagramВручную: положить файлы
.devin/skills/code-to-diagram/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add zebbern/claude-code-guide --skill code-to-diagram -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о code-to-diagram
Как установить code-to-diagram в Claude Code?
Выполните npx skills add zebbern/claude-code-guide --skill code-to-diagram -a claude-code, затем проверьте файл ~/.claude/skills/code-to-diagram/SKILL.md.
Что делает code-to-diagram?
Скилл извлекает статические связи импортов и строит архитектурную диаграмму, блок-схему или схему структуры файлов. Результат можно получить в Mermaid, SVG или JSON.
Что нужно для SVG-диаграмм и какие импорты учитываются?
Для SVG нужен установленный @mermaid-js/mermaid-cli, который предоставляет mmdc. Скилл анализирует статические импорты, но динамические импорты не отслеживает.
Исходный текст
SKILL.md · MIT
--- name: code-to-diagram description: "Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts. Uses AST parsing to map import dependencies for Python, JS/TS, Go, and Java, outputting Mermaid or SVG files. Triggered when users ask to visualize code architecture, understand dependencies, draw a flowchart, or create a module diagram from source code." license: MIT type: tool tags: ["visualization", "architecture", "mermaid", "ast", "diagram"] --- # Code to Diagram Extract import and dependency relationships from a codebase via AST parsing, and automatically generate three types of diagrams: 1. **Architecture Diagram** — Module/directory-level dependency relationships 2. **Flowchart** — File-level import call chains 3. **Org Chart** — Directory/file hierarchy structure Supported languages: Python, JavaScript, TypeScript, Go, Java Output formats: Mermaid text (`.mmd`) or SVG images (requires `mmdc` installed on the system) ## Usage ### Basic: Analyze an Entire Project ```bash python3 scripts/analyze_codebase.py /path/to/project ``` Outputs three Mermaid diagrams to stdout and writes `.mmd` files to the current directory. ### Specify Diagram Type ```bash # Architecture diagram only python3 scripts/analyze_codebase.py /path/to/project --type architecture # Flowchart only python3 scripts/analyze_codebase.py /path/to/project --type flowchart # Org chart only python3 scripts/analyze_codebase.py /path/to/project --type org ``` ### Specify Output Directory and Format ```bash # Output to a specific directory python3 scripts/analyze_codebase.py /path/to/project --output /tmp/diagrams # Output as SVG (requires mmdc) python3 scripts/analyze_codebase.py /path/to/project --format svg # Output both Mermaid and SVG python3 scripts/analyze_codebase.py /path/to/project --format both ``` ### Output JSON Analysis Results ```bash python3 scripts/analyze_codebase.py /path/to/project --json ``` ### Parameters | Parameter | Description | |-----------|-------------| | `directory` | Code directory to analyze (required) | | `--type, -t` | Diagram type: `architecture`, `flowchart`, `org`, `all` (default: `all`) | | `--output, -o` | Output directory (default: current directory) | | `--format, -f` | Output format: `mermaid`, `svg`, `both` (default: `mermaid`) | | `--max-files` | Maximum number of files to scan (default: 500) | | `--max-depth` | Maximum depth for org chart (default: 4) | | `--json` | Output analysis results in JSON format | ## How It Works 1. **Scan phase**: Recursively traverse the directory, skipping `node_modules`, `.git`, `__pycache__`, etc. 2. **Parse phase**: - Python files: uses the `ast` module to parse `import` and `from ... import` statements - JS/TS files: uses regex to match `import`, `require`, and `export from` - Go files: uses regex to match `import` statements - Java files: uses regex to match `import` statements 3. **Resolve internal dependencies**: Maps import paths to actual files within the project 4. **Generate diagrams**: Converts dependency relationships into Mermaid diagram syntax 5. **Render (optional)**: Calls `mmdc` (Mermaid CLI) to render `.mmd` files as SVG ## Use Cases - Quickly understand the module structure of an unfamiliar project - Visualize dependencies during code review - Create architecture diagrams for technical documentation - Detect circular dependencies or excessive coupling - Analyze project structure before refactoring ## Dependencies - Python 3.7+ (standard library only, no extra packages needed) - SVG output requires `@mermaid-js/mermaid-cli` (optional) ## Notes - Only analyzes static import relationships; dynamic imports are not tracked - For large projects, use `--max-files` to limit the scan scope - Mermaid diagrams with too many nodes may be hard to render; use `--type` to generate diagrams separately
© zebbern · MIT · zebbern/claude-code-guide