Flowchart

Drag-and-connect flowchart editor — rectangle/decision/terminal/input-output shapes, styled per-node, rendered read-only for students.

Embed syntax

Inside node/facet MDX content, embed the component directly. Inside a page, insert it through the Studio's component picker instead — it configures the same props through a form (or raw JSON if EditorComponentisn't set for this one).

<FlowChart
  title=""
  interactive={false}
  nodes={[{"id":"start","type":"flowchartNode","position":{"x":60,"y":40},"data":{"label":"Start","shape":"oval","fill":"#ffffff","borderColor":"#334155","textColor":"#1f2937"}},{"id":"step-1","type":"flowchartNode","position":{"x":40,"y":180},"data":{"label":"Step 1","shape":"rectangle","fill":"#ffffff","borderColor":"#334155","textColor":"#1f2937"}}]}
  edges={[{"id":"start-step-1","source":"start","target":"step-1","sourceHandle":"bottom","targetHandle":"top"}]}
/>

Live example

Flowchart

React Flow

Props

Prop	Type	Default	Description
title	string	"Flowchart"	Card title.
nodes	FlowChartNode[]	—	Node list — each has an id, position, and data (label, shape, and optional fill/borderColor/textColor).
edges	FlowChartEdge[]	—	Connections between nodes, referencing node ids and (optionally) which side each handle connects from/to.
interactive	boolean	false	Let the reader pan/zoom the read-only diagram.

PreviousNext

Vector 2D Collapsible