{"slug":"mermaid-diagrams","title":"mermaid-diagrams","summary":"Practical guide for creating human-readable and agent-parseable diagrams using Mermaid. Includes conservative, renderer-compatible templates and when-to-use guidance.","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-08-24T17:35:11.499318Z","repo":{"url":"https://github.com/Desko77/claude-code-skills-1c","stars":72,"forks":16,"license":"MIT","updatedAt":"2026-09-24T10:53:41Z"},"bodyHtml":"
\n

name: mermaid-diagrams\ndescription: \"Practical guide for creating human-readable and agent-parseable diagrams using Mermaid. Includes conservative, renderer-compatible templates and when-to-use guidance.\"

\n

Mermaid Diagrams Skill

\n

This skill provides:

\n\n

Compatibility Rules (Read First)

\n\n

ASCII/Unicode Sidecar (Human-Readable Raw Markdown)

\n

To optimize for quick human scanning in raw Markdown and robust parsing by agents, always ship an ASCII/Unicode sidecar immediately below each Mermaid block.

\n

Policy:

\n\n

Recommended primitives:

\n\n

Example (Flowchart):

\n
graph LR\n  A[\"Start\"] --> B{Auth?}\n  B -->|Yes| C[\"Dashboard\"]\n  B -->|No|  D[\"Login\"]\n
\n
Diagram: Auth flow (flowchart)\n  [Start] --> {Auth?}\n      {Auth?} -- Yes --> [Dashboard]\n      {Auth?} -- No  --> [Login]\n
\n

Example (Text-based Sequence):

\n
sequenceDiagram\n  participant U as User\n  participant W as WebApp\n  U->>W: Open\n  W-->>U: OK\n
\n
Diagram: Happy path (sequence)\n  User -> WebApp : Open\n  WebApp -> User : OK\n
\n

Working Templates (Renderer-Compatible)

\n

Flowchart

\n
graph LR\n  A[\"Start\"] --> B{Auth?}\n  B -->|Yes| C[\"Dashboard\"]\n  B -->|No|  D[\"Login\"]\n  C --> E[\"Settings\"]\n
\n

Sequence

\n
sequenceDiagram\n  autonumber\n  participant U as User\n  participant W as WebApp\n  participant API\n  U->>W: Open\n  W->>API: GET /status\n  API-->>W: 200\n  W-->>U: OK\n
\n

Class

\n
classDiagram\n  class User {\n    +String id\n    +String name\n    +login(): bool\n  }\n  class Order {\n    +String id\n    +Decimal total\n    +submit()\n  }\n  User \"1\" o-- \"*\" Order\n
\n

State (v2)

\n
stateDiagram-v2\n  [*] --> Idle\n  Idle --> Loading : fetch\n  Loading --> Ready : ok\n  Loading --> Error : fail\n  state Ready {\n    [*] --> Viewing\n    Viewing --> Editing : edit\n    Editing --> Viewing : save\n  }\n  Error --> Idle : retry\n
\n

ER (Entity-Relationship)

\n
erDiagram\n  USER ||--o{ ORDER : places\n  ORDER ||--|{ ORDER_LINE : contains\n  PRODUCT ||--o{ ORDER_LINE : referenced\n  USER {\n    string id\n    string email\n  }\n  PRODUCT {\n    string id\n    string name\n    float price\n  }\n
\n

Journey (User Journey)

\n
journey\n  title Checkout UX\n  section Browse\n    \"See product\": 5: User\n    \"Add to cart\": 4: User\n  section Payment\n    \"Enter card\": 2: User\n    \"3DS confirm\": 2: User\n  section Result\n    \"Success page\": 5: User\n
\n

Gantt

\n
gantt\n  title Release Plan\n  dateFormat  YYYY-MM-DD\n  section Dev\n  Spec  :done,   des1, 2025-10-01,2025-10-05\n  Impl  :active, des2, 2025-10-06,2025-10-20\n  Tests :        des3, 2025-10-21, 7d\n  section Release\n  Freeze :milestone, m1, 2025-10-28, 0d\n  Deploy :crit,    des4, 2025-10-29, 1d\n
\n

Pie (compatible syntax)

\n
pie\n  title Traffic by Source\n  \"Direct\"  : 35\n  \"Organic\" : 45\n  \"Ads\"     : 20\n
\n

Quadrant — flowchart fallback

\n
graph TB\n  Q1[\"Quick Wins<br/>High Impact - Low Effort<br/><br/>- Improve UX\"]\n  Q2[\"Major Projects<br/>High Impact - High Effort<br/><br/>- Rewrite Core\"]\n  Q3[\"Fill-ins<br/>Low Impact - Low Effort<br/><br/>- Docs polish\"]\n  Q4[\"Thankless<br/>Low Impact - High Effort<br/><br/>- Legacy migration\"]\n\n  Q1 --> Q2\n  Q1 --> Q3\n  Q2 --> Q4\n  Q3 --> Q4\n
\n

Requirement — flowchart fallback

\n
graph LR\n  R1[\"Requirement: PCI-DSS compliant\"]\n  T1[\"Test: PCI checklist\"]\n  SVC[\"Service\"]\n\n  SVC -- satisfies --> R1\n  T1  -- verifies  --> R1\n
\n

Sankey — flowchart fallback (weights on edges)

\n
graph LR\n  Checkout[\"Checkout\"] -->|100| PSP[\"PSP\"]\n  PSP -->|60|  Settled[\"Settled\"]\n  PSP -->|40|  Declined[\"Declined\"]\n
\n

Git graph — flowchart fallback (simple DAG)

\n
graph LR\n  A[\"init\"] --> B[\"feat-A\"]\n  A --> C[\"fix-1\"]\n  B --> D[\"merge\"]\n  C --> D\n
\n

When to Use Which Diagram

\n\n

Troubleshooting

\n\n","files":[{"path":"evals/evals.json","sizeBytes":3416,"isText":true},{"path":"SKILL.md","sizeBytes":6564,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-08-28T19:24:51.815573Z","sha256":"0D60831958C537E50B6A7AEF782F79F1E96ABCF1D617FA157F756262AB6B2FE7","sizeBytes":4467},"review":null,"source":{"repositoryUrl":"https://github.com/Desko77/claude-code-skills-1c","path":"skills/mermaid-diagrams","license":"MIT","commit":"3accdd9a57aca1aabbe49a892a932df403ad5059","subtreeSha":"339072DE4443BA3561EB0E45B0376BF0C87094C81B2157D4A8ECA47992E151D9","lastSyncedAt":"2026-09-27T20:54:37.190964Z"},"reviewedAt":"2026-08-28T19:29:41.591005Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/Desko77/claude-code-skills-1c/tree/main/skills/mermaid-diagrams"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install desko77-claude-code-skills-1c@llmmart"},{"target":"git","command":"git clone https://github.com/Desko77/claude-code-skills-1c.git"}]}