Examples gallery
25 focused, runnable scenarios. Each example is its own HTML + TS pair under demo/examples/, so you can clone the repo and pnpm dev locally, or follow the links below to the live demo.
| Live gallery | Source |
|---|---|
| dev.flowgl.ouranos.kr/examples/ | github.com/Deiamor/flowgl/tree/master/demo/examples |
Basics
| Example | What it shows |
|---|---|
| Minimal | Three nodes, two edges, default options. |
| Drag & connect | Drag nodes, draw new connections from handles. |
| Snap to grid | snapGrid: 20 + matching dotted background. |
| Keyboard navigation | Tab cycle, Arrow nudge, Delete, Cmd+Z. |
| Read-only mode | readOnly: true disables every edit. |
Selection & multi-select
| Example | What it shows |
|---|---|
| Box select | Drag on empty canvas to rubber-band. |
| Cmd-click multi | Toggle additional nodes into the selection. |
| Programmatic selection | setSelectedIds() driven by a sidebar. |
| Align & distribute | alignNodes() + distributeNodes(). |
Edges
| Example | What it shows |
|---|---|
| Animated edges | animated: true marching ants. |
| Edge labels | Midpoint label with pill background. |
| Waypoints | Drag the midpoint to create / remove waypoints. |
| Endpoint reroute | Drag an endpoint to a different node. |
Nodes
| Example | What it shows |
|---|---|
| Status badges | error / warning / success / info badges. |
| Custom HTML node | htmlContent with rich HTML inside a node. |
| Named ports | ports: [{ id, side, offset }] + maxConnections. |
| Multi-line CJK labels | 한국어, 日本語, 中文测试, mixed and multi-line. |
Groups & layout
| Example | What it shows |
|---|---|
| Groups with collapse | type: 'group' + groupDoubleClickCollapses. |
| dissolveGroup | Remove a group container while keeping its children. |
| Hierarchical layout | hierarchicalLayout() driving chart.setNodes. |
| Animated layout | chart.animateLayout(targets, duration) smoothstep. |
Viewport tools
| Example | What it shows |
|---|---|
| Fit view | fitView / fitViewToSelection / scrollToNode. |
| Minimap | Position + click-to-pan. |
| Search & highlight | searchNodes(query) with dashed highlight. |
Import / export
| Example | What it shows |
|---|---|
| toJSON / fromJSON | Serialize, edit, deserialize roundtrip. |
| Export PNG | exportPNG(scale) with retina upscale. |
| Export SVG | exportSVG(padding) with proper bezier + shape polygons. |
Contributing an example
Each example is a single HTML file under demo/examples/<slug>.html with inline TS and a <aside> hint card explaining what to try. Add the new <slug> to demo/vite.config.ts rollupOptions.input and add a row to the table above. PRs welcome.