{"skill":{"slug":"mermaid-diagrams","displayName":"Mermaid Diagrams","summary":"Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.","description":"---\nname: mermaid-diagrams\nmodel: fast\nversion: 1.0.0\ndescription: >\n  Create software diagrams using Mermaid syntax. Use when users need to create, visualize,\n  or document software through diagrams including class diagrams, sequence diagrams, flowcharts,\n  ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers\n  include requests to diagram, visualize, model, map out, or show the flow of a system.\ntags: [diagrams, mermaid, visualization, architecture, documentation, modeling]\n---\n\n# Mermaid Diagrams\n\nCreate professional software diagrams using Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making diagrams version-controllable, easy to update, and maintainable alongside code.\n\n\n## Installation\n\n### OpenClaw / Moltbot / Clawbot\n\n```bash\nnpx clawhub@latest install mermaid-diagrams\n```\n\n\n## Core Syntax\n\nAll Mermaid diagrams follow this pattern:\n\n```mermaid\ndiagramType\n  definition content\n```\n\n**Key principles:**\n- First line declares diagram type (e.g., `classDiagram`, `sequenceDiagram`, `flowchart`)\n- Use `%%` for comments\n- Line breaks and indentation improve readability but aren't required\n- Unknown words break diagrams; invalid parameters fail silently\n\n## Diagram Type Selection\n\n| Type | Use For | Reference |\n|------|---------|-----------|\n| **Class Diagrams** | Domain modeling, OOP design, entity relationships | `references/class-diagrams.md` |\n| **Sequence Diagrams** | API flows, auth flows, component interactions | `references/sequence-diagrams.md` |\n| **Flowcharts** | Processes, algorithms, decision trees, user journeys | `references/flowcharts.md` |\n| **ERD** | Database schemas, table relationships, data modeling | `references/erd-diagrams.md` |\n| **C4 Diagrams** | System context, containers, components, architecture | `references/c4-diagrams.md` |\n| **State Diagrams** | State machines, lifecycle states | — |\n| **Git Graphs** | Branching strategies | — |\n| **Gantt Charts** | Project timelines, scheduling | — |\n\n**For styling, themes, and layout options**: See `references/advanced-features.md`\n\n## Quick Start Examples\n\n### Class Diagram (Domain Model)\n\n```mermaid\nclassDiagram\n    Title -- Genre\n    Title *-- Season\n    Title *-- Review\n    User --> Review : creates\n\n    class Title {\n        +string name\n        +int releaseYear\n        +play()\n    }\n\n    class Genre {\n        +string name\n        +getTopTitles()\n    }\n```\n\n### Sequence Diagram (API Flow)\n\n```mermaid\nsequenceDiagram\n    participant User\n    participant API\n    participant Database\n\n    User->>API: POST /login\n    API->>Database: Query credentials\n    Database-->>API: Return user data\n    alt Valid credentials\n        API-->>User: 200 OK + JWT token\n    else Invalid credentials\n        API-->>User: 401 Unauthorized\n    end\n```\n\n### Flowchart (User Journey)\n\n```mermaid\nflowchart TD\n    Start([User visits site]) --> Auth{Authenticated?}\n    Auth -->|No| Login[Show login page]\n    Auth -->|Yes| Dashboard[Show dashboard]\n    Login --> Creds[Enter credentials]\n    Creds --> Validate{Valid?}\n    Validate -->|Yes| Dashboard\n    Validate -->|No| Error[Show error]\n    Error --> Login\n```\n\n### ERD (Database Schema)\n\n```mermaid\nerDiagram\n    USER ||--o{ ORDER : places\n    ORDER ||--|{ LINE_ITEM : contains\n    PRODUCT ||--o{ LINE_ITEM : includes\n\n    USER {\n        int id PK\n        string email UK\n        string name\n        datetime created_at\n    }\n\n    ORDER {\n        int id PK\n        int user_id FK\n        decimal total\n        datetime created_at\n    }\n```\n\n## Best Practices\n\n1. **Start simple** — begin with core entities/components, add details incrementally\n2. **Use meaningful names** — clear labels make diagrams self-documenting\n3. **Comment extensively** — use `%%` comments to explain complex relationships\n4. **Keep focused** — one diagram per concept; split large diagrams into multiple views\n5. **Version control** — store `.mmd` files alongside code for easy updates\n6. **Add context** — include titles and notes to explain diagram purpose\n7. **Iterate** — refine diagrams as understanding evolves\n\n## Configuration and Theming\n\nConfigure diagrams using frontmatter:\n\n```mermaid\n---\nconfig:\n  theme: base\n  themeVariables:\n    primaryColor: \"#ff6b6b\"\n---\nflowchart LR\n    A --> B\n```\n\n**Available themes:** default, forest, dark, neutral, base\n\n**Layout options:**\n- `layout: dagre` (default) — classic balanced layout\n- `layout: elk` — advanced layout for complex diagrams\n\n**Look options:**\n- `look: classic` — traditional Mermaid style\n- `look: handDrawn` — sketch-like appearance\n\n## Rendering and Export\n\n**Native support in:**\n- GitHub/GitLab — automatically renders in Markdown\n- VS Code — with Markdown Mermaid extension\n- Notion, Obsidian, Confluence — built-in support\n\n**Export options:**\n- [Mermaid Live Editor](https://mermaid.live) — online editor with PNG/SVG export\n- Mermaid CLI — `npm install -g @mermaid-js/mermaid-cli` then `mmdc -i input.mmd -o output.png`\n\n## When to Create Diagrams\n\n**Always diagram when:**\n- Starting new projects or features\n- Documenting complex systems\n- Explaining architecture decisions\n- Designing database schemas\n- Planning refactoring efforts\n- Onboarding new team members\n\n**Use diagrams to:**\n- Align stakeholders on technical decisions\n- Document domain models collaboratively\n- Visualize data flows and system interactions\n- Plan before coding\n- Create living documentation that evolves with code\n\n## Common Pitfalls\n\n- **Breaking characters** — avoid `{}` in comments; escape special characters\n- **Syntax errors** — misspellings break diagrams; validate in Mermaid Live\n- **Overcomplexity** — split complex diagrams into multiple focused views\n- **Missing relationships** — document all important connections between entities\n- **Stale diagrams** — a wrong diagram is worse than no diagram; update when systems change\n\n## NEVER Do\n\n1. **NEVER create diagrams with more than 15 nodes** — they become unreadable; split into multiple focused diagrams\n2. **NEVER leave arrows unlabeled** — every connection should explain the relationship or data flow\n3. **NEVER create diagrams without a title or caption** — context-free diagrams are useless outside the author's head\n4. **NEVER use diagrams as the sole documentation** — pair diagrams with prose that explains the \"why\"\n5. **NEVER let diagrams go stale** — update diagrams when architecture changes; stale diagrams mislead\n6. **NEVER use Mermaid for data visualization** — Mermaid is for architecture and flow diagrams, not charts of business data\n","topics":["Diagrams","Mermaid","Architecture","Documentation","Modeling"],"tags":{"latest":"0.1.0"},"stats":{"comments":0,"downloads":6401,"installsAllTime":241,"installsCurrent":66,"stars":5,"versions":1},"createdAt":1770730813646,"updatedAt":1778486991803},"latestVersion":{"version":"0.1.0","createdAt":1770730813646,"changelog":"Initial release of Mermaid Diagrams skill.\n\n- Create software diagrams (class, sequence, flowchart, ERD, C4, state, git, Gantt) using Mermaid syntax\n- Includes usage best practices, configuration, theming, and export instructions\n- Provides common pitfalls and recommended/forbidden diagramming habits\n- Installation instructions for OpenClaw / Moltbot / Clawbot included\n- Offers quick start code examples for each major diagram type","license":null},"metadata":null,"owner":{"handle":"wpank","userId":"s17bjjbnm7xjckd29e1h2641ks8849md","displayName":"wpank","image":"https://avatars.githubusercontent.com/u/9498646?v=4"},"moderation":null}