How do I install the Code To Diagram skill?

Run npx skillmds@latest add jantoniofc/code-to-diagram in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Code To Diagram safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Code To Diagram?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Code To Diagram free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Code To Diagram?

JantonioFC (@jantoniofc) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Code To Diagram by jantoniofc — Agent Skill

Name: Code To Diagram
Rating: 4.5 (4 reviews)
Author: JantonioFC

File contents

Code to Diagram

Extract import and dependency relationships from a codebase via AST parsing, and automatically generate three types of diagrams:

Architecture Diagram — Module/directory-level dependency relationships
Flowchart — File-level import call chains
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

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

# 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

# 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

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

Scan phase: Recursively traverse the directory, skipping node_modules, .git, __pycache__, etc.
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
Resolve internal dependencies: Maps import paths to actual files within the project
Generate diagrams: Converts dependency relationships into Mermaid diagram syntax
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

Activation Triggers

Triggered when users ask to visualize code architecture, understand dependencies, draw a flowchart, or create a module diagram from source code.

---name: code-to-diagramdescription: 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.license: MIT---# Code to DiagramExtract import and dependency relationships from a codebase via AST parsing, and automatically generate three types of diagrams:1. **Architecture Diagram** — Module/directory-level dependency relationships2. **Flowchart** — File-level import call chains3. **Org Chart** — Directory/file hierarchy structureSupported languages: Python, JavaScript, TypeScript, Go, JavaOutput formats: Mermaid text (`.mmd`) or SVG images (requires `mmdc` installed on the system)## Usage### Basic: Analyze an Entire Project```bashpython3 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 onlypython3 scripts/analyze_codebase.py /path/to/project --type architecture# Flowchart onlypython3 scripts/analyze_codebase.py /path/to/project --type flowchart# Org chart onlypython3 scripts/analyze_codebase.py /path/to/project --type org```### Specify Output Directory and Format```bash# Output to a specific directorypython3 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 SVGpython3 scripts/analyze_codebase.py /path/to/project --format both```### Output JSON Analysis Results```bashpython3 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 Works1. **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` statements3. **Resolve internal dependencies**: Maps import paths to actual files within the project4. **Generate diagrams**: Converts dependency relationships into Mermaid diagram syntax5. **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## Activation TriggersTriggered when users ask to visualize code architecture, understand dependencies, draw a flowchart, or create a module diagram from source code.

Frequently asked questions

Code To Diagram