ccheney/mermaid-diagrams
skills/mermaid-diagrams/SKILL.md
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 --global
skillsauthnpx skillsauth add ccheney/robust-skills mermaid-diagramsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 18, 2026, 3:15 AM329.7s10 files scanned
SKILL.md
- name:
- mermaid-diagrams
- description:
- 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.
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
Related Skills
ccheney/slack-mrkdwn
development
VerifiedTrustedCommunity
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.
43SKILL.mdUpdated May 18, 2026
ccheney/slack-block-kit
development
VerifiedTrustedCommunity
Proactively apply when generating Slack API payloads with blocks, chat.postMessage calls with structured content, streaming AI responses, or views.open/views.publish calls. Triggers on Block Kit, Slack blocks, section block, actions block, header block, divider block, context block, alert block, card block, carousel block, table block, markdown block, rich text block, image block, input block, video block, context_actions block, plan block, task_card block, chat.startStream, chat.appendStream, chat.stopStream, 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, streaming agent output, or designing rich message layouts. Slack Block Kit UI framework for building rich message layouts, modals, App Home views, and AI agent responses.
43SKILL.mdUpdated May 18, 2026
ccheney/postgres-drizzle
development
VerifiedTrustedCommunity
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.
43SKILL.mdUpdated May 18, 2026
ccheney/modern-javascript
development
VerifiedTrustedCommunity
Proactively apply when creating web applications, Node.js services, or any JavaScript project. Triggers on JavaScript, ES6, ES2020, ES2022, ES2024, modern JS, refactor legacy, array methods, async/await, optional chaining, nullish coalescing, destructuring, spread, rest, template literals, arrow functions, toSorted, toReversed, at, groupBy, Promise, functional programming. Use when writing new JavaScript code, refactoring legacy code, modernizing codebases, implementing functional patterns, or reviewing JS for performance and readability. Modern JavaScript (ES6-ES2025) patterns and best practices.
43SKILL.mdUpdated May 18, 2026