vyuh
DiagramBuild a flowchart editor
Commercial extension tutorial
This tutorial builds on the free Core + Flutter foundations and uses commercial SDK extensions for its ready-made editor controls, specialized shapes and routing. The controller, document, history and canvas are foundation APIs; the supplied palette, toolbar and inspector come from EditorExtension. Start with Hello world for the foundation-only example, then Extending it with extensions for the transition.
Learn Vyuh Diagram by building one Flutter editor, a step at a time. Start with an empty canvas and finish with a toolbar that follows editing state, a properties panel, connected custom nodes, saving/loading and keyboard shortcuts.
Editing comes from installing EditorExtension() in the configuration's extensions. By default it also supplies a tool palette, inspector and bottom toolbar around the canvas; its container callback rearranges that UI, and palette:, inspector: and toolbar: turn parts off. This tutorial keeps the editor's palette and composes its own toolbar and inspector to explain their shared controller contract. See editor composition.
The ideas behind the SDK
One controller drives editing. DiagramController creates a Diagram, which holds the committed document and history, and keeps its own selection, tool and camera. Your canvas, toolbar and property editors use that same controller. Host UI performs verbs and observes results.
Content is immutable; the controller is reactive. After an accepted edit, read a new document snapshot. Live editing notifications, completed document events and camera notifications serve different purposes. Step 4 shows how to subscribe from your own UI without depending on an internal state-management library.
Edits can be refused. Capabilities, locks and host rules are checked before a change is published. allowed tells you the outcome; requireAllowed() throws when that outcome is a denial. Neither is an extra approval step. Step 3 introduces both with real toolbar callbacks.
Definitions supply behavior. Register geometry, text, ports and capabilities once. Instances share the SDK's interaction, routing, undo and persistence machinery.
Follow the tutorial
Each page continues the same lib/main.dart from step 1. Code blocks tell you what to add or replace; checkpoints tell you what to try before moving on.
| Step | What you build |
|---|---|
| 1. Set up the canvas | A controller and bounded Flutter canvas. |
| 2. Register and create shapes | Start, process and decision nodes. |
| 3. Create the toolbar | Creation and history buttons; meaningful denial handling. |
| 4. Connect reactive state to your UI | Subscriptions that keep your own controls current. |
| 5. Show properties and connections | An inspector, custom selection control and attached connectors. |
| 6. Save and load the drawing | A JSON round trip and an autosave integration boundary. |
| 7. Add a custom review node | A review node with declared text, ports and behavior. |
| 8. Share verbs and shortcuts | One edit shared by a button and a keyboard binding. |
| 9. Control the canvas and grid | Grid, snapping and camera controls. |
Package installation and registry access are covered in step 1. For commercial onboarding, see SDK licensing.
Find, connect and arrange
The default editor toolbar includes Commands, Search drawing, Arrange drawing and Check drawing. Press Cmd+K on macOS or Ctrl+K to search installed commands; select an element first for its actions. Command forms use the declared parameter types and show the reason for a denial.
Search drawing finds text, element types and stable identities, and reveals collapsed owners before focusing the match. Arrange drawing lays out the whole drawing regardless of the current selection. Container contents retain their local arrangement. Install LayoutExtension() to enable the five layout algorithms: Layered, Tree, Grid, Circular and Force. Arrange drawing opens these choices in a menu without a search field.
Pull a port into empty space to choose the next shape and create its incoming connection. Undo removes both together. Check drawing runs installed domain checks; each suggested repair uses one undo entry and a stale report is denied.
Select several shapes to edit their shared properties. Mixed values remain explicit and choices or numeric ranges must be valid for every selected kind. For a custom shell, use the exported showDiagramCommands, showDiagramOutline, showDiagramLayout, showDiagramDiagnostics and showConnectedShapePicker functions.
Custom floating toolbars can include ...diagramAuthoringActions(context, controller) in their items to share the standard commands, drawing search, arrangement and diagnostic controls.
The playground keeps only Search drawing (the search icon) and Arrange drawing in its authoring toolbar. Commands and drawing checks remain available for custom SDK editors.