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