vyuhDiagram
Core

Connected building topology ​

For a focused before-and-after demonstration of obstacle routing and label arrangement, open Make a crowded network readable.

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

A minimal custom shape: an outlined device icon, status dot, title and status line. Straight links bind to the center of each device icon and follow dragging. Hover over an icon for its address and capacity.

Both text lines use independent, single-line canonical text regions. Text editing starts disabled. Use the pencil in the vertical rail to enable it; turning it off keeps nodes movable. Two registered definitions share the same anatomy, except that one declares its text parts with editable: false, so people cannot edit them on the canvas while the application still updates them.

Use the rail to switch between focused and expanded site views. Live data changes the HVAC plant status and status dot even while direct editing is disabled. Manually editing status text does not infer a new health state: applications own that mapping.

The minimap starts expanded and includes connections. Click or drag it to navigate larger topologies.

The tooltip is a Flutter widget slot. Its portable image fallback preserves the icon and status dot in exports; transient hover details are not exported.

dart
ShapeDefinition topologyDefinition({required bool editable}) => ShapeDefinition(
  type: editable ? 'example.topology.editable' : 'example.topology',
  verbs: [setTopologyTextEditableVerb],
  name: 'Network device',
  // The device paints only its icon and labels, not a surface of its own.
  outline: null,
  minimumSize: const DiagramSize(140, 112),
  size: const DiagramSize(140, 112),
  behavior: const ShapeBehavior(resizable: false, rotatable: false),
  values: const {'image': ImageValueField()},
  connection: ShapeConnectionDefinition.fixedPorts([
    PortDefinition.normalized(
      id: 'center',
      anchor: const DiagramPoint(.5, 36 / 112),
      outwardNormal: DiagramPoint.zero,
      style: const PortStyle(
        width: 6,
        height: 6,
        fill: DiagramColor(0x00000000),
        stroke: DiagramColor(0x00000000),
      ),
    ),
  ], clipToOutline: false),
  body: ShapeColumn([
    ShapeSized(
      extent: 76,
      child: const ShapeWidget(
        'example.topology.details',
        id: 'device-icon',
        fallback: ShapeImage(),
      ),
    ),
    ShapeSized(
      extent: 18,
      child: ShapeText(
        'title',
        horizontalPadding: 0,
        editable: editable,
        textType: const PlainTextDefinition(maxLines: 1),
        role: TextRole.title,
      ),
    ),
    ShapeSized(
      extent: 18,
      child: ShapeText(
        'status',
        horizontalPadding: 0,
        editable: editable,
        textType: const PlainTextDefinition(maxLines: 1),
      ),
    ),
  ]),
);

The hierarchy action calls the shared graph layout API, not example-specific positioning code.

Network flow ​

Network flow begins automatically. Effects follow route and layout changes while remaining outside document history.