AV Design & Engineering Suite

Built React Flow and TypeScript editors that connect equipment across design views and generate engineering documents.

The same device can appear in a floor plan, a rack layout, a signal diagram, and an equipment list. Maintaining each separately makes it difficult to keep references and documentation consistent when a design changes.

I worked on the editors and shared data model behind floor planning, signal flow, and rack layouts. The implementation connects equipment placement, device ports, cable connections, and exports so the different views describe the same installation.

• Floor plans & signal flow

  Place equipment, define ports, and connect devices across drawing sheets.

• Rack layouts

  Arrange equipment in front and rear rack views using physical dimensions.

• Shared equipment data

  Reference the same devices across floor plans, racks, and signal diagrams.

• Engineering documents

  Generate bills of materials, cable schedules, and SVG/PDF exports from the design.

I used React Flow for selection, panning, zooming, and graph interactions, then added the nodes, ports, and coordinate handling needed for AV design. This avoided building those interactions from scratch. The tradeoff was adapting a graph library to physical dimensions and equipment references that span multiple sheets.

One set of equipment data supports both the drawings and the documentation engineers use to deliver a project.

• Undo and Redo in React Flow: Save Actions, Not Pointer Events →
• From Datablocks to React Flow: Build Something Useful First →
• React Flow vs. a Custom Canvas for AV Diagramming →