2. Register and create shapes

123456789

A registry describes kinds of shapes: their geometry, text regions, connection sites and supported edits. A document contains instances with stable IDs, positions and content. Register a type once; create as many instances as needed.

Replace the kit import with the full public import for the rest of this tutorial:

import 'package:vyuh_diagram_kit/vyuh_diagram_kit.dart';

Replace the session field with an explicitly registered standard library:

late final session = DrawingSession(shapeRegistry: ShapeRegistry.standard());

This is also the default registry. It already registers rectangles, polygons and ellipses, so there is no need to redefine them. A four-sided polygon supplies our decision diamond. Add these fields and replace initState:

late final String startId;
late final String processId;
late final String decisionId;

@override
void initState() {
  super.initState();
  startId = session.createShape(
    type: Shapes.ellipse,
    worldCenter: const DiagramPoint(-240, 0), text: 'Start',
  );
  processId = session.createShape(
    type: Shapes.rectangle,
    worldCenter: DiagramPoint.zero, text: 'Review request',
  );
  decisionId = session.createShape(
    type: Shapes.polygon, polygonSides: 4,
    worldCenter: const DiagramPoint(260, 0), text: 'Approved?',
  );
}

Positions are world coordinates. Panning and zooming change how you view them, not their saved positions. Creation returns an ID after a successful edit. We retain those IDs to connect the nodes later.

Checkpoint: move the three shapes and double-click their text. The registry supplies editing behavior without host drag handlers. Step 7 adds our own registered type.