# Mermaid target (EasySpecs)

Bundled markdown agents that emit **` ```mermaid `** fenced blocks must match what the **EasySpecs web app** uses to render diagrams:

| | |
| --- | --- |
| **Mermaid** | **11.13** |
| **Theme** | **neutral** |

## Rules for generated diagrams

1. **Syntax** — Use features supported in **Mermaid 11.x** (this repo tracks **11.13**). Prefer stable diagram types (`flowchart`, `sequenceDiagram`, `classDiagram`, etc.); avoid relying on experimental-only syntax unless documented for 11.13.

2. **Theme** — Put **`%%{init: {'theme':'neutral'}}%%`** as the **first line inside** each `mermaid` fence (immediately after ` ```mermaid `). That aligns output with the product preview and avoids default-theme assumptions.

3. **Semantics** — Do not encode meaning only via theme-dependent colors; use **labels**, **node text**, and **structure** so diagrams stay readable under the neutral palette.

4. **No custom styles** — Do **not** use Mermaid directives whose purpose is **per-element appearance**: no **`style`**, **`classDef`** / **`class`**, **`linkStyle`**, or similar fill/stroke/font overrides. The **only** appearance-related line allowed is the **`%%{init: {'theme':'neutral'}}%%`** directive in rule 2; everything else should be plain diagram syntax (nodes, edges, subgraphs, sequence messages) so rendering stays consistent with the EasySpecs preview.

5. **No `C4Component`** — Do **not** use Mermaid’s **`C4Component`** diagram type (or any diagram that **begins** with **`C4Component`**). **Component-level** views must use **`flowchart`** / **`graph`** / **`sequenceDiagram`** (and clear node labels) instead. The same applies to other built-in **`C4*`** diagram declarations (**`C4Context`**, **`C4Container`**, **`C4Dynamic`**, **`C4Deployment`**, etc.)—do **not** use them; approximate context or containers with **`flowchart`** / **`graph`** if needed.
