vyuhDiagram

Make a crowded network readable ​

Three links pass through a narrow corridor, where their names overlap on the actual paths. Equipment can also block the direct path between two devices. This example shows the two capabilities that address those problems.

Loading interactive example…Open in new tab ↗
Opening the live canvas…
  1. Arrange labels: the three overlapping connection names move into separate readable positions. Devices and connections stay in place.
  2. Move equipment: the orange device moves into the backbone connection. The path stays in place, making the obstruction visible.
  3. Reroute connections: the elbow now detours around the equipment. Move the equipment away, then reroute again to restore the direct route.
  4. Undo: label arrangement, equipment movement and rerouting are separate edits. Reset restores the original crowded corridor for another comparison.

Drag a blue device: its label follows its connector. Labels are anchored to a fraction of the path, with a small nearby offset; they are not fixed canvas text. After rerouting, use Arrange labels again if the new paths create overlaps.

Label arrangement and obstacle rerouting are explicit commands. Ordinary dragging keeps connections attached without repeatedly searching for obstacle-free paths.

dart
session.connect('access', 'core', router: ConnectorRoute.orthogonal);
final result = session.arrangeLabels();
if (!result.allowed) {
  // Show result.reason in your application's feedback area.
}
final rerouting = session.rerouteConnections();
if (!rerouting.allowed) {
  // Show rerouting.reason; the command leaves all connections unchanged.
}

These are diagram editing capabilities. The network is illustrative; it does not discover devices or fetch live telemetry. See routing and labels for current limits and result handling.

Arrange inside a frame ​

Choose Containment → Frame network, then use Arrange labels, Move equipment, and Reroute connections as before. The frame owns the devices and links; the planners respect active ancestor clips. Collapse network hides internal links; Expand network restores their geometry. Each action supports undo. Reset returns to the unframed fixture.

Review the network design ​

Open Network review → Disconnect backbone, then select Run checks in the diagnostics panel. The finding asks you to connect Access switch to Core router; selecting it locates the broken connector (or both devices if the connector was deleted). Choose Connect to wrong device, then frame and collapse the network and run checks again: selecting the finding selects the visible frame without expanding it. Choose Reconnect backbone and run checks again to clear the finding. Undo brings the disconnected draft back.

This rule checks an explicit connection requirement using canonical endpoint bindings. A line ending near the router does not count as connected. The host owns the rule; the engine supplies revision-matched findings and undoable edits. It does not simulate network traffic or perform reachability analysis.

Source ​

dart
actions: {
  'Arrange labels': (s) => s.arrangeLabels().requireAllowed(),
  'Reroute connections': (s) => s.rerouteConnections().requireAllowed(),
  'Move equipment': moveNetworkEquipment,
},