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).
Mermaid Syntax Reference
For detailed patterns and examples per diagram type, see references/mermaid-patterns.md.
Key rules:
- Short IDs, descriptive labels:
DB[("PostgreSQL 16")]
- Use
subgraph for logical grouping in architecture diagrams
- Limit ER diagrams to ~10 entities — split by domain if larger
participant aliases in sequence diagrams for short names- Quote labels with special chars:
A["Node (v1)"]
- Max ~20 nodes per diagram — split into multiple if larger
Output Conventions
- Write
.mmd source + rendered files to workspace
- Descriptive names:
architecture.mmd, er-diagram.png, api-sequence.svg
- Multiple diagrams → create
diagrams/ folder with index
Quality Checklist
- All entities/modules from the code are represented
- Relationships and data flow directions are correct
- Labels readable, not truncated or overlapping
- No Mermaid syntax errors
- Output image visually verified
1---2name: code-to-diagram3description: 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'.4---56# Code to Diagram78Generate production-quality diagrams from source code via Mermaid.js, rendered to SVG/PNG with `mmdc`.910## Environment1112**Executor required:** This skill needs the `diagram` executor (Chromium + Node.js + mmdc pre-installed).13If `mmdc` is not available, install first:14```bash15npm install -g @mermaid-js/mermaid-cli16```1718Puppeteer config for headless environments — create at `/tmp/puppeteer-config.json` if missing:19```json20{"args": ["--no-sandbox", "--disable-setuid-sandbox"]}21```2223## Workflow24251. **Analyze** — Read the codebase to understand structure (`glob`, `grep`, `read`)262. **Plan** — Decide diagram type(s) based on user request and code patterns273. **Generate** — Write `.mmd` file with Mermaid syntax284. **Render** — Run `mmdc` to produce SVG and PNG295. **Verify** — Read the output image and check correctness3031## Diagram Type Selection3233| User Intent | Diagram Type | Mermaid Keyword |34|-------------|-------------|-----------------|35| System overview, module layout | Architecture | `graph TD` + `subgraph` |36| Database tables, ORM models | ER Diagram | `erDiagram` |37| API flow, request lifecycle | Sequence Diagram | `sequenceDiagram` |38| Inheritance, interfaces | Class Diagram | `classDiagram` |39| Business logic, conditionals | Flowchart | `flowchart TD` |40| Task states, lifecycle | State Diagram | `stateDiagram-v2` |41| Import/dependency tree | Dependency Graph | `graph LR` |42| Timeline, project phases | Gantt Chart | `gantt` |4344## Analysis Strategy4546Do NOT read every file. Use progressive analysis:4748**Step 1 — Directory scan:**49`glob("**/*.py")` or `glob("**/*.ts")` to understand module structure.5051**Step 2 — Entry points:**52- Python: `main.py`, `app.py`, `__init__.py`, `pyproject.toml`53- Node.js: `package.json`, `index.ts`, `app.ts`54- Java: `pom.xml`, `Application.java`5556**Step 3 — Targeted reads by diagram type:**57- **ER** → ORM models (`models.py`, `schema.prisma`, `*.entity.ts`)58- **Architecture** → Router registrations, dependency injection, config59- **Sequence** → Specific endpoint handler + service call chain60- **Class** → Class definitions via `grep("class ")`6162**Step 4 — GitHub repos:**63```bash64git clone --depth 1 <url> /tmp/repo-name65```66Then apply the same progressive scan.6768## Rendering6970```bash71# SVG (transparent background, good for docs)72mmdc -i diagram.mmd -o diagram.svg -b transparent -p /tmp/puppeteer-config.json7374# PNG (white background, 2x scale for sharpness)75mmdc -i diagram.mmd -o diagram.png -b white -s 2 -p /tmp/puppeteer-config.json76```7778Always generate both formats. Use `-s 2` for PNG (sharp at any zoom level).7980## Mermaid Syntax Reference8182For detailed patterns and examples per diagram type, see [references/mermaid-patterns.md](references/mermaid-patterns.md).8384Key rules:85- Short IDs, descriptive labels: `DB[("PostgreSQL 16")]`86- Use `subgraph` for logical grouping in architecture diagrams87- Limit ER diagrams to ~10 entities — split by domain if larger88- `participant` aliases in sequence diagrams for short names89- Quote labels with special chars: `A["Node (v1)"]`90- Max ~20 nodes per diagram — split into multiple if larger9192## Output Conventions9394- Write `.mmd` source + rendered files to workspace95- Descriptive names: `architecture.mmd`, `er-diagram.png`, `api-sequence.svg`96- Multiple diagrams → create `diagrams/` folder with index9798## Quality Checklist99100- All entities/modules from the code are represented101- Relationships and data flow directions are correct102- Labels readable, not truncated or overlapping103- No Mermaid syntax errors104- Output image visually verified
tools-only