Explanation diagram (compose)
Write a few plain sentences in a post and let the AI assemble a static diagram.
When a post needs a structure diagram, type /garden and pick compose. That inserts a garden compose fence. Write the structure in plain language inside the fence, then ask the AI to compile the post. Your sentence stays inside <intent>, and the AI fills in Markdown leaves and component tags to render a static diagram.
1How to write
Write the structure you want the reader to see. Do not describe the look.
Four things:
- How many parts: three columns side by side, five layers top to bottom, or two rows.
- Short names: the words shown on the diagram. Put the explanation on the line below, not inside the title.
- Who connects to whom: what goes to what first, where one box fans out, or where sides meet. If there is no order, say "not a strict sequence."
- Which part is the point: name it directly, such as "the middle column is the focus" or "the bottom row is the point."
Do not write colors, rounded corners, grey pills, font weights, spacing, shadows, or full-width rules. Component defaults handle the look. Every tag is listed in Component reference · compose.
2Best practices
Two things usually go wrong in an intent fence: naming only a topic with no structure, or spending the sentence on colors, corner radii, and font weights. Below are five common structures showing what to avoid and how to write the fence instead.
Three columns joined in the middle
Writing only "Draw a permissions diagram" gives no columns or names; writing "Three equal columns, light grey rounded box in the middle, lighter font weight" only describes styling.
Name the three columns, the items under each one, the middle link, and the focus:
```garden compose
Three columns: User has Alice and Bob; Role has Administrator and Reviewer;
Permission has orders:read and orders:approve.
Role sits in the middle and connects users to permissions. Role is the focus.
```
Converge, then fan out
Instead of "Draw SSO with nicer arrows and even spacing," state what reaches the hub first and which systems it branches out to:
```garden compose
The browser reaches the identity provider first, then connects to
HR, Finance, and Project at once.
All three systems trust that provider. The identity provider is the focus.
```
Top-to-bottom layers
Instead of "Five full-width bands, color the second and fifth, thin arrows," list the five layer names, pick the two to highlight, and note whether every request walks them in order:
```garden compose
Five layers top to bottom: Browser, Identity Service, BFF,
Business Service, Authorization Decision.
Identity Service and Authorization Decision are the focus; the rest are the path.
Not every request walks all five in order.
```
Multiple facets of one subject
Instead of "Two rows of two cards, then two more, unbolded titles," give the six short names, the one-line question under each, the two groups, and the non-sequential note:
```garden compose
When a user sends a request, check four things first: Authentication (who you are),
Credential (how you prove it), Authorization (whether you may), Validation (whether data is valid).
For business logic and storage, check Transport and Confidentiality. Not a strict sequence.
```
Two-row contrast flow
Instead of "Borderless text on top, grey pills below, hug the content," state which row is background and which row carries the point:
```garden compose
Top row is standard delivery: Understand -> Design -> Ship.
Bottom row is the discovery loop: Hypothesize -> Cheap test -> Iterate or drop.
The top row is background; the bottom row is the point.
```
3Capability examples
The diagrams below are only examples showing the layout shapes compose can build. The sample topics (permissions, sign-in, APIs) are just filler text; replace them with your own subject when writing a post.
3.1Three columns joined in the middle
Two outer lists linked through a middle column, pulled together at the bottom with <join>.
User
Alice
Bob
Administrator
Reviewer
Permission
orders:read
orders:approve
Concept: User ↔ Role ↔ Permission
3.2Converge, then fan out
Flow into one highlighted band first, then branch to several targets at once with <fan>.
Verifies identity, keeps the session, and issues an assertion
HR
Finance
Project
All three systems trust the same identity provider
3.3Top-to-bottom layers
Vertical steps where the key layers use <band> and the pass-through hops stay plain text.
Cookie, session, OAuth client
Passkey, MFA, OIDC, session management
Session check, token check, entry authorization
Orders, payments, accounts, resources
RBAC + ABAC + ReBAC + Policy Engine
Duties, not a required hop order. The identity service is usually involved at login. The business service calls the decision system while handling the request.
3.4Multiple facets of one subject
Non-sequential aspects grouped into rows of <box> cards.
The user calls an API
Example: change an order address
Who are you?
How do you prove it?
May you change this order?
Is the payload valid?
Business operation and storage
Can the network be read, changed, or spoofed?
Can a leaked secret still be read?
Not a strict sequence. Transport covers the whole connection, and confidentiality can sit on both client and server.
3.5Container with nested checks
A larger <band> or <box> holding a row of badges or a two-column checklist inside it.
User Intent + Authorization
Task, identity, and the scope that was granted
Understands, plans, and proposes an action
Deterministic control, separate from the LLM
Permission and resource scope
Argument checks
Task-intent limits
Approval for risky actions
Tool Executor
Least privilege, an audit record, and a way to stop
3.6Multi-actor sequence
Several actors passing messages back and forth across <lanes>.
User
Client
Authorization server
A sketch. The real flow also binds the browser redirect, the callback, and checks on the code and token.
3.7Two-row contrast flow
Plain titles on top as background, a <divider/> in between, and muted pills on the bottom row for the loop that matters.
Understand
Design
Ship
The second row is the decision loop that product discovery emphasizes.
4Play mode
When a static diagram still needs reader-tunable parameters, keep the garden compose fence and write the same DIL shape:
{@body const [n, setN] = DIL.useState(3)}for state{@body const total = n * 24}for derived values{total}/value={n}interpolation{#if …}{:else}{/if}and{#each … as item, i}{/each}- Lowercase controls:
<slider>,<choice>,<button>,<pie>/<chart>,<stat>
Legacy garden interactive and PascalCase <State> / <Slider> remain as compatibility only. See docs/compose-dil.md for the mapping.