Home → Visuals
Charts, maths & diagrams
Ask about a trend and get a chart. Ask about a system and get an architecture diagram. Ask about a derivation and get set mathematics rather than ASCII art. Seven kinds of block, all rendered in the transcript.
| Block | What it draws |
|---|---|
chart | An Apache ECharts option object — bar, line, pie, scatter, treemap, sankey, funnel, gauge, radar, heatmap, boxplot, candlestick, sunburst, graph |
viz | A Vega-Lite spec — statistical graphics computed from raw rows: histograms, regression, density, box plots, faceted small multiples, cross-filtering |
dashboard | Several figures as one board — KPI tiles with sparklines over a responsive grid of chart, viz and table panels |
math | LaTeX set by KaTeX — also inline as $x^2$ and display between $$ … $$; chemistry via \ce{} |
table | A sortable table with automatic column summaries |
diagram | Mermaid — 26 types across architecture, behaviour, structure and planning |
html | An HTML or SVG preview, sandboxed with scripts off and a source toggle |
Why a catalog and not a prompt
Every one of these was, at some point, a capability the model had and did not use. Asked for a dashboard it wrote an HTML file; asked for a sequence diagram it drew boxes out of hyphens; asked for a derivation it produced fractions made of slashes. Not because it was told not to — because nothing told it the block existed.
So there is a single catalog of drawable blocks. A one-line summary of each rides along with the turn; the full contract — shape, worked example, the conventions a model cannot guess — is fetched on demand when it decides to draw one. A capability nobody mentions is one that gets routed around badly, and a capability described in full on every turn is one you pay for whether or not you wanted a chart.
Every figure has the same controls
Copy the source, download it, expand it to fill the page, and — on diagrams — zoom and pan. Escape shrinks it back. Icons with tooltips rather than a row of words, because a figure should be mostly figure.
When a diagram will not parse
Mermaid's error graphic tells you a diagram is broken and nothing else. A Fix with AI button repairs it in place: the block is replaced where it sits, and the repair conversation is not part of your chat — you asked for a diagram, not for a debugging session about one.
The repair turn runs with a toolset of exactly one entry. An earlier version had the full set and went hunting — scratch directories, two npm installs, a thirty-one-minute hang — for a fix that was one pair of quotation marks. Restricting the tools was the fix; telling it to try harder was not.
26 diagram types
Software engineering diagrams specifically, not a general drawing tool:
- Architecture — C4 context and containers, block, cloud infrastructure with grouped services
- Behaviour — flowchart, sequence, state, user journey
- Structure — class, entity-relationship, packet, git graph
- Planning — gantt, timeline, kanban, mindmap, quadrant, requirements
Each carries a worked sample and the notes that stop it failing — for
architecture-beta, that any label which is not plain letters and spaces
must be quoted, which is most real infrastructure labels. Every sample is rendered
through real Mermaid in headless Chrome by
npm run test:diagrams, and Mermaid's own error graphic counts as a
failure, so a type that stopped parsing cannot pass quietly.
Themed to match
Mermaid's default is a wireframe — saturated fills, hard borders, dashed black boxes around groups. Fine for debugging, wrong next to prose in a document. Fills are pulled back to surfaces, the border carries the identity, and a group is background rather than a participant. Light and dark both, following the workspace.