Starter kits

Two runnable compositions show how the same diagram API supports different host experiences. Their source lives in packages/vyuh_diagram_kit/example/starter_kits.

	Service map	Storyboard
Shapes	A custom service node	A clipping board and owned panels
Text	Single-line service names	Single-line headings and multiline bodies
Connections	Named input/output ports with directional policy	No connection affordance on boards or panels
Tools	Select, Service, Connect	Select, Panel, Text
Shared behavior	Commands, admission, change events, labels, undo and JSON	Commands, text/list editing, ownership, locks and undo

The examples use public package imports. Shape and tool registries deliberately omit unrelated built-in defaults; custom type and tool IDs use the same grammar and dispatch path as the defaults.

Run without Flutter

From the repository root:

dart --packages=.dart_tool/package_config.json packages/vyuh_diagram_kit/example/starter_kits/headless.dart services
dart --packages=.dart_tool/package_config.json packages/vyuh_diagram_kit/example/starter_kits/headless.dart storyboard

Both produce canonical JSON using the plain Dart VM. Their default text metrics are deterministic bootstrap measurements, not font-accurate server rendering. Restore the JSON with the same registry definitions for its custom shape types.

Embed the same composition

The main.dart gallery supplies Flutter shaping and mounts the same store:

final store = createServiceMap(
  textLayout: FlutterDiagramTextLayoutEngine(),
);
final session = DrawingSession.fromStore(store);

// Place inside your application's constrained layout.
DrawingCanvas(session: session)

After unmounting the canvas, dispose the borrowed session and then the store. The gallery does this automatically. Its toolbar enumerates registered tools and shows a count driven by completed document events. Camera changes do not increment that count.

cd apps/demo
flutter run -d chrome --target ../../packages/vyuh_diagram_kit/example/starter_kits/main.dart

Connection policy governs the service map's connection commands and gestures. Use beforeChange for authorization that must also cover advanced raw transactions. Neither example supplies workflow execution, arbitrary embedded Flutter widgets, general schema migrations, SVG/PDF output or complete accessibility; those capabilities should not be inferred from these examples.