vyuhDiagram

Create and connect atomically ​

Loading interactive example…Open in new tab ↗
Opening the live canvas…

session.insertConnectedElement inserts the target and incoming connector in one admitted operation. The target can be a registered shape or standalone text. Both use the same connection geometry and history pipeline.

Try each creation button, then Undo: the target and connector disappear together. Redo restores both identities and the binding. Try invalid port requests a nonexistent port; the example reports the error and leaves the drawing unchanged. Use Fit after adding several targets to bring the expanded drawing into view.

The method returns a record containing elementId and connectorId; the inline element keeps its supplied ID. Connection policy and document admission apply. Like addElement, authored insertion preserves supplied values rather than invoking the defaults factory.

Source ​

dart
String addConnectedTarget(
  DrawingSession session, {
  bool text = false,
  bool invalidPort = false,
}) {
  final revision = session.document.revision;
  final row = (session.document.elements.length - 1) ~/ 2;
  return session
      .insertConnectedElement(
        source: const BoundEndpoint(elementId: 'source'),
        element: text
            ? TextElement(
                id: 'target-$revision',
                frame: DiagramRect.fromLTWH(260, row * 140 - 50, 200, 100),
                textStory: TextStory.paragraph(
                  id: 'target-story-$revision',
                  blockId: 'target-block-$revision',
                  text: 'Text connects too',
                ),
              )
            : ShapeElement(
                id: 'target-$revision',
                type: Shapes.rectangle,
                frame: DiagramRect.fromLTWH(260, row * 140 - 50, 200, 100),
                textStory: TextStory.paragraph(
                  id: 'target-story-$revision',
                  blockId: 'target-block-$revision',
                  text: 'A connected idea',
                ),
              ),
        targetPortId: invalidPort ? 'missing-port' : null,
        router: ConnectorRoute.quadratic,
      )
      .connectorId;
}

See Shapes for the complete argument contract.