---

name: discover-diagrams description: Automatically discover diagram and visualization skills when working with flowcharts, sequence diagrams, architecture diagrams, ER diagrams, Gantt charts, mindmaps, or any visual documentation using Mermaid.js. Activates for documentation and visualization tasks.

Diagrams Skills Discovery

Provides automatic access to comprehensive Mermaid.js diagram skills for visual documentation.

When This Skill Activates

This skill auto-activates when you're working with:

• Process flows and flowcharts
• Sequence and interaction diagrams
• System architecture and C4 diagrams
• Database schemas and ER diagrams
• Class diagrams and state machines
• Data visualization charts
• Project timelines and Gantt charts
• Git workflows and branching
• Mindmaps and concept hierarchies
• Any Mermaid.js diagram creation

Available Skills

Quick Reference

The diagrams category contains 8 specialized Mermaid.js skills:

1. mermaid-flowcharts - Process flows, decision trees, node shapes, subgraphs
2. mermaid-sequence-diagrams - Interactions, message flows, participants, lifelines
3. mermaid-class-state-diagrams - UML classes, relationships, state machines, FSM
4. mermaid-er-diagrams - Entity-relationship, database schemas, cardinality
5. mermaid-architecture-diagrams - C4 diagrams, block diagrams, system design
6. mermaid-charts - Pie, XY, quadrant, radar charts for data visualization
7. mermaid-project-diagrams - Gantt charts, timelines, project planning
8. mermaid-specialized - Git graphs, Sankey flows, mindmaps, requirement diagrams

Load Full Category Details

For complete descriptions and workflows:

cat ~/.claude/skills/diagrams/INDEX.md

This loads the full diagrams category index with:

• Detailed skill descriptions
• When to use which diagram type
• Common workflow combinations
• Best practices and integration patterns

Load Specific Skills

Load individual skills as needed:

# Process and logic
cat ~/.claude/skills/diagrams/mermaid-flowcharts.md
cat ~/.claude/skills/diagrams/mermaid-sequence-diagrams.md

# Structure and design
cat ~/.claude/skills/diagrams/mermaid-class-state-diagrams.md
cat ~/.claude/skills/diagrams/mermaid-er-diagrams.md
cat ~/.claude/skills/diagrams/mermaid-architecture-diagrams.md

# Data and metrics
cat ~/.claude/skills/diagrams/mermaid-charts.md

# Planning and history
cat ~/.claude/skills/diagrams/mermaid-project-diagrams.md

# Specialized diagrams
cat ~/.claude/skills/diagrams/mermaid-specialized.md

Common Workflows

Document REST API

Sequence: Architecture → Sequence → ER

cat ~/.claude/skills/diagrams/mermaid-architecture-diagrams.md  # System design
cat ~/.claude/skills/diagrams/mermaid-sequence-diagrams.md      # Request/response flows
cat ~/.claude/skills/diagrams/mermaid-er-diagrams.md            # Database schema

Document Feature Implementation

Sequence: Flowchart → Sequence → State

cat ~/.claude/skills/diagrams/mermaid-flowcharts.md             # Business logic
cat ~/.claude/skills/diagrams/mermaid-sequence-diagrams.md      # Service interactions
cat ~/.claude/skills/diagrams/mermaid-class-state-diagrams.md   # State management

Project Planning

Sequence: Mindmap → Gantt → Timeline

cat ~/.claude/skills/diagrams/mermaid-specialized.md            # Brainstorm with mindmap
cat ~/.claude/skills/diagrams/mermaid-project-diagrams.md       # Schedule with Gantt
cat ~/.claude/skills/diagrams/mermaid-project-diagrams.md       # Roadmap with timeline

System Architecture Documentation

Sequence: C4 Context → C4 Container → Sequence

cat ~/.claude/skills/diagrams/mermaid-architecture-diagrams.md  # System context
cat ~/.claude/skills/diagrams/mermaid-architecture-diagrams.md  # Technology choices
cat ~/.claude/skills/diagrams/mermaid-sequence-diagrams.md      # Runtime behavior

Database Design

Sequence: ER → Class

cat ~/.claude/skills/diagrams/mermaid-er-diagrams.md            # Schema design
cat ~/.claude/skills/diagrams/mermaid-class-state-diagrams.md   # ORM models

Diagram Selection Guide

Process & Logic:

• Flowchart: Algorithms, workflows, decision trees
• Sequence: API calls, protocols, service communication
• State: Lifecycle management, FSM, protocol states

Structure & Design:

• Class: Object models, API structure, OOP design
• ER: Database schema, data relationships
• Architecture: System topology, infrastructure, C4 diagrams

Data & Metrics:

• Pie: Distribution percentages, market share
• XY Charts: Trends over time, performance metrics
• Quadrant: Prioritization matrices, risk assessment
• Radar: Skill assessments, feature comparison
• Sankey: Flow analysis, conversion funnels

Planning & History:

• Gantt: Project schedules, task dependencies
• Timeline: Product roadmaps, company history
• GitGraph: Branching strategies, release workflows

Ideation:

• Mindmap: Brainstorming, concept hierarchies, learning paths

Integration with Other Skills

Diagram skills commonly combine with:

API skills (discover-api):

• Sequence diagrams for API interactions
• ER diagrams for data models
• Architecture diagrams for system design

Database skills (discover-database):

• ER diagrams for schema design
• Sequence diagrams for query patterns
• Flowcharts for migration processes

Testing skills (discover-testing):

• Flowcharts for test scenarios
• Sequence diagrams for test flows
• State diagrams for state-based testing

Frontend skills (discover-frontend):

• Flowcharts for user flows
• State diagrams for UI state management
• Sequence diagrams for data fetching

Infrastructure skills (discover-infra, discover-cloud):

• Architecture diagrams for deployment
• Sequence diagrams for CI/CD pipelines
• Gantt charts for migration schedules

Usage Instructions

1. Auto-activation: This skill loads automatically when Claude Code detects diagram/visualization work
2. Browse skills: Run cat ~/.claude/skills/diagrams/INDEX.md for full category overview
3. Load specific skills: Use bash commands above to load individual diagram skills
4. Follow workflows: Use recommended sequences for comprehensive documentation
5. Combine diagrams: Multiple diagram types provide complete picture

Progressive Loading

This gateway skill (~200 lines, ~2K tokens) enables progressive loading:

• Level 1: Gateway loads automatically (you're here now)
• Level 2: Load category INDEX.md (~3K tokens) for full overview
• Level 3: Load specific skills (~2-3K tokens each) as needed

Total context: 2K + 3K + skill(s) = 5-10K tokens vs 30K+ for entire category.

Quick Start Examples

"Create a flowchart for user authentication":

cat ~/.claude/skills/diagrams/mermaid-flowcharts.md

"Document API interactions":

cat ~/.claude/skills/diagrams/mermaid-sequence-diagrams.md

"Design database schema":

cat ~/.claude/skills/diagrams/mermaid-er-diagrams.md

"Show system architecture":

cat ~/.claude/skills/diagrams/mermaid-architecture-diagrams.md

"Create class diagram for ORM models":

cat ~/.claude/skills/diagrams/mermaid-class-state-diagrams.md

"Visualize project timeline":

cat ~/.claude/skills/diagrams/mermaid-project-diagrams.md

"Show data distribution":

cat ~/.claude/skills/diagrams/mermaid-charts.md

"Document Git workflow":

cat ~/.claude/skills/diagrams/mermaid-specialized.md

Best Practices

1. Start broad, drill down: Architecture → Sequence → Class → Flowchart
2. One diagram, one purpose: Don't mix abstraction levels
3. Label everything: Relationships, transitions, axes, values
4. Limit complexity: Split large diagrams into focused views
5. Use GitHub/GitLab rendering: Diagrams auto-render in markdown
6. Iterate in https://mermaid.live: Fast feedback loop

Mermaid.js Quick Tips

In Markdown files:

```mermaid
graph TD
    A --> B
```

Live Preview:

• https://mermaid.live - Official editor
• VS Code: Install "Mermaid Preview" extension
• GitHub/GitLab: Auto-renders in README.md

Common Gotchas:

• Use quotes for labels with spaces: A["Label with spaces"]
• Escape special characters in labels
• Check syntax highlighting for errors
• Start simple, add complexity incrementally

---

Next Steps: Run cat ~/.claude/skills/diagrams/INDEX.md to see full category details, or load specific diagram skills using the bash commands above.