Code To Diagram
Generate architecture diagrams, ER diagrams, sequence diagrams, flowcharts, and class...
Install
npx skills add dp-archive/archive --skill code-to-diagram -g -a claude-code -y- Repository
- dp-archive/archive1.1k
- Category
- Data and ML
- Updated
- 8mo ago
- License
- Apache-2.0
- Context cost
- Lightabout 894 tokens
- Runs scripts
- No, instructions only
What it does
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
.mmdfile with Mermaid syntax - Render, Run
mmdcto 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
