vyuhDiagram
Core

Regional transport network ​

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

Schematic sample data. Select a node, drag it, or mark a link disrupted. This canvas does not compute schedules or geographic routes.

Use Disrupt interchange link to mark a connection, then Undo to restore it. Host applications supply operational data and domain validation.

See Transportation & Transit and connectors.

SVG asset icons ​

This network contains 18 assets and 24 connections. Facility cards, circular interchanges and hexagonal checkpoints have distinct silhouettes. Each asset includes an SVG icon, an editable name and an operational label.

Select one asset, then choose Import SVG icon in the canvas toolbar to replace its icon from a local file. Cancel leaves the document unchanged; Undo restores the previous icon. The picker also accepts raster images.

To supply SVG from application code:

dart
final icon = DiagramImageSource.fromBytes(
  utf8.encode(svgMarkup), // import dart:convert
  mimeType: 'image/svg+xml',
);
controller.setImage(assetId, icon);

The registered shape declares an ImageValueField and includes a ShapeImage() part in its body, alongside ShapeText('title') and ShapeText('status'). SVG bytes stay with the document when saved to JSON. The Flutter image renderer handles display; no per-icon Flutter widget or painter is required. Importing SVG creates image content, not separately editable SVG path elements.

Source ​

dart
Widget buildExample() => IndustryCanvas(
  title: 'Regional transport network',
  subtitle: '18 terminals and hubs · Sea / teal · Rail / violet · Road / amber · Air / blue. Select an asset to import your own SVG icon.',
  createController: createTransportationController,
  actions: [
    IndustryCanvasAction(
      label: 'Import SVG icon',
      icon: FluentIcons.image_20_regular,
      run: importSelectedNetworkIcon,
    ),
    IndustryCanvasAction(
      label: 'Disrupt interchange link',
      icon: FluentIcons.warning_20_regular,
      run: (s) {
        final link = s.document.elements.whereType<ConnectorElement>().first;
        s.edits
            .setConnectorStyle(
              link.id,
              color: const DiagramColor(0xFFBE4B49),
              strokeStyle: StrokeStyle.dashed,
            )
            .requireAllowed();
      },
    ),
    IndustryCanvasAction(
      label: 'Undo',
      icon: FluentIcons.arrow_undo_20_regular,
      run: (s) => s.edits.undo().requireAllowed(),
    ),
  ],
);