vyuhDiagram
Core

Construction site coordination ​

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

Illustrative site coordination, not CAD/BIM or engineering verification. Move work zones and inspect dependencies; status changes use sample data.

Use Block material delivery to mark a connection, then Undo to restore it. Host applications supply operational data and domain validation.

See Construction & Infrastructure 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: 'Construction site coordination',
  subtitle: '18 site assets · Materials / amber · Work fronts / blue · Services / teal · Coordination / violet · Inspections / red dashed. Select an asset to replace its SVG icon.',
  createController: createConstructionController,
  actions: [
    IndustryCanvasAction(
      label: 'Import SVG icon',
      icon: FluentIcons.image_20_regular,
      run: importSelectedNetworkIcon,
    ),
    IndustryCanvasAction(
      label: 'Block material delivery',
      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(),
    ),
  ],
);