Code To Chart
rongxinzy/RongxinAI
解析代码仓库的 import/依赖关系，自动生成架构图、流程图和组织架构图，输出 Mermaid 文本或 SVG 图片。支持 Python、JavaScript、TypeScript、Go 和 Java 项目。当用户需要可视化代码结构、分析模块依赖、生成架构文档，或提及“代码架构图”、“依赖关系图”、“流程图”、“组织架构图”、“Mermaid 图”等关键词时触发。
Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts.
Install Code To Diagram
$ npx skills add zebbern/claude-code-guide --skill code-to-diagram -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install zebbern/claude-code-guide code-to-diagram --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/code-to-diagram .claude/skills/code-to-diagram && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "code-to-diagram" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/code-to-diagram into .claude/skills/code-to-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-to-diagram", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/zebbern/claude-code-guide/tree/main/skills/code-to-diagramType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add zebbern/claude-code-guide --skill code-to-diagram -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install zebbern/claude-code-guide code-to-diagram --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/code-to-diagram .agents/skills/code-to-diagram && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "code-to-diagram" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/code-to-diagram into .agents/skills/code-to-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-to-diagram", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add zebbern/claude-code-guide --skill code-to-diagram -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install zebbern/claude-code-guide code-to-diagram --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/code-to-diagram .cursor/skills/code-to-diagram && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "code-to-diagram" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/code-to-diagram into .cursor/skills/code-to-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-to-diagram", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/zebbern/claude-code-guide.git --path skills/code-to-diagram--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add zebbern/claude-code-guide --skill code-to-diagram -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install zebbern/claude-code-guide code-to-diagram --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/code-to-diagram .gemini/skills/code-to-diagram && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "code-to-diagram" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/code-to-diagram into .gemini/skills/code-to-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-to-diagram", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install zebbern/claude-code-guide code-to-diagramInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add zebbern/claude-code-guide --skill code-to-diagram -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/code-to-diagram .github/skills/code-to-diagram && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "code-to-diagram" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/code-to-diagram into .github/skills/code-to-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-to-diagram", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add zebbern/claude-code-guide --skill code-to-diagram -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install zebbern/claude-code-guide code-to-diagram --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/code-to-diagram .opencode/skills/code-to-diagram && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "code-to-diagram" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/code-to-diagram into .opencode/skills/code-to-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-to-diagram", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
code-to-diagram- GitHub stars
- 4.6k
- Token cost
- ~972 tokens
- SKILL.md length
- 331 words
- Files
- 3 (incl. scripts)
- Skills in repo
- 46
- Repo updated
- First seen
- Licence
- MIT
At a glance
Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts.
- Works in 3 steps: Architecture Diagram —… → Flowchart — File-level import call chains → Org Chart — Directory/file hierarchy…
- Tasks that involve Diagrams
- SKILL.md covers Usage, How It Works, Use Cases and Dependencies, plus 1 more section
- Runs Python scripts from its folder; calls python3
What it does
Code To Diagram is an agent skill from zebbern/claude-code-guide. 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.
Its SKILL.md is about 970 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including scripts (for example `scripts/analyze_codebase.py`).
It sits in Development, covering Diagrams. It works with Mermaid, Java and Python. The repository describes itself as: Claude Code Guide - Setup, Commands, workflows, agents, skills & tips-n-tricks from beginner to power user! The licence is MIT.
When your agent uses it
- Tasks that involve Diagrams
Example prompts
- “/code-to-diagram”
Requirements
- Python 3
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Architecture Diagram — Module/directory-level dependency relationships
- Flowchart — File-level import call chains
- Org Chart — Directory/file hierarchy structure
What it can do on your machine
Read from SKILL.md and the folder at commit 4698e3b. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Code To Diagram loads about 972 tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 331 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from zebbern/claude-code-guide at commit 4698e3b, republished under its MIT licence (© zebbern). 331 words, ~972 tokens.
Download SKILL.mdSave it as
.claude/skills/code-to-diagram/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- 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:
- 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/projectOutputs 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 orgSpecify 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 bothOutput JSON Analysis Results
python3 scripts/analyze_codebase.py /path/to/project --jsonParameters
| 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
astmodule to parseimportandfrom ... importstatements - JS/TS files: uses regex to match
import,require, andexport from - Go files: uses regex to match
importstatements - Java files: uses regex to match
importstatements
- Python files: uses the
- 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.mmdfiles 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-filesto limit the scan scope - Mermaid diagrams with too many nodes may be hard to render; use
--typeto generate diagrams separately
© zebbern, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (scripts) in skills/code-to-diagram of zebbern/claude-code-guide.
- SKILL.md
- LICENSE
- scripts/analyze_codebase.py
Open the folder on GitHubat commit 4698e3b
Compare with similar skills
Code To Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Code To Diagram this skillzebbern/claude-code-guide | 4.6k | — | ~972 | Automated safety check: Pass | MIT | |
| Code To Chartrongxinzy/RongxinAI | 154 | — | ~596 | Automated safety check: Pass | MIT | |
| Code Graph Mermaid Diagramstrailofbits/skills | 7.4k | — | ~1.7k | Automated safety check: Pass | CC-BY-SA-4.0 | |
| Design Doc MermaidSpillwaveSolutions/design-doc-mermaid | 175 | 1 repos | ~5.6k | Automated safety check: Pass | None | |
| Markdown Mermaid Writingneflibata-feng/MyArxiv-Agent | 126 | 5 repos | ~3.8k | Automated safety check: Notes | Apache-2.0 | |
| Generate Readmedivar-ir/ai-doc-gen | 765 | — | ~996 | Automated safety check: Pass | MIT |
Similar skills
- Official
Code Graph Mermaid Diagrams
trailofbits/skills
Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.
Design Doc Mermaid
SpillwaveSolutions/design-doc-mermaid
Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.
Markdown Mermaid Writing
neflibata-feng/MyArxiv-Agent
Comprehensive markdown and Mermaid diagram writing skill that establishes text-based diagrams as the DEFAULT documentation standard.
Generate Readme
divar-ir/ai-doc-gen
Generate or refresh a comprehensive, professional README.md for a repository, with architecture overview, mermaid and optional C4 diagrams, repository structure, dependencies, and API documentation.
Book Writer
aospbooks/aosp-internal-book
Patterns for writing technical book chapters in Markdown with Mermaid diagrams, served via ProperDocs (a MkDocs fork).
More from zebbern/claude-code-guide
All 46 skills in this repoLocalization Toolkit
zebbern/claude-code-guide
This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the…
Audit Flow
zebbern/claude-code-guide
Interactive system flow tracing across CODE, API, AUTH, DATA, NETWORK layers with SQLite persistence and Mermaid export.
Chart Image
zebbern/claude-code-guide
Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts.
Code Vuln Audit
zebbern/claude-code-guide
Scan code for security issues: dependency vulnerabilities (npm/pip audit), secret leaks (regex and entropy analysis), and OWASP anti-patterns like SQL injection, XSS, or command injection.
Data Viz Renderer
zebbern/claude-code-guide
Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards.
Idor Testing
zebbern/claude-code-guide
This skill should be used when the user asks to "test for insecure direct object references," "find IDOR vulnerabilities," "exploit broken access control," "enumerate user IDs or object references,"…
Related
Categories
Questions about Code To Diagram
What does Code To Diagram do?
Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts. Code To Diagram is an agent skill from zebbern/claude-code-guide. Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts.
When should I use Code To Diagram?
Code To Diagram fits situations like: tasks that involve Diagrams.
How do I install Code To Diagram in Claude Code?
Run `npx skills add zebbern/claude-code-guide --skill code-to-diagram -a claude-code`. Or copy the skill folder (skills/code-to-diagram in zebbern/claude-code-guide) into .claude/skills/code-to-diagram in your project. Claude Code loads it when a task matches its description.
How do I install Code To Diagram in Codex?
Run `npx skills add zebbern/claude-code-guide --skill code-to-diagram -a codex`. Or copy the skill folder (skills/code-to-diagram in zebbern/claude-code-guide) into .agents/skills/code-to-diagram in your project. Codex loads it when a task matches its description.
Can I use Code To Diagram in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add zebbern/claude-code-guide --skill code-to-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/code-to-diagram, .gemini/skills/code-to-diagram, .github/skills/code-to-diagram and .opencode/skills/code-to-diagram in your project.
What does Code To Diagram need to run?
Going by SKILL.md and its folder, Code To Diagram needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3.
Does Code To Diagram access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Code To Diagram safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Code To Diagram use?
Code To Diagram is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Code To Diagram use?
About 972 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Code To Diagram?
Skills that share tags, products or a category with Code To Diagram: Code To Chart (rongxinzy/RongxinAI, 154 stars), Code Graph Mermaid Diagrams (trailofbits/skills, 7.4k stars), Design Doc Mermaid (SpillwaveSolutions/design-doc-mermaid, 175 stars) and Markdown Mermaid Writing (neflibata-feng/MyArxiv-Agent, 126 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Code To Diagram?
zebbern (a GitHub user) maintains it in zebbern/claude-code-guide, which has 4,648 GitHub stars. The repository holds 46 skills in this directory. The repository was last updated on October 7, 2026.
Source: zebbern/claude-code-guide on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.