Let agents see rendered diagrams and drop Mermaid support

This commit is contained in:
Ian Gulliver
2026-10-21 15:41:51 -07:00
parent ab91285dd4
commit 056c3d202a
18 changed files with 506 additions and 980 deletions
+3 -1
View File
@@ -2,7 +2,7 @@ How to draw a box diagram (architecture, components, data flow) that byre's app
# Box diagrams
A fenced block with the language `diagram` draws boxes in rows with arrows between them. The app lays it out itself, so you never place coordinates. Clicking it opens a full-size view: pinch or scroll to zoom and pan; clicking a box highlights it, its arrows and its neighbors; each `highlight` line becomes a button there. Mermaid flowcharts (```` ```mermaid ````) still work for graphs whose shape the layout should find on its own.
A fenced block with the language `diagram` draws boxes in rows with arrows between them. The app lays it out itself, so you never place coordinates. Clicking it opens a full-size view: pinch or scroll to zoom and pan; clicking a box highlights it, its arrows and its neighbors; each `highlight` line becomes a button there. It is the only diagram format byre draws; a ```` ```mermaid ```` block shows as plain code.
```diagram
row
@@ -31,3 +31,5 @@ highlight "Event loop" store server coord
- Lines starting with `#` are comments. A mistake shows the source with the reason it wasn't drawn.
Keep each box to a title and one or two short detail lines, and draw only the arrows the reader needs; a picture with every dependency in it reads worse than prose.
Check a diagram before you send it: `render_diagram` takes the block's body and returns a PNG of what the app draws, or the reason it can't. Look for crossing or overlapping arrows and labels sitting on top of each other, and adjust the rows, `aside` or arrows until it reads cleanly.