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.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
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.
version
1.4.0
model
sonnet
invoked_by
both
user_invocable
true
tools
["Read","Write","Glob","Grep"]
best_practices
["Use Mermaid syntax for all diagrams","Extract structure from code and documentation","Keep diagrams under 200 nodes","Generate both high-level and detailed views"]
HTML files: .claude/context/artifacts/diagrams/{subject}-{YYYY-MM-DD}.html
Iron Laws
Mermaid syntax only — no ASCII art or PlantUML.
Never exceed 200 nodes per diagram.
Never write diagrams outside .claude/context/artifacts/diagrams/.
Label all non-obvious connections.
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
# 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:
# 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:
// Invoke diagram-generator skill, then request specific typeSkill({ 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.
