Application compositions

Two headless fixtures show how the same diagram API supports different host experiences. Their source lives in apps/demo/lib/examples/kits. They are not part of the interactive example gallery. For an interactive host composition, see Editor composition.

	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 apps/demo/bin/headless.dart services
dart --packages=.dart_tool/package_config.json apps/demo/bin/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 on a controller that installs the same extensions for its custom shape types.

The headless entry point uses createServiceMapController() or createStoryboardController(), then the same controller.save(DiagramJsonCodec.new) and controller.dispose() API as a Flutter host. Each factory's controller owns its diagram's registry and document lifetime.

Embed the same composition

The demo supplies Flutter text layout and mounts a DiagramCanvas. For your own Flutter application, create a DiagramController with your document and the extensions that declare your shapes, then pass it to DiagramCanvas(controller: controller). Dispose the controller after unmounting its canvas. See Getting started for a complete host example.

cd apps/demo
flutter run -d chrome

Open Editor composition to explore canvas chrome.

The DiagramRules(canConnect: ...) rule 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, SVG/PDF output or complete accessibility; those capabilities should not be inferred from these examples.