Stream Flow Diagram

A token-stream visualization showing a source emitting tokens with an optional aggregated output.

@sigil-ui/componentsReact

Preview

import { StreamFlowDiagram } from "@sigil-ui/components";

<StreamFlowDiagram
  source={{ label: "LLM" }}
  tokens={["Hello", "World", "!"]}
  output="Hello World!"
/>

<StreamFlowDiagram
  source={{ label: "Tokenizer", icon: <CpuIcon /> }}
  tokens={["The", "quick", "brown", "fox"]}
/>

Prop	Type	Default	Description
`source`	`{ label, icon? }`	—	Source node (required)
`tokens`	`string[]`	`["Hello", "World", "!"]`	Array of token strings to display
`output`	`string`	—	Aggregated output text
`className`	`string`	—	Additional CSS classes

Plus all standard <div> HTML attributes.