visualize

Visualize

Create a visual only when it materially improves what the user can understand, compare, or decide. The Rudder inline runtime is scriptless and has no network access, so design for a useful first render with declarative HTML, SVG, and CSS.

Choose The Output

1. Use a normal fenced Mermaid block when labeled nodes and edges fully explain a static structure or flow. Do not create an HTML artifact for that case.
2. Use an inline visual for charts, timelines, comparisons, spatial layouts, static scenario views, or compact reports that benefit from custom geometry.
3. Use the v1 message envelope only in Rudder Chat. It is a Rudder protocol, independent of Codex, Claude, Cursor, OpenCode, Pi, Hermes, process, HTTP, or gateway filesystem conventions.
4. Outside Rudder Chat, fall back to Mermaid, Markdown tables, or concise prose. Do not emit a Rudder envelope on a surface that cannot render it.

Message Envelope

• Write only an HTML fragment. Do not include a doctype or html, head, or body elements.
• Keep every fragment at or below 64 KiB UTF-8, all fragments together at or below 128 KiB, and the complete visual-bearing final reply at or below 256 KiB. Emit at most three visuals in one assistant message.
• Give the fragment one top-level markup root, <div id="widget">. Bounded <style> blocks may precede that root.
• Put any custom CSS in bounded <style> elements. Inline style attributes are removed.
• Check the fragment before replying. Fix escaped markup such as literal \" or \n, missing labels, clipped content, and malformed SVG.
• Put this exact opening marker on its own line where the visual should render, then the fragment, then the exact closing marker on its own line:

:::rudder-inline-visual:v1
<style>#widget .series { color: var(--viz-series-1); }</style>
<div id="widget">...</div>
:::rudder-inline-visual:end

The markers must have no indentation, attributes, or trailing text. Keep any necessary explanation outside the envelope. Never emit ::codex-inline-vis{...}, ::rudder-inline-vis{...}, a file path, an iframe, or a second link to source HTML; Rudder owns capture, trusted placement, persistence, sandboxing, and rendering.