vyuhDiagram
Core

Workplace floor planning ​

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

A live workplace layout made from editable room rectangles and registered wall, door and window shapes. Use the vertical tool rail for rooms, walls, doors, windows and dimensions. Drag, resize or rotate a piece, then double-click room names and dimension labels to edit them. Live occupancy values keep changing without adding dashboard chrome around the drawing.

The grid has a 4-unit base resolution. When zooming out hides intermediate lines, shape movement, resizing, and free connector endpoints snap to the displayed spacing instead of invisible subdivisions. Bound endpoints stay attached to their shapes. Plain lines use the standard Shapes.line registry definition: they are standalone strokes without arrowheads or endpoint bindings.

Dimensions use a straight connector with arrowheads at both ends and a label at its midpoint. Labels are manually authored: this example does not calculate real-world measurements or automatically join walls and openings.

dart
ConnectorElement floorDimension(
  String id,
  double x1,
  double x2,
  double y,
  String label,
) => ConnectorElement(
  id: id,
  start: FreeEndpoint(DiagramPoint(_floorSnap(x1), _floorSnap(y))),
  end: FreeEndpoint(DiagramPoint(_floorSnap(x2), _floorSnap(y))),
  startArrowhead: const Arrowhead.angle(),
  endArrowhead: const Arrowhead.angle(),
  strokeWidth: 1,
  color: const DiagramColor(0xFF64748B),
  labels: [
    ConnectorLabel(
      id: '$id-label',
      fraction: .5,
      story: TextStory.paragraph(
        id: '$id-story',
        blockId: '$id-block',
        text: label,
      ),
    ),
  ],
);