# Code To Diagram

Generate architecture diagrams, ER diagrams, sequence diagrams, flowcharts, and class...

- Repository: https://github.com/dp-archive/archive (1107 stars)
- Category: Data and ML
- License: Apache-2.0
- Last updated: 2026-03-04
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add dp-archive/archive --skill code-to-diagram -g -a claude-code -y`
Codex: `npx skills add dp-archive/archive --skill code-to-diagram -g -a codex -y`
Cursor: `npx skills add dp-archive/archive --skill code-to-diagram -g -a cursor -y`
Gemini CLI: `npx skills add dp-archive/archive --skill code-to-diagram -g -a gemini-cli -y`

## 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'.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:
```bash
npm install -g @mermaid-js/mermaid-cli
```

Puppeteer config for headless environments, create at `/tmp/puppeteer-config.json` if missing:
```json
{"args": ["--no-sandbox", "--disable-setuid-sandbox"]}
```

## Workflow

1. **Analyze**, Read the codebase to understand structure (`glob`, `grep`, `read`)
2. **Plan**, Decide diagram type(s) based on user request and code patterns
3. **Generate**, Write `.mmd` file with Mermaid syntax
4. **Render**, Run `mmdc` to produce SVG and PNG
5. **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`

The rest: https://github.com/dp-archive/archive/blob/HEAD/seed_skills/code-to-diagram/SKILL.md