Agent Skills › dp-archive/archive › code-to-diagram

code-to-diagram

GitHub

基于源码生成架构、ER、时序等Mermaid图表。通过渐进式分析代码结构，使用mmdc渲染为SVG/PNG，辅助可视化代码依赖与系统逻辑。

seed_skills/code-to-diagram/SKILL.md dp-archive/archive

Trigger Scenarios

draw architecture generate diagram visualize code ER diagram sequence diagram class diagram flowchart from code module dependency graph

Install

npx skills add dp-archive/archive --skill code-to-diagram -g -y

More Options

Non-standard path

npx skills add https://github.com/dp-archive/archive/tree/main/seed_skills/code-to-diagram -g -y

Use without installing

npx skills use dp-archive/archive@code-to-diagram

指定 Agent (Claude Code)

npx skills add dp-archive/archive --skill code-to-diagram -a claude-code -g -y

安装 repo 全部 skill

npx skills add dp-archive/archive --all -g -y

预览 repo 内 skill

npx skills add dp-archive/archive --list

SKILL.md

Frontmatter

{
    "name": "code-to-diagram",
    "description": "Generate architecture diagrams, ER diagrams, sequence diagrams, flowcharts, and class diagrams from codebases using Mermaid.js. Use when users ask to visualize code structure, draw architecture diagrams, create ER diagrams from database models, generate sequence diagrams from API flows, or produce any diagram from source code. Triggers on: 'draw architecture', 'generate diagram', 'visualize code', 'ER diagram', 'sequence diagram', 'class diagram', 'flowchart from code', 'module dependency graph'."
}

Code to Diagram

Generate production-quality diagrams from source code via Mermaid.js, rendered to SVG/PNG with mmdc.

Environment

Executor required: This skill needs the diagram executor (Chromium + Node.js + mmdc pre-installed). If mmdc is not available, install first:

npm install -g @mermaid-js/mermaid-cli

Puppeteer config for headless environments — create at /tmp/puppeteer-config.json if missing:

{"args": ["--no-sandbox", "--disable-setuid-sandbox"]}

Workflow

Analyze — Read the codebase to understand structure (glob, grep, read)
Plan — Decide diagram type(s) based on user request and code patterns
Generate — Write .mmd file with Mermaid syntax
Render — Run mmdc to produce SVG and PNG
Verify — Read the output image and check correctness

Diagram Type Selection

User Intent	Diagram Type	Mermaid Keyword
System overview, module layout	Architecture	`graph TD` + `subgraph`
Database tables, ORM models	ER Diagram	`erDiagram`
API flow, request lifecycle	Sequence Diagram	`sequenceDiagram`
Inheritance, interfaces	Class Diagram	`classDiagram`
Business logic, conditionals	Flowchart	`flowchart TD`
Task states, lifecycle	State Diagram	`stateDiagram-v2`
Import/dependency tree	Dependency Graph	`graph LR`
Timeline, project phases	Gantt Chart	`gantt`

Analysis Strategy

Do NOT read every file. Use progressive analysis:

Step 1 — Directory scan: glob("**/*.py") or glob("**/*.ts") to understand module structure.

Step 2 — Entry points:

Python: main.py, app.py, __init__.py, pyproject.toml
Node.js: package.json, index.ts, app.ts
Java: pom.xml, Application.java

Step 3 — Targeted reads by diagram type:

ER → ORM models (models.py, schema.prisma, *.entity.ts)
Architecture → Router registrations, dependency injection, config
Sequence → Specific endpoint handler + service call chain
Class → Class definitions via grep("class ")

Step 4 — GitHub repos:

git clone --depth 1 <url> /tmp/repo-name

Then apply the same progressive scan.

Rendering

# SVG (transparent background, good for docs)
mmdc -i diagram.mmd -o diagram.svg -b transparent -p /tmp/puppeteer-config.json

# PNG (white background, 2x scale for sharpness)
mmdc -i diagram.mmd -o diagram.png -b white -s 2 -p /tmp/puppeteer-config.json

Always generate both formats. Use -s 2 for PNG (sharp at any zoom level).