# Diagram Generator
> Generates architecture, database, and system diagrams using Mermaid syntax. Creates visual representations of system architecture, database schemas, component relationships, data flows, and standalone HTML exports.
- Skill: `oimiragieo/diagram-generator` (Agent Skill, multi-file: 11 files)
- Install (CLI): `npx skillmds@latest add oimiragieo/diagram-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oimiragieo/diagram-generator/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: oimiragieo (https://skillmd.com/u/oimiragieo)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/oimiragieo/diagram-generator
---
Diagram Generator — creates Mermaid diagrams and standalone HTML exports for architecture, schemas, flows, and all supported diagram types.
## Diagram Types
| Type | Keyword | Best For |
| --------- | ----------------- | --------------------------- |
| Flowchart | `flowchart TB/LR` | Decision flows, processes |
| Sequence | `sequenceDiagram` | API interactions, protocols |
| Class | `classDiagram` | OOP structure, interfaces |
| State | `stateDiagram-v2` | Lifecycle, state machines |
| ER | `erDiagram` | Database schemas |
| Gantt | `gantt` | Project timelines |
| Pie | `pie` | Distribution, composition |
| Mindmap | `mindmap` | Hierarchical mind maps |
| Timeline | `timeline` | Chronological events |
| Git Graph | `gitGraph` | Branch visualization |
| Kanban | `kanban` | Task boards |
| Quadrant | `quadrantChart` | 2x2 matrix |
## Processing Limits
- **File chunk limit: 1000 files per diagram (HARD LIMIT)**
- Visual limit: ~200 nodes max per diagram
- Large codebases: split by subsystem/layer; generate overview first then details
## Standalone HTML Output Mode
**Trigger phrases:** "export as HTML", "standalone diagram", "interactive diagram"
Generate a self-contained HTML file with embedded Mermaid.js CDN, dark/light toggle button, and responsive CSS (max-width: 1200px):
```html
TITLE
TITLE
MERMAID_CONTENT
```
**Default:** dark mode (`background: #1e1e2e`, `color: #cdd6f4`)
**Output:** `.claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html`
## Output Location
- Mermaid files: `.claude/context/artifacts/diagrams/{subject}-{type}-{YYYY-MM-DD}.mmd`
- HTML files: `.claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html`
## Iron Laws
1. Mermaid syntax only — no ASCII art or PlantUML.
2. Never exceed 200 nodes per diagram.
3. Never write diagrams outside `.claude/context/artifacts/diagrams/`.
4. Label all non-obvious connections.
5. Enforce 1000-file hard limit — chunk large codebases.
## Mermaid Plugin Generation Pattern
Generate diagrams from code analysis using the Claude Code plugin pattern (ref: agentic-coding-school/mermaid-diagram-plugin):
### Step 1: Analyze Codebase Structure
```bash
# Identify components to diagram
pnpm search:code "class|interface|module|service|component" | head -50
```
### Step 2: Generate Mermaid Source
Use Claude to transform code analysis into diagram syntax. Always request a specific diagram type and scope:
```
"Generate a Mermaid flowchart TB of the authentication flow in src/auth/"
"Create an ER diagram for the database tables in prisma/schema.prisma"
"Make a sequence diagram for the API request lifecycle in src/api/"
```
### Step 3: Render Interactive HTML
For standalone shareable diagrams, use the full HTML template:
```javascript
// Plugin invocation pattern (from mermaid-diagram-plugin)
const mermaidContent = `
flowchart TB
A[User Request] --> B{Auth Check}
B -- Valid --> C[Route Handler]
B -- Invalid --> D[401 Response]
C --> E[Database Query]
E --> F[Response]
`;
// Render to interactive HTML
const html = `
${title}
${title}
${mermaidContent}
`;
```
### Step 4: Save Output
```bash
# Save interactive HTML to standard location
# .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html
```
### Plugin Invocation from Agent
When an agent needs a diagram as part of a workflow:
```javascript
// Invoke diagram-generator skill, then request specific type
Skill({ skill: 'diagram-generator' });
// Then describe what to diagram with context
// "Create a class diagram for src/lib/routing/ — show all classes and their relationships"
```
## When to invoke
`Skill({ skill: 'diagram-generator' })` for architecture diagrams, HTML exports, mindmaps, timelines, git visualizations, kanban boards, and quadrant charts.