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:

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.