{"id":"cc1c4c1c-91e5-41a5-927f-df609caf208f","shortId":"WjEVAQ","kind":"skill","title":"mermaid-diagrams","tagline":"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 rep","description":"# Mermaid Diagrams\n\nGenerate diagrams in markdown that render in GitHub, GitLab, VS Code, Obsidian, Notion.\n\n## Quick Start\n\n````markdown\n```mermaid\nflowchart LR\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action]\n    B -->|No| D[End]\n```\n````\n\n## Quick Decision Tree\n\n```\nWhat to visualize?\n├─ Process, algorithm, decision flow    → flowchart\n├─ API calls, service interactions      → sequenceDiagram\n├─ Database tables, relationships       → erDiagram\n├─ OOP, type hierarchy, domain model    → classDiagram\n├─ State machine, lifecycle             → stateDiagram-v2\n├─ System architecture, services        → flowchart + subgraphs (or C4Context)\n├─ Project timeline, sprints            → gantt\n├─ User experience, pain points         → journey\n├─ Git branches                         → gitGraph\n├─ Data distribution                    → pie\n└─ Priority matrix                      → quadrantChart\n```\n\n## Diagram Types\n\n| Type | Declaration | Best For |\n|------|-------------|----------|\n| **Flowchart** | `flowchart LR/TB` | Processes, decisions, data flow |\n| **Sequence** | `sequenceDiagram` | API flows, service calls |\n| **ER** | `erDiagram` | Database schemas |\n| **Class** | `classDiagram` | Types, domain models |\n| **State** | `stateDiagram-v2` | State machines |\n| **Gantt** | `gantt` | Project timelines |\n| **Journey** | `journey` | User experience |\n| **C4** | `C4Context` | System architecture |\n| **Git** | `gitGraph` | Branch visualization |\n\n## Common Patterns\n\n### System Architecture\n\n```mermaid\nflowchart LR\n    subgraph Client\n        Browser & Mobile\n    end\n    subgraph Services\n        API --> Auth & Core\n    end\n    subgraph Data\n        DB[(PostgreSQL)]\n    end\n    Client --> API\n    Core --> DB\n```\n\n### API Request Flow\n\n```mermaid\nsequenceDiagram\n    autonumber\n    Client->>+API: POST /orders\n    API->>Auth: Validate\n    Auth-->>API: OK\n    API->>+DB: Insert\n    DB-->>-API: ID\n    API-->>-Client: 201 Created\n```\n\n### Database Schema\n\n```mermaid\nerDiagram\n    USER ||--o{ ORDER : places\n    ORDER ||--|{ LINE_ITEM : contains\n    USER { uuid id PK; string email UK }\n    ORDER { uuid id PK; uuid user_id FK }\n```\n\n### State Machine\n\n```mermaid\nstateDiagram-v2\n    [*] --> Draft\n    Draft --> Submitted : submit()\n    Submitted --> Approved : approve()\n    Submitted --> Rejected : reject()\n    Approved --> [*]\n```\n\n## Syntax Quick Reference\n\n### Flowchart Nodes\n\n```\n[Rectangle]  (Rounded)  {Diamond}  [(Database)]  [[Subroutine]]\n((Circle))   >Asymmetric]   {{Hexagon}}\n```\n\n### Flowchart Edges\n\n```\nA --> B       # Arrow\nA --- B       # Line\nA -.-> B      # Dotted arrow\nA ==> B       # Thick arrow\nA -->|text| B # Labeled\n```\n\n### Sequence Arrows\n\n```\n->>   # Solid arrow (request)\n-->>  # Dotted arrow (response)\n-x    # X end (async)\n-)    # Open arrow\n```\n\n### ER Cardinality\n\n```\n||--||   # One to one\n||--o{   # One to many\n}o--o{   # Many to many\n```\n\n## Best Practices\n\n1. **Choose the right type** — Use decision tree above\n2. **Keep focused** — One concept per diagram\n3. **Use meaningful labels** — Not just A, B, C\n4. **Direction matters** — `LR` for flows, `TB` for hierarchies\n5. **Group with subgraphs** — Organize related nodes\n\n## Reference Documentation\n\n| File | Purpose |\n|------|---------|\n| [references/FLOWCHARTS.md](references/FLOWCHARTS.md) | Nodes, edges, subgraphs, styling |\n| [references/SEQUENCE.md](references/SEQUENCE.md) | Participants, messages, activation |\n| [references/CLASS-ER.md](references/CLASS-ER.md) | Classes, ER diagrams, relationships |\n| [references/STATE-JOURNEY.md](references/STATE-JOURNEY.md) | States, user journeys |\n| [references/DATA-CHARTS.md](references/DATA-CHARTS.md) | Gantt, Pie, Timeline, Quadrant |\n| [references/ARCHITECTURE.md](references/ARCHITECTURE.md) | C4, Block, Kanban |\n| [references/CHEATSHEET.md](references/CHEATSHEET.md) | All syntax quick reference |\n\n## Resources\n\n- **Official Documentation**: https://mermaid.js.org\n- **Live Editor**: https://mermaid.live\n- **GitHub Repository**: https://github.com/mermaid-js/mermaid\n- **GitHub Markdown Support**: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams\n- **GitLab Markdown Support**: https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts","tags":["mermaid","diagrams","robust","skills","ccheney","agent-skills","clean-architecture","domain-driven-design","drizzle-orm","feature-sliced-design","hexagonal-architecture","mermaid-diagrams"],"capabilities":["skill","source-ccheney","skill-mermaid-diagrams","topic-agent-skills","topic-clean-architecture","topic-domain-driven-design","topic-drizzle-orm","topic-feature-sliced-design","topic-hexagonal-architecture","topic-mermaid-diagrams","topic-modern-javascript","topic-postgres","topic-skills","topic-slack-block-kit","topic-slack-mrkdwn"],"categories":["robust-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/ccheney/robust-skills/mermaid-diagrams","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add ccheney/robust-skills","source_repo":"https://github.com/ccheney/robust-skills","install_from":"skills.sh"}},"qualityScore":"0.469","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 39 github stars · SKILL.md body (4,279 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T00:57:20.840Z","embedding":null,"createdAt":"2026-04-18T22:18:43.783Z","updatedAt":"2026-05-02T00:57:20.840Z","lastSeenAt":"2026-05-02T00:57:20.840Z","tsv":"'/ee/user/markdown.html#diagrams-and-flowcharts':447 '/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams':441 '/mermaid-js/mermaid':435 '/orders':216 '1':340 '2':349 '201':231 '3':356 '4':365 '5':374 'action':68 'activ':395 'algorithm':80 'api':84,145,194,204,207,214,217,221,223,227,229 'approv':271,272,276 'architectur':19,106,175,183 'arrow':294,301,305,311,313,316,323 'ask':36 'asymmetr':288 'async':321 'auth':195,218,220 'autonumb':212 'b':63,65,69,293,296,299,303,308,363 'best':134,338 'block':416 'branch':122,178 'browser':189 'c':67,364 'c4':28,172,415 'c4context':111,173 'call':85,148 'cardin':325 'chart':14,26 'choos':341 'circl':287 'class':29,153,398 'classdiagram':98,154 'client':188,203,213,230 'code':52 'common':180 'complex':9 'concept':353 'contain':244 'core':196,205 'creat':232 'd':71 'data':124,141,199 'databas':89,151,233,285 'db':200,206,224,226 'decis':64,74,81,140,346 'declar':133 'diagram':3,6,13,18,20,22,30,41,43,130,355,400 'diamond':284 'direct':366 'distribut':125 'docs.github.com':440 'docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams':439 'docs.gitlab.com':446 'docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts':445 'document':382,426 'domain':96,156 'dot':300,315 'draft':266,267 'edg':291,388 'editor':429 'email':250 'end':72,191,197,202,320 'er':21,149,324,399 'erdiagram':92,150,236 'experi':117,171 'explain':8 'file':383 'fk':259 'flow':82,142,146,209,370 'flowchart':16,59,83,108,136,137,185,280,290 'focus':351 'gantt':25,115,164,165,409 'generat':42 'git':31,121,176 'gitgraph':123,177 'github':49,431,436 'github.com':434 'github.com/mermaid-js/mermaid':433 'gitlab':50,442 'graph':32 'group':375 'hexagon':289 'hierarchi':95,373 'id':228,247,254,258 'insert':225 'interact':87 'item':243 'journey':120,168,169,406 'kanban':417 'keep':350 'label':309,359 'lifecycl':101 'line':242,297 'live':428 'lr':60,186,368 'lr/tb':138 'machin':24,100,163,261 'mani':332,335,337 'markdown':45,57,437,443 'matrix':128 'matter':367 'meaning':358 'mermaid':2,40,58,184,210,235,262 'mermaid-diagram':1 'mermaid.js.org':427 'mermaid.live':430 'messag':394 'mindmap':27 'mobil':190 'model':97,157 'node':281,380,387 'notion':54 'o':238,329,333,334 'obsidian':53 'offici':425 'ok':222 'one':326,328,330,352 'oop':93 'open':322 'order':239,241,252 'organ':378 'pain':118 'particip':393 'pattern':181 'per':354 'pie':126,410 'pk':248,255 'place':240 'point':119 'post':215 'postgresql':201 'practic':339 'prioriti':127 'proactiv':4 'process':79,139 'project':112,166 'purpos':384 'quadrant':412 'quadrantchart':129 'quick':55,73,278,422 'rectangl':282 'refer':279,381,423 'references/architecture.md':413,414 'references/cheatsheet.md':418,419 'references/class-er.md':396,397 'references/data-charts.md':407,408 'references/flowcharts.md':385,386 'references/sequence.md':391,392 'references/state-journey.md':402,403 'reject':274,275 'relat':379 'relationship':91,401 'render':47 'rep':39 'repositori':432 'request':208,314 'resourc':424 'respons':317 'right':343 'round':283 'schema':152,234 'sequenc':17,143,310 'sequencediagram':88,144,211 'servic':86,107,147,193 'skill' 'skill-mermaid-diagrams' 'solid':312 'source-ccheney' 'sprint':114 'start':56,62 'state':23,99,158,162,260,404 'statediagram':103,160,264 'statediagram-v2':102,159,263 'string':249 'style':390 'subgraph':109,187,192,198,377,389 'submit':268,269,270,273 'subroutin':286 'suggest':5 'support':438,444 'syntax':277,421 'system':10,105,174,182 'tabl':90 'tb':371 'text':307 'thick':304 'timelin':113,167,411 'topic-agent-skills' 'topic-clean-architecture' 'topic-domain-driven-design' 'topic-drizzle-orm' 'topic-feature-sliced-design' 'topic-hexagonal-architecture' 'topic-mermaid-diagrams' 'topic-modern-javascript' 'topic-postgres' 'topic-skills' 'topic-slack-block-kit' 'topic-slack-mrkdwn' 'tree':75,347 'trigger':11 'type':94,131,132,155,344 'uk':251 'use':33,345,357 'user':35,116,170,237,245,257,405 'uuid':246,253,256 'v2':104,161,265 'valid':219 'visual':15,38,78,179 'vs':51 'x':318,319 'yes':66","prices":[{"id":"c30e2e2d-7aa2-4f7e-b2f0-7245bf9ee53d","listingId":"cc1c4c1c-91e5-41a5-927f-df609caf208f","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"ccheney","category":"robust-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:18:43.783Z"}],"sources":[{"listingId":"cc1c4c1c-91e5-41a5-927f-df609caf208f","source":"github","sourceId":"ccheney/robust-skills/mermaid-diagrams","sourceUrl":"https://github.com/ccheney/robust-skills/tree/main/skills/mermaid-diagrams","isPrimary":false,"firstSeenAt":"2026-04-18T22:18:43.783Z","lastSeenAt":"2026-05-02T00:57:20.840Z"}],"details":{"listingId":"cc1c4c1c-91e5-41a5-927f-df609caf208f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"ccheney","slug":"mermaid-diagrams","github":{"repo":"ccheney/robust-skills","stars":39,"topics":["agent-skills","clean-architecture","domain-driven-design","drizzle-orm","feature-sliced-design","hexagonal-architecture","mermaid-diagrams","modern-javascript","postgres","skills","slack-block-kit","slack-mrkdwn","slack-work-objects"],"license":"mit","html_url":"https://github.com/ccheney/robust-skills","pushed_at":"2026-04-27T15:23:12Z","description":"Robust skills for Agents","skill_md_sha":"174692a9657f7dc210f3cf5dc187d62d88dfea6c","skill_md_path":"skills/mermaid-diagrams/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/ccheney/robust-skills/tree/main/skills/mermaid-diagrams"},"layout":"multi","source":"github","category":"robust-skills","frontmatter":{"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."},"skills_sh_url":"https://skills.sh/ccheney/robust-skills/mermaid-diagrams"},"updatedAt":"2026-05-02T00:57:20.840Z"}}