vyuhDiagram

Floor plan ​

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

A simple house layout made from editable room rectangles and registered wall, door and window shapes. Use Add piece for rooms, straight walls, L walls, bracket walls, doors, windows, plain lines and dimensions. Drag, resize or rotate a piece; double-click room names and dimension labels to edit them. Undo and reset use the same controls as the other examples.

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. Use the connector toolbar button to draw connections. 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,
      ),
    ),
  ],
);