Mermaid Diagram by langbot-team

# Mermaid Diagram

Render Mermaid diagrams to SVG/PNG from a description or `.mmd` source.

## What it does

- Generates Mermaid source for flowcharts, sequence, class, ER, state, Gantt,
  pie, and mindmap diagrams.
- Validates syntax before rendering.
- Renders headless to SVG or PNG via `@mermaid-js/mermaid-cli`.

## Files

| File | Purpose |
|------|---------|
| `SKILL.md` | Instructions the agent receives on activation |
| `scripts/render.sh` | Render a `.mmd` file to SVG/PNG |
| `scripts/validate_mermaid.py` | Pre-render syntax check |
| `references/cheatsheet.md` | Mermaid syntax reference per diagram type |

## License

Apache-2.0.


---
name: mermaid-diagram
display_name: Mermaid Diagram
description: "Create and render Mermaid diagrams (flowcharts, sequence, class, ER, Gantt, state, pie) to SVG or PNG. Use when the user wants a diagram, flowchart, sequence diagram, architecture sketch, mindmap, or asks to visualize a process or data flow as an image. Do NOT use for photo editing or chart-from-dataset tasks (use a plotting skill for those)."
license: Apache-2.0
---

# Mermaid Diagram

Turn a description or `.mmd` source into a rendered diagram (SVG/PNG) using the
Mermaid CLI inside the sandbox.

## When to use

The user wants a flowchart, sequence diagram, class/ER diagram, state machine,
Gantt chart, mindmap, or pie chart — anything Mermaid can express — as an image.

## Execution steps

1. **Choose the diagram type** that fits the request (flowchart, sequenceDiagram,
   classDiagram, erDiagram, stateDiagram-v2, gantt, pie, mindmap).
2. **Write the Mermaid source** to a `.mmd` file under `/workspace`. See
   `references/cheatsheet.md` for syntax of each diagram type.
3. **Validate** the syntax with `python scripts/validate_mermaid.py diagram.mmd`
   to catch common mistakes (unbalanced brackets, bad arrows) before rendering.
4. **Render** with `bash scripts/render.sh diagram.mmd diagram.svg` (or `.png`).
   The script installs `@mermaid-js/mermaid-cli` via `npx` on first use and
   renders headless.
5. **Report** the output path and, if useful, inline the SVG source.

## Rules

- Keep node labels short; put detail in notes, not node text.
- Pick a layout direction (`TD`/`LR`) that minimizes edge crossings.
- Always validate before rendering so you don't ship a broken diagram.

## Available resources

- `scripts/render.sh` — render a `.mmd` file to SVG/PNG via mermaid-cli.
- `scripts/validate_mermaid.py` — lightweight pre-render syntax check.
- `references/cheatsheet.md` — syntax reference for every Mermaid diagram type.