vyuhDiagram
Core

MES production routing ​

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

Follow a live manufacturing order through mixing, in-process quality, rework and pallet release. The vertical tool rail adds process steps, quality decisions and endpoints without placing chrome above the canvas. Drag shapes to reroute their connectors or connect visible ports.

dart
String addFlowchartShape(DiagramController s, String type) {
  final decision = switch (type) {
    DiagramShapes.decision => s.edits.createShape(
      type,
      at: const DiagramPoint(500, 200),
      size: const DiagramSize(180, 120),
      style: flowchartStyle(type),
      text: 'Decision?',
    ),
    DiagramShapes.start || DiagramShapes.end => s.edits.createShape(
      type,
      at: const DiagramPoint(500, 200),
      size: const DiagramSize(56, 56),
      style: flowchartStyle(type),
    ),
    _ => s.edits.createShape(
      type,
      at: const DiagramPoint(500, 200),
      size: const DiagramSize(180, 96),
      style: flowchartStyle(type),
      textStory: _stepStory(
        'step-${s.document.revision}',
        'New step',
        'Describe the work',
      ),
    ),
  };
  decision.requireAllowed();
  return decision.id!;
}