vizzy directives

Inside a vizzy fence that directly follows a diagram, reference node and edge ids to annotate it. A vizzy fence whose first line starts with architecture is instead a standalone architecture diagram.

Directive	Effect
note <id>: text	Attach a sticky note to a node
payload <A>-><B>: text	Label what an edge carries
style <id> fill:…,stroke:…	Override a node’s Mermaid style (layers on top)
hint <id>: [Title](dest)	Attach a click-to-open (?) info hint
pos <id> x=320 y=40	Pin a node’s position (its center)
layout TB / layout LR	Override flow direction

Notes

• Edges are addressed compactly as A->B in payload and hint.
• style uses Mermaid property syntax (fill:, stroke:, color:, stroke-width:, stroke-dasharray:) and merges on top of any styling from the mermaid fence — so a vizzy fence is how you tint nodes in non-flowchart diagrams.
• Directives are best-effort: an id that doesn’t match, or a malformed line, is ignored rather than breaking the diagram.

Example

```mermaid
flowchart LR
  web[Web] -->|POST /login| api[API] --> db[(Postgres)]
```

```vizzy
note db: primary + read replica
style api fill:#DBEAFE,stroke:#2563EB,stroke-width:3px
hint api: [Rate limit]("Token bucket, **5/min**.")
hint api->db: [Schema](data.vizzy.md)
layout LR
```