Contents
Garden HandbookBuilt-in Componentsgarden figure

Annotated Diagram (figure)

Pair an SVG diagram with step buttons that highlight each region and show its explanation.

1. garden sync Parse Markdown & image sizes 2. garden build Build static pages & index 3. pages: validate Check index.html & files

Scans content/ and docs/handbook/, copies sidecar assets, and generates .garden/generated-content.ts.

Click the buttons above to highlight each stage
  • When to use: Walking through module boundaries or data flow where clicking each button highlights the matching part of the diagram and explains its role.
  • When to skip: A static image or a mermaid diagram does not need interactive region highlighting.

You can tell the AI:

```garden
Draw a diagram of the three static publishing steps where clicking each step highlights that box and shows what it does.
```

1Fields

Every field, default, limit and error code is in Component reference · figure.

Contents