mermaid-diagramlisted

# Mermaid Diagram Generate technical diagrams as Mermaid blocks — they render directly in GitHub, Claude, Notion, GitLab, and VSCode. ## Syntax Provenance The examples target Mermaid v11.x and were reviewed against the canonical [mermaid-js/mermaid](https://github.com/mermaid-js/mermaid) syntax on 2026-08-16. This is a baseline, not an evergreen version claim: the target repository's installed Mermaid package or host renderer wins. Check that renderer before using recently added diagram types, and do not silently rewrite a project's established syntax for a different major version. ## Ownership Boundary This skill owns diagram-type selection and valid Mermaid syntax. It does not invent architecture decisions, database relationships, API behavior, task dates, or business facts; derive those from the repository or the owning specification skill. Use `development-spec-suite` or `prd-taskbreaker` for artifact decisions, `openapi-spec` for API contracts, and `adr-record` for full architecture decisions. ## Diagram Types ### 1. Flowchart — process flow / decision tree ```mermaid flowchart TD A[Start] --> B{Condition?} B -->|Yes| C[Action A] B -->|No| D[Action B] C --> E[End] D --> E ``` ### 2. Sequence Diagram — interaction between systems/components ```mermaid sequenceDiagram participant U as User participant API as Backend API participant DB as Database U->>API: POST /login API->>DB: SELECT user WHERE email=... DB-->>API: user r