ReddRadar
Agent skill
mermaid-diagrams
Proactively suggest diagrams when explaining complex systems. Triggers on diagrams, charts, visualizations, flowcharts, sequence diagrams, architecture diagrams, ER diagrams, state machines, Gantt charts, mindmaps, C4, class diagrams, git graphs. Use when user asks for visual representations of code, systems, processes, data structures, database schemas, workflows, or API flows. Generate Mermaid diagrams in markdown.
Install this agent skill to your Project
npx add-skill https://github.com/ccheney/robust-skills/tree/main/skills/mermaid-diagrams
SKILL.md
Mermaid Diagrams
Generate diagrams in markdown that render in GitHub, GitLab, VS Code, Obsidian, Notion.
Quick Start
```mermaid
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```
Quick Decision Tree
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
Diagram Types
| 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 |
Common Patterns
System Architecture
flowchart LR
subgraph Client
Browser & Mobile
end
subgraph Services
API --> Auth & Core
end
subgraph Data
DB[(PostgreSQL)]
end
Client --> API
Core --> DB
API Request Flow
sequenceDiagram
autonumber
Client->>+API: POST /orders
API->>Auth: Validate
Auth-->>API: OK
API->>+DB: Insert
DB-->>-API: ID
API-->>-Client: 201 Created
Database Schema
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
USER { uuid id PK; string email UK }
ORDER { uuid id PK; uuid user_id FK }
State Machine
stateDiagram-v2
[*] --> Draft
Draft --> Submitted : submit()
Submitted --> Approved : approve()
Submitted --> Rejected : reject()
Approved --> [*]
Syntax Quick Reference
Flowchart Nodes
[Rectangle] (Rounded) {Diamond} [(Database)] [[Subroutine]]
((Circle)) >Asymmetric] {{Hexagon}}
Flowchart Edges
A --> B # Arrow
A --- B # Line
A -.-> B # Dotted arrow
A ==> B # Thick arrow
A -->|text| B # Labeled
Sequence Arrows
->> # Solid arrow (request)
-->> # Dotted arrow (response)
-x # X end (async)
-) # Open arrow
ER Cardinality
||--|| # One to one
||--o{ # One to many
}o--o{ # Many to many
Best Practices
- Choose the right type — Use decision tree above
- Keep focused — One concept per diagram
- Use meaningful labels — Not just A, B, C
- Direction matters —
LRfor flows,TBfor hierarchies - Group with subgraphs — Organize related nodes
Reference Documentation
| 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 |
Resources
- Official Documentation: https://mermaid.js.org
- Live Editor: https://mermaid.live
- GitHub Repository: https://github.com/mermaid-js/mermaid
- GitHub Markdown Support: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams
- GitLab Markdown Support: https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ccheney/robust-skills
slack-mrkdwn
Proactively apply when generating any Slack text content, chat.postMessage text fields, or text objects with type "mrkdwn". Triggers on mrkdwn, Slack formatting, Slack markdown, Slack bold, Slack italic, Slack link syntax, Slack mentions, Slack date formatting, Slack escaping, Slack text object, verbatim, plain_text, Slack mrkdwn vs markdown, Slack blockquote, Slack code block, Slack strikethrough, Slack user mention, Slack channel mention, Slack emoji, link_names, auto-parsing. Use when formatting Slack message text, writing mrkdwn strings, constructing text objects, escaping user content for Slack, adding mentions or date formatting to messages, or debugging text rendering issues. Slack mrkdwn text formatting syntax for messages, text objects, and attachments.
ccheney/robust-skills
clean-ddd-hexagonal
Proactively apply when designing APIs, microservices, or scalable backend structure. Triggers on DDD, Clean Architecture, Hexagonal, ports and adapters, entities, value objects, domain events, CQRS, event sourcing, repository pattern, use cases, onion architecture, outbox pattern, aggregate root, anti-corruption layer. Use when working with domain models, aggregates, repositories, or bounded contexts. Clean Architecture + DDD + Hexagonal patterns for backend services, language-agnostic (Go, Rust, Python, TypeScript, Java, C#).
ccheney/robust-skills
feature-slicing
Proactively apply when creating new features/components/pages or setting up frontend project structure. Triggers on FSD, feature slicing, frontend architecture, layer structure, module boundaries, scalable frontend, slice organization. Use when restructuring React/Next.js/Vue/Remix projects, organizing frontend code, fixing import violations, or migrating legacy codebases. Feature-Sliced Design (FSD) architecture for frontend projects.
ccheney/robust-skills
slack-block-kit
Proactively apply when generating Slack API payloads with blocks, chat.postMessage calls with structured content, or views.open/views.publish calls. Triggers on Block Kit, Slack blocks, section block, actions block, header block, divider block, context block, table block, markdown block, rich text block, image block, input block, video block, context_actions block, plan block, task_card block, Slack modal, Slack App Home, Slack surfaces, Slack interactive elements, Slack button, Slack select menu, Slack overflow, Slack datepicker, Slack checkboxes, Slack radio buttons, Work Objects, Slack link unfurl, chat.postMessage blocks, views.open, views.update, views.push, views.publish, Slack composition objects. Use when building Block Kit payloads, constructing blocks arrays, creating modals or App Home views, adding interactive elements, implementing link unfurling with Work Objects, or designing rich message layouts. Slack Block Kit UI framework for building rich message layouts, modals, and App Home views.
ccheney/robust-skills
postgres-drizzle
Proactively apply when creating APIs, backends, or data models. Triggers on PostgreSQL, Postgres, Drizzle, database, schema, tables, columns, indexes, queries, migrations, ORM, relations, joins, transactions, SQL, drizzle-kit, connection pooling, N+1, JSONB, RLS. Use when writing database schemas, queries, migrations, or any database-related code. PostgreSQL and Drizzle ORM best practices.
ccheney/robust-skills
modern-css
Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.
Didn't find tool you were looking for?