vyuhDiagram

Topology graph ​

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. Turn on Edit text to edit either line; turning it off keeps nodes movable. Two registered definitions share geometry and content but declare different textEditable capabilities. This example switches definitions in one undoable transaction rather than locking the nodes.

Choose 5, 10 or 20 nodes from the dropdown. Refresh topology rebuilds that size and simulates a data update to the database status and status dot, including while direct editing is disabled. Manually editing the 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',
  displayName: 'Network device',
  outline: const ShapeOutlineDefinition.rectangle(),
  textBounds: const ShapeBoundsDefinition.frame(),
  minimumSize: const DiagramSize(140, 112),
  defaultSize: const DiagramSize(140, 112),
  capabilities: ShapeCapabilities(
    textEditable: editable,
    resizeHandles: [],
    rotatable: false,
    decoration: const ShapeDecorationBehavior(fill: false, border: false),
  ),
  connection: ShapeConnectionDefinition.fixedPorts([
    PortDefinition.normalized(
      id: 'center',
      anchor: const DiagramPoint(.5, 36 / 112),
      outwardNormal: DiagramPoint.zero,
      style: const PortStyle(
        size: 6,
        fill: DiagramColor(0x00000000),
        stroke: DiagramColor(0x00000000),
      ),
    ),
  ], clipToOutline: false),
  layers: [
    ShapeWidgetLayerDefinition(
      id: 'device-icon',
      bounds: _iconBounds,
      widgetKey: 'example.topology.details',
      fallback: const [
        ShapeVisualLayerDefinition(
          id: 'portable-icon',
          bounds: _iconBounds,
          visual: ShapeLayerVisual.image,
        ),
      ],
    ),
    const ShapeTextLayerDefinition(
      id: 'title',
      slotId: 'title',
      bounds: _titleBounds,
      singleLine: true,
      role: TextRole.title,
    ),
    const ShapeTextLayerDefinition(
      id: 'status',
      slotId: 'status',
      bounds: _statusBounds,
      singleLine: true,
    ),
  ],
);

The Layout menu compares Circular and native ELK, with downward and left-to-right directional arrangements. These call the shared graph layout API, not example-specific positioning code.

Network flow ​

Toggle Network flow to animate connections and Particles to switch between particles and pulses. Choose packet shape, count and speed. Effects follow route changes; refresh and node-count changes preserve settings. Turning flow off leaves document history unchanged.