Examples

Explore a capability, try its controls, and use the linked API in your application. Each page contains a focused interactive example. Open in new tab opens the example gallery with navigation.

For a complete editing surface, open the playground. For coding-agent reference files, see Agents.

Essentials

Example	Try it / observable result	API
Your first drawing	Create, select, move and delete a few shapes using one session and canvas.	Session, Canvas
Transform modifiers	Resize from edges/corners, rotate, preserve ratio with Shift and resize from the center with Alt.	Session
Multi-selection and arrangement	Select, align, distribute, change stacking order and undo separate edits.	Session
Frames and ownership	Group and ungroup siblings, move nested contents, clip overflow, remove a frame while keeping children, or delete the complete tree.	Shapes
Departmental swimlanes	Arrange department frames in rows or columns without scaling tasks; collapse a lane to show its summary.	Session
Locks and capabilities	Compare instance locking with a definition that disables resizing and rotation.	Shapes, Hooks
Images	Add/replace image content, transform it, and inspect its default undecorated appearance.	Shapes
Drawing and erasing	Pick stroke defaults before drawing, edit the finished stroke and erase with undo.	Shapes

Custom shapes

Example	Try it / observable result	API
Flowchart	Edit a decision flow with branches, return paths and labels.	Shapes, Connectors
Floor plan	Add rooms, straight/L/bracket walls, doors, windows and editable dimension arrows.	Shapes, Connectors
Topology graph	Edit titles and status, toggle editability, hover for details, and compare Circular and native ELK layouts.	Graph layout, Shapes

Text and paragraphs

All examples use the same shared paragraph implementation, including when it is inside a shape or connector. The font catalog is drawing-wide.

Example	Try it / observable result	API
Single-line and multiline regions	Edit a card title/body and compare admitted body lists with rejected title lists.	Text, Shapes
Range and whole-story formatting	Format a range versus whole text; preserve mixed marks through save/load.	Text
Paragraphs, lists and checklists	Edit wrapping paragraphs, numbered/bulleted/checklist items and nesting; save and restore their structure.	Text
Fonts and inheritance	Configure the shared font catalog/default and compare explicit versus inherited font choices.	Configuration

Connections and motion

Example	Try it / observable result	API
Crowded network	Arrange overlapping labels, move equipment into a connection, then explicitly reroute the elbow around it.	Connectors
Connected cards	Switch four routers on bound cards, select a label, and start/stop a path animation.	Connectors
Anchors and contour routing	Compare straight, quadratic, cubic and elbow routes at center/edge anchors; inspect contour termination.	Connectors
Explicit ports	Connect fixed and instance-defined ports; observe hover/snap feedback and owner transforms.	Shapes, Connectors
Connector labels	Enter/double-click to edit, add a second label, move it along the path and style/delete each label.	Connectors
Connection admission	Allow/reject source/target combinations through one endpoint rule for interaction, commands and imported documents.	Hooks
Connected creation	Create a target and incoming connector atomically, including standalone text; undo both together.	Shapes
Path effects	Compare pulse and particles; vary count, size, speed and direction independently.	Animation

The crowded-network example demonstrates explicit obstacle rerouting; the routing example demonstrates endpoint anchors and contours. Port-label editing and effects on every freehand path are outside the current example scope because those capabilities are not complete.

Canvas and tools

Example	Try it / observable result	API
Navigation and animation	Jump or animate to cards/bounds, set normal scale and interrupt animation without editing content.	Navigation, Animation
View-only diagrams	Select, pan, scroll and zoom without moving or editing diagram elements.	Canvas
Grid snapping	Switch dot/line/custom patterns, spacing and increments; vary visibility independently of snapping.	Grids
Finite and infinite canvas	Compare bounded camera policies with unrestricted workspace navigation.	Canvas
Snap guides	Align neighboring sides and centers with a toggleable guide overlay.	Grids
Snap guide policy	Choose sides, centers and nearby candidate limits.	Grids
Minimap policies	Compare outlines/fills, optional connections and custom thumbnails, including filled text boxes.	Canvas
Custom tools	Register a tool beside built-ins, with cursor/shortcut and shared transaction/preview behavior.	Configuration

Widgets and host integration

Example	Try it / observable result	API
Controls inside a node	Use a slider, compact dropdown and button; drag non-interactive space and resize/rotate the node.	Widgets
Custom properties	Edit registered values through the inspector and the widget; observe one canonical value and undo history.	Widgets
Widget clipping and layering	Overlap nodes, clip a widget within a frame, and verify input follows visible content after pan/zoom.	Widgets
Portable widget fallback	Compare live controls with their declared portable appearance in output.	Widgets, Output
Events and permissions	Inspect semantic changes, deny an edit, and confirm no partial mutation or extra history entry.	Hooks
Transactions and undo	Preview/commit/cancel a multi-element operation; undo and redo one logical edit.	Undo and redo
Copy, paste and duplicate	Duplicate owned contents with fresh identities and retained text/connection relationships.	Session
Session lifetime	Unmount, dispose a borrowed session, remount the retained document, and undo an earlier edit.	Ownership

Persistence, output and scale

Example	Try it / observable result	API
Save and load	Round-trip JSON with rich text and custom values; reject an invalid or stale replacement.	Persistence
Explicit migrations	Upgrade a small older custom schema before canonical import; show failure without partial state.	Persistence
SVG and PNG	Export the same fixture with text, labels, images, clips and widget fallbacks.	Output
Service map and storyboard	Compare two compositions built from public registrations and hooks, without engine special cases.	Starter kits