React P&ID / Process Diagram

Copy Page

The mimic diagram at the centre of every control room — and something the web has almost nothing for. Equipment symbols coloured by state, live readings on each tag, and animated process lines that show where product is actually flowing.

Installation

Props

kind is tank, pump, valve, sensor, or heater, each drawn as a simplified ISA symbol; state (normal, running, warning, fault, closed) sets its colour. Nodes are placed by absolute x/y in the coordinate space, so you lay the schematic out exactly as the P&ID does.

A mimic, not a truth source

Two conventions make this read like a real process graphic:

• Flow is shown, not implied. An active edge animates its dashes in the direction of flow; an idle line is static. On a live screen the eye goes straight to the moving lines, which is exactly where the product is.
• State is colour and value. Every symbol carries its tag and reading, and the header rolls faults and warnings into a summary, so the diagram degrades gracefully — a colour-blind operator still reads "184 °C" and the "1 fault" pill.

Edges route orthogonally (horizontal then vertical), the house style for P&IDs. This is a visualisation layer — it renders whatever state you feed it and gates nothing. Drive state and value from your live tags; put the actual control behind a Setpoint Control and an Interlock Chain.