Explanation diagram (compose)
Explain a short flow with cards, arrows, and notes. Click a step to open its note.
Site publish pipeline
Click a step to read what it does
1syncSync content and config
Line up remote and local material.
2buildEmit static HTML
The build renders compose into the page.
3validateCheck before shipping
The hook stops an idea that is still prose.
- When to use: A flow of two to eight steps, where clicking a step shows only that step's note.
- When to skip: Use interactive when the reader should drag a parameter. Keep a real image or a Mermaid diagram when that already explains it.
In the editor, type /garden and choose the compose item. That inserts a garden compose fence whose body is one sentence, not a YAML stub. After compile, the fence type stays garden compose: the sentence moves into intent and the body becomes a YAML tree.
```garden compose
Three cards and downward arrows for sync, build, then validate. Clicking a step opens its note.
```
Narrow screens stack the diagram into one column. Color comes from theme tokens, so light and dark both stay readable. With JavaScript off, the cards and notes are still in the page.
Every field is in Component reference · compose. Six finished diagrams are in the explanation gallery.
figure is deprecated. Old garden figure fences still render. New diagrams should be compose.