Generates Mermaid diagrams in markdown for flowcharts, sequence diagrams, ER diagrams, class diagrams, state machines, Gantt charts, git graphs, and more. Useful for visualizing code structures, systems, processes, database schemas, workflows, and API flows.
npx claudepluginhub ccheney/cc-plugins --plugin robust-skillsThis skill uses the workspace's default tool permissions.
Generate diagrams in markdown that render in GitHub, GitLab, VS Code, Obsidian, Notion.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Generate diagrams in markdown that render in GitHub, GitLab, VS Code, Obsidian, Notion.
```mermaid
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```
What to visualize?
├─ Process, algorithm, decision flow → flowchart
├─ API calls, service interactions → sequenceDiagram
├─ Database tables, relationships → erDiagram
├─ OOP, type hierarchy, domain model → classDiagram
├─ State machine, lifecycle → stateDiagram-v2
├─ System architecture, services → flowchart + subgraphs (or C4Context)
├─ Project timeline, sprints → gantt
├─ User experience, pain points → journey
├─ Git branches → gitGraph
├─ Data distribution → pie
└─ Priority matrix → quadrantChart
| Type | Declaration | Best For |
|---|---|---|
| Flowchart | flowchart LR/TB | Processes, decisions, data flow |
| Sequence | sequenceDiagram | API flows, service calls |
| ER | erDiagram | Database schemas |
| Class | classDiagram | Types, domain models |
| State | stateDiagram-v2 | State machines |
| Gantt | gantt | Project timelines |
| Journey | journey | User experience |
| C4 | C4Context | System architecture |
| Git | gitGraph | Branch visualization |
flowchart LR
subgraph Client
Browser & Mobile
end
subgraph Services
API --> Auth & Core
end
subgraph Data
DB[(PostgreSQL)]
end
Client --> API
Core --> DB
sequenceDiagram
autonumber
Client->>+API: POST /orders
API->>Auth: Validate
Auth-->>API: OK
API->>+DB: Insert
DB-->>-API: ID
API-->>-Client: 201 Created
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
USER { uuid id PK; string email UK }
ORDER { uuid id PK; uuid user_id FK }
stateDiagram-v2
[*] --> Draft
Draft --> Submitted : submit()
Submitted --> Approved : approve()
Submitted --> Rejected : reject()
Approved --> [*]
[Rectangle] (Rounded) {Diamond} [(Database)] [[Subroutine]]
((Circle)) >Asymmetric] {{Hexagon}}
A --> B # Arrow
A --- B # Line
A -.-> B # Dotted arrow
A ==> B # Thick arrow
A -->|text| B # Labeled
->> # Solid arrow (request)
-->> # Dotted arrow (response)
-x # X end (async)
-) # Open arrow
||--|| # One to one
||--o{ # One to many
}o--o{ # Many to many
LR for flows, TB for hierarchies| File | Purpose |
|---|---|
| references/FLOWCHARTS.md | Nodes, edges, subgraphs, styling |
| references/SEQUENCE.md | Participants, messages, activation |
| references/CLASS-ER.md | Classes, ER diagrams, relationships |
| references/STATE-JOURNEY.md | States, user journeys |
| references/DATA-CHARTS.md | Gantt, Pie, Timeline, Quadrant |
| references/ARCHITECTURE.md | C4, Block, Kanban |
| references/CHEATSHEET.md | All syntax quick reference |