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:

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

Load Full Category Details

For complete descriptions and workflows:

Read /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

Read /skills/diagrams/mermaid-flowcharts.md Read /skills/diagrams/mermaid-sequence-diagrams.md

Structure and design

Read /skills/diagrams/mermaid-class-state-diagrams.md Read /skills/diagrams/mermaid-er-diagrams.md Read /skills/diagrams/mermaid-architecture-diagrams.md

Data and metrics

Read /skills/diagrams/mermaid-charts.md

Planning and history

Read /skills/diagrams/mermaid-project-diagrams.md

Specialized diagrams

Read /skills/diagrams/mermaid-specialized.md

Common Workflows

Document REST API

Sequence: Architecture → Sequence → ER

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

Document Feature Implementation

Sequence: Flowchart → Sequence → State

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

Project Planning

Sequence: Mindmap → Gantt → Timeline

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

System Architecture Documentation

Sequence: C4 Context → C4 Container → Sequence

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

Database Design

Sequence: ER → Class

Read /skills/diagrams/mermaid-er-diagrams.md # Schema design Read /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

Auto-activation: This skill loads automatically when Claude Code detects diagram/visualization work
Browse skills: Run Read <cc-polymath-root>/skills/diagrams/INDEX.md for full category overview
Load specific skills: Use bash commands above to load individual diagram skills
Follow workflows: Use recommended sequences for comprehensive documentation
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": Read /skills/diagrams/mermaid-flowcharts.md

"Document API interactions": Read /skills/diagrams/mermaid-sequence-diagrams.md

"Design database schema": Read /skills/diagrams/mermaid-er-diagrams.md

"Show system architecture": Read /skills/diagrams/mermaid-architecture-diagrams.md

"Create class diagram for ORM models": Read /skills/diagrams/mermaid-class-state-diagrams.md

"Visualize project timeline": Read /skills/diagrams/mermaid-project-diagrams.md

"Show data distribution": Read /skills/diagrams/mermaid-charts.md

"Document Git workflow": Read /skills/diagrams/mermaid-specialized.md

Best Practices

Start broad, drill down: Architecture → Sequence → Class → Flowchart
One diagram, one purpose: Don't mix abstraction levels
Label everything: Relationships, transitions, axes, values
Limit complexity: Split large diagrams into focused views
Use GitHub/GitLab rendering: Diagrams auto-render in markdown
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 Read <cc-polymath-root>/skills/diagrams/INDEX.md to see full category details, or load specific diagram skills using the bash commands above.

discover-diagrams