Can I get a PNG for a slide or a Slack message?

Yes. The figure can be saved as a PNG at twice its on-screen size, or copied straight to the clipboard as an image. It is rasterised in the browser from the SVG already on screen, painted on the brand's paper colour rather than left transparent. For a README or a docs build the SVG and the standalone HTML are still better, because the text stays selectable.

Does changing the diagram size cost another run?

No. Size is consumed only at render time, so switching between doc-inline, doc-wide, slide-16x9, social-og and print-a4-landscape re-renders the figure in your browser for free and does not re-run the model.

Does the export embed my webfont?

No — the exported file names your webfont rather than embedding it, so a licensed family stays licensed. The export says plainly which families a reader's machine will have to substitute.

Brand Diagram — your brand's colours, your diagram, one standalone file

Current skin

Working

Size

type

size

detail

audience

elements

accent on

The .png is rendered from this figure in your browser, at twice the on-screen size, on the brand’s paper colour — for a deck slide, a Slack thread or a pull-request comment. Changing the size above re-renders the figure here for free; it does not re-run the model.

Stage 3 runs on this spec and pre-fills itself from it.

Grammar check

Every rule here comes from the diagram grammar, and every finding was measured against the spec that is drawn above — not against the intent behind it.

What the model did with the findings

The free reader's findings go into the run as facts. This is the reconciliation: what the model acted on, what it set aside, and anything it never answered for.

Fidelity ledger

A reader of the diagram cannot see what is missing from it. This is what was cut, and what survived in full.

Editorial layer

Your skin, as the model mapped it

Brand fidelity receipt

style-guide.md is the file the source skill reads. Drop it into your installed copy at references/style-guide.md and every diagram your agent draws from then on inherits this brand.

The spec, editable

This is exactly what the renderer draws. Change a label, move a node, flip which element gets the accent, and re-render as many times as you like — editing and re-drawing are free.

Notes and warnings

Raw model reply

The reply did not parse as the structured contract, so it is shown as it arrived.

Your recent diagrams

Search what you have drawn — by meaning, not by keyword

If that did not work

Check that you are signed in and that your balance covers the reservation shown next to the button. The bundled examples always work and cost nothing, so they are the quickest way to tell a problem with your material apart from a problem with the service. If a diagram drew but looks wrong, the spec above it is editable — fixing a label there costs nothing and re-renders instantly.

What this does, and what it does not

The token reader is a real reader, not a hex-code grep. It resolves var() indirection, walks a Style Dictionary or Figma token tree to its leaf values, understands #rgb, #rrggbbaa, rgb(), rgba(), hsl() and hsla(), and knows that a colour declared on body is your page background while the same colour on a .cta is your accent. The WCAG numbers are computed the way the spec defines them — relative luminance, with translucent values composited over their background first, because a hairline declared at 12 per cent opacity is not the contrast its hex suggests.

The diagram is drawn here, in your browser, from a spec. That is why editing it is free and why the export is one file with no script in it: there is no image service, no headless browser and no round trip. The model's job is judgement — which type this material actually is, which colour is the brand's accent and which is an accident, what earns the one accent, what a reader would miss without a callout. The parts a parser can do, a parser does, for nothing.

What it does not do: fetch your website. The page cannot reach a third-party origin, so "point it at my URL" is not on offer — paste the stylesheet or the tokens instead, which is the same information without the guesswork of a screenshot. And the exported file names your webfont rather than embedding it — a licensed family stays licensed, and the export says plainly which families a reader's machine will have to substitute.

Nothing to hand? Load the , a checkout architecture drawn in a warm editorial brand, or the , a signup funnel with real drop-off numbers. Both replay saved runs for free.

Your brand's colours. Your diagram. One file you can publish.