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'.
Generate production-quality diagrams from source code via Mermaid.js, rendered to SVG/PNG with mmdc.
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"]}
glob, grep, read).mmd file with Mermaid syntaxmmdc to produce SVG and PNG| 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 |
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:
main.py, app.py, __init__.py, pyproject.tomlpackage.json, index.ts, app.tspom.xml, Application.javaStep 3 — Targeted reads by diagram type:
models.py, schema.prisma, *.entity.ts)grep("class ")Step 4 — GitHub repos:
git clone --depth 1 <url> /tmp/repo-name
Then apply the same progressive scan.
# 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).
For detailed patterns and examples per diagram type, see references/mermaid-patterns.md.
Key rules:
DB[("PostgreSQL 16")]subgraph for logical grouping in architecture diagramsparticipant aliases in sequence diagrams for short namesA["Node (v1)"].mmd source + rendered files to workspacearchitecture.mmd, er-diagram.png, api-sequence.svgdiagrams/ folder with index