mermaid-diagrams

name	mermaid-diagrams
description	Create diagrams as code — flowcharts, sequence, class, ER, gantt, architecture — using Mermaid, and render them to SVG/PNG locally (mermaid-cli) or via the keyless Kroki service. Use when asked to "draw a diagram", "make a flowchart", "diagram this architecture", "sequence diagram of".
allowed-tools	["@coder","Bash","Write","@webfetch"]
triggers	["draw a diagram","make a flowchart","diagram this","sequence diagram","architecture diagram","er diagram","desenhe um diagrama","fluxograma","diagrama de"]

Mermaid Diagrams

Diagrams-as-code. Author Mermaid markup, then render it. Two render paths — prefer local, fall back to the keyless Kroki HTTP service.

1. Author the Mermaid

Write a .mmd file. Examples:

Flowchart:

flowchart TD
  A[Client] --> B{Auth?}
  B -- yes --> C[Serve]
  B -- no --> D[401]

Sequence:

sequenceDiagram
  User->>API: POST /login
  API-->>User: 200 + token

Mermaid also covers classDiagram, erDiagram, gantt, stateDiagram-v2, mindmap.

2. Render

Local (preferred) — @mermaid-cli (mmdc):

mmdc -i diagram.mmd -o diagram.svg          # or -o diagram.png -t dark -b transparent

Detect: command -v mmdc / Get-Command mmdc. Install: npm i -g @mermaid-js/mermaid-cli.

Keyless service (no install) — Kroki:

curl -s -X POST https://kroki.io/mermaid/svg -d @diagram.mmd -o diagram.svg

(Use @webfetch/curl. For private content prefer local rendering — Kroki receives the source.)

Rules

• Keep the diagram readable: group/label nodes, limit to what answers the question.
• For chat/messaging contexts, you can also just send the fenced ```mermaid block as text — many clients render it. Render to an image when the user wants a file.
• Report the output path after rendering.