mermaidlisted
Install: claude install-skill ulises-jeremias/agent-toolkit
# Mermaid — Primary Diagram Renderer (WHAT)
**Sources (2026-08-12):** `mermaid-js/mermaid` https://github.com/mermaid-js/mermaid MIT (Mermaid live editor https://mermaid.live); NPM `mermaid 10.x` `MIT` + `@mermaid-js/mermaid 10.9.7-preview.41` `MIT`; `docs/ARCHITECTURE.md` already authors Mermaid natively.
> **Pack:** `architecture` core (`architect + ADR + TRD + threat-model + mermaid (+ C4)`) — vendor-neutral. `cloud-architecture` optional composes `cloud-design-patterns + aws-well-architected-review + mermaid`. See `docs/architecture/research-385-diagram.md` for Mermaid vs C4 vs PlantUML/Structurizr/Excalidraw decision per §44.
## When to use
- Need flowchart, sequence, class, ER, gantt, gitGraph — text → SVG/PNG.
- Threat-model data-flow / sequence diagrams.
## Instructions
1. **Author** Mermaid block in Markdown: ` ```mermaid` + `flowchart TD` / `sequenceDiagram` / `classDiagram` etc.
2. **Render** via GitHub native or `mmdc -i diagram.mmd -o diagram.svg` (mermaid CLI).
3. **Collaborate** with `architect` + `threat-model` (data-flow) and `c4-model` (C4-inspired via Mermaid).
## Anti-patterns
- Do not add Excalidraw/draw.io binary — use Mermaid text.
- Do not require PlantUML infra for basic diagrams.