Diagram

root = Diagram("flowchart LR\n  Model -->|GistUI Lang| Stream --> Parser --> UI", title:"Pipeline")

With Mermaid on the page (window.mermaid) the diagram is drawn; otherwise its source is shown.

Signature

This is the line a model reads in the system prompt.

Diagram(source, title:str)

• Group: Content
• Children: No
• Positional arguments: source (a trailing ? means it may be left out)

Props

Use your own component

Keep the name and schema, swap what is drawn. The prompt and the model’s output do not change.

import { ui } from "@gistui/react/ui";

const lib = ui.extend({ Diagram: MyDiagram });
<GistUI library={lib} stream={response.body} />;

<GistUI :source="answer" :components="{ Diagram: MyDiagram }" />

<GistUI source={answer} components={{ Diagram: MyDiagram }} />

<GistUI source={answer()} components={{ Diagram: MyDiagram }} />

import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ Diagram: (ctx) => ({ el: myElement(ctx) }) });

See Custom components for the full contract. Style hook: [data-gistui="Diagram"].