Inline SVG Diagrams

Inline SVG Diagrams

When the Artifacts plugin is enabled in a chat, diagrams the assistant draws as SVG render directly inside the conversation, styled to match the app theme. Ask for one naturally — "draw a diagram of how JWT authentication works", "sketch the architecture of X" — and the reply shows a drawing placeholder while it streams, then the finished diagram inline.

Code-block diagrams (any model)

Some models return a visual as an ordinary code block rather than a themed artifact. A full HTML page (<!DOCTYPE html>…), an SVG, or a Mermaid diagram now renders as the visual by default instead of showing raw source: the block shows the rendered result with a small Preview / Code switch to see the source (Mermaid renders inline as before). While the reply is still streaming, the block stays as source until the document is complete, then flips to the rendered view.

A plain HTML fragment (a snippet such as <div>…</div>, not a full page) stays as ordinary source code — a snippet has no reliable "finished" marker to render safely while it streams — but you can still preview it on demand from the block's eye icon.

Rendered HTML and SVG display inside a sandboxed frame that is isolated from the app (it cannot read your session or the page around it), so arbitrary generated markup — including gradients and scripts — shows exactly as authored. HTML code blocks also offer a full-screen preview and download from the eye icon; SVG code blocks use the inline Preview / Code switch, and the diagram fills the block.

Theming

Diagrams follow a built-in design system: the assistant draws with named theme classes instead of hardcoded colors, so the same diagram adapts automatically to light and dark mode — node fills, strokes, text and arrows all switch with the app appearance. Colors encode categories (nodes of the same kind share a color), which keeps multi-part diagrams readable.

Diagrams from older conversations or from models that ignore the design system (for example, ones that hardcode colors) still render inline; they simply keep their authored colors and do not adapt to the theme.

Actions

Hover over a diagram to reveal its actions in the top-right corner:

• Download — save as PNG (rendered at 2x, with the current background color) or as a self-contained SVG file. The SVG export embeds the app's diagram stylesheet for the theme active at download time, so it looks like the preview when opened outside ChatHub.
• Copy as image — copy a PNG to the clipboard.
• Open in workspace — show the same themed diagram in the side panel. Inside a subtopic thread the workspace cannot open; switch to the main conversation first.

Scope and safety

Among artifacts, only SVG renders inline; Code, HTML, React and Mermaid artifacts keep their card that opens the side workspace. Diagrams that arrive as code blocks (above) render inline regardless of model, including Mermaid diagrams — tap or click a Mermaid diagram to open it full-screen with zoom controls. On mobile, any diagram or HTML preview opened full-screen can always be dismissed with the close button (which closes it in place) or the phone's Back gesture (which closes it and returns to the previous screen).

Every SVG is reduced to a strict drawing vocabulary before display: shapes, text and markers survive; gradients, scripts, event handlers, <style> blocks and style attributes, links, images and any reference to external resources are removed. This is deliberate — inline SVG shares the page with the app, so a style rule could affect the whole document and a link or image could point anywhere. The design system needs none of these constructs, so well-formed diagrams are unaffected; diagrams relying on removed constructs render without them.

Note: the Artifacts wiki page describes the generated-image gallery at /artifacts, which is a different feature from chat artifacts and inline diagrams.