Skip to content
KONIGI

Dashboards / Visual representation / Process mimic

‹ 14 of 22 ›

Process mimic

An operator needs live values drawn on the physical layout of the plant.

Updated September 10, 2026

Problem

The operator does not think in metrics. They think in tanks, valves, pumps and the pipe that runs between the second reactor and the condenser. A dashboard of named numbers asks them to rebuild that picture on every glance.

Solution

Draw the plant. Vessels, lines and equipment laid out as they physically relate, with live values placed where the instrument actually sits and states shown on the equipment itself. The display becomes a schematic that happens to be alive.

This is the oldest pattern in the collection by decades. SCADA systems have used mimic diagrams since supervisory control began, and the reasoning has not changed: an operator who already holds a spatial model of the process can read a matching schematic faster than any list, and can reason about consequences—close this valve and that vessel’s level rises—in a way a table of tags cannot support.

The modern discipline around it comes from ISA-101 and the high-performance HMI movement, which was a direct reaction to mimics that had become photorealistic. Three-dimensional pipes, gradients, animated fluid and bright equipment colours all encode nothing while consuming the attention budget. The corrective is severe: flat two-dimensional shapes, greys and neutrals for the base graphic, and colour held back for abnormal conditions and alarms, with saturation carrying severity.

The consequence is a display that looks almost blank in normal operation, which is the point. Anything coloured is something wrong, so it is found rather than searched for.

Layout fidelity is a genuine question rather than a given. A mimic that mirrors physical geometry exactly can be harder to read than one arranged by process flow, because plants are laid out for construction and maintenance rather than for comprehension. Most good mimics are topologically faithful and geometrically loose.

Use when

Operators hold a physical or topological model of the system, the relationships between components matter as much as their values, and the same people watch the same display for long shifts.

Don’t use when

There is no physical referent. Drawing a schematic of an abstract system invents a spatial arrangement that carries false meaning, and viewers will read adjacency as relationship whether it is one or not.

Trade-offs

Mimics are expensive to build and expensive to keep true: the plant changes and the diagram does not, and a wrong schematic is far more dangerous than a stale chart because it is trusted spatially. They scale badly, so a large process becomes many linked displays and navigation between them becomes its own design problem. They resist responsive layout almost completely. And the decorative pull is relentless, because a realistic-looking mimic demos well to people who will never operate it.

Checklist

  • Is the layout faithful to process flow, and is geometric fidelity helping or hurting?
  • Is the base graphic greyscale, with colour reserved for abnormal states?
  • Does anything animate, and does the animation encode real information?
  • Is equipment state readable without colour alone?
  • What happens when a value is stale or its source is unreachable?
  • How many linked displays exist, and how does an operator move between them?
  • What keeps the diagram in step with the physical plant when it changes?
  • Is the display readable from where the operator actually sits?
  • Are alarm states distinguishable from setpoint deviations?
  • Does a new operator get taught this display, or expected to absorb it?

Compare

Ignition, WinCC and the other industrial SCADA platforms are where this pattern lives, and their template libraries have been steadily stripped of the 3D chrome that characterised them a decade ago as ISA-101 took hold. Grafana has a canvas panel that can approximate a mimic by placing elements freely and binding them to data, which brings the pattern into general observability and lacks the alarm-state model that makes an industrial version safe. Building management and energy systems use the same encoding for chillers, air handlers and circuits, with the same drift problem when the building is modified. Service map is the closest thing in software, and it differs in a way worth noting: its topology is discovered from traffic rather than drawn by an engineer, so it cannot go stale in the way a mimic can.

Grayscale with alerts is the colour discipline this pattern depends on entirely. Gauge is the instrument that legitimately stays round in this context. Semantic status color governs equipment states. Service map is the software analogue with discovered rather than drawn topology. Wallboard mode covers the control-room viewing conditions.

Process mimic anatomy A plant schematic drawn flat and grey, with live values sitting where the instrument actually is. Everything is neutral except one vessel running above its level alarm, so the abnormal condition is found rather than searched for. Almost blank in normal operation V-101 44% FV-12 V-102 96% P-204 312 rpm to unit 3 TI-07 84 °C PI-19 2.1 bar 1 2 3 1 FLAT AND GREY Two-dimensional shapes and neutrals for the base graphic. Three-dimensional pipes, gradients and animated fluid encode nothing and spend the whole attention budget. 2 THE ONE ABNORMAL Held back for alarms, with saturation carrying severity. Anything coloured is something wrong, so it gets found rather than searched for. 3 VALUES WHERE THE INSTRUMENT IS An operator who already holds a spatial model of the process reads a matching schematic faster than any list, and can reason about consequences from it — close this valve and that vessel's level rises. A table of tags can't support that. Layout fidelity is a real question, not a given. Plants are laid out for construction and maintenance, so most good mimics are topologically faithful and geometrically loose.
Wireframe — the pattern's anatomy, not any one product's version of it

Implementation

A schematic of the physical plant with live values on it. The layout is the operator's mental model, so it must not be rearranged for visual balance the way a dashboard grid can be.

Tokens
--foreground--card--muted--muted-foreground--border--status-warn--status-critical--status-unknown
V-10144%FV-12V-102▲ 96%312 rpmP-204to unit 3TI-0784 °CPI-192.1 bar

ProcessMimic.tsxEquipment as coordinates, pipes as polylines, readings by tag. Neutral until a status leaves nominal, and the glyph travels with the colour.

import { cn } from "@/lib/utils";

/** The closed set. Nothing else may be styled as a status. */
export type Status = "nominal" | "warn" | "critical" | "unknown";

/** Colour only leaves neutral for an abnormal state, and never alone: the glyph goes with it. */
const STATUS: Record<Status, { stroke: string; text: string; glyph: string | null }> = {
  nominal: { stroke: "stroke-border", text: "fill-foreground", glyph: null },
  warn: { stroke: "stroke-status-warn", text: "fill-status-warn", glyph: "▲" },
  critical: { stroke: "stroke-status-critical", text: "fill-status-critical", glyph: "▲" },
  unknown: { stroke: "stroke-status-unknown", text: "fill-status-unknown", glyph: "?" },
};

export type Kind = "vessel" | "valve" | "pump" | "instrument" | "outlet";
/** A piece of plant, placed where the operator expects it. The tag is the one printed on the equipment. */
export type Equipment = { tag: string; kind: Kind; x: number; y: number; w?: number; h?: number };
export type Reading = { value: number; unit: string; status: Status; stale?: boolean };

const fmt = (r: Reading) => (r.unit === "%" ? `${r.value}%` : `${r.value} ${r.unit}`);

const Value = ({ x, y, r, className, anchor = "middle" }: { x: number; y: number; r?: Reading; className?: string; anchor?: "start" | "middle" }) =>
  r ? (
    <text x={x} y={y} textAnchor={anchor} className={cn("text-[11px] tabular-nums", r.stale ? "fill-muted-foreground" : STATUS[r.status].text, className)}>
      {STATUS[r.status].glyph && <tspan>{STATUS[r.status].glyph} </tspan>}
      {fmt(r)}
      {r.stale && <tspan className="text-[9px]"> stale</tspan>}
    </text>
  ) : null;

/**
 * Flat and grey, with live values where the instruments are. The layout is
 * the operator's mental model, so it arrives as coordinates and is drawn as
 * given, never rearranged for balance. A vessel's level is its fill height.
 */
export function ProcessMimic({ equipment, pipes, readings, width = 440, height = 230 }: {
  equipment: Equipment[];
  /** Polylines between equipment, in the same coordinate space. */
  pipes: [number, number][][];
  readings: Record<string, Reading>;
  width?: number;
  height?: number;
}) {
  return (
    <svg viewBox={`0 0 ${width} ${height}`} width={width} height={height} className="max-w-full" role="img" aria-label="process mimic">
      {pipes.map((p, i) => (
        <polyline key={i} points={p.map(([x, y]) => `${x},${y}`).join(" ")} fill="none" className="stroke-border" strokeWidth={2} />
      ))}
      {equipment.map((e) => {
        const r = readings[e.tag];
        const st = r?.stale ? "stroke-border" : STATUS[r?.status ?? "nominal"].stroke;
        const dash = r?.stale ? "4 3" : undefined;
        const tag = <text className="fill-muted-foreground text-[9px]" textAnchor="middle">{e.tag}</text>;
        switch (e.kind) {
          case "vessel": {
            const w = e.w ?? 70, h = e.h ?? 92;
            const level = r ? Math.min(1, Math.max(0, r.value / 100)) * h : 0;
            return (
              <g key={e.tag}>
                <rect x={e.x} y={e.y + h - level} width={w} height={level} className="fill-muted" />
                <rect x={e.x} y={e.y} width={w} height={h} rx={3} fill="none" className={st} strokeWidth={r?.status === "nominal" ? 1.5 : 2} strokeDasharray={dash} />
                <text x={e.x + w / 2} y={e.y - 8} textAnchor="middle" className="fill-muted-foreground text-[9px]">{e.tag}</text>
                <Value x={e.x + w / 2} y={e.y + h / 2} r={r} />
              </g>
            );
          }
          case "valve":
            return (
              <g key={e.tag}>
                <circle cx={e.x} cy={e.y} r={9} className={cn("fill-card", st)} strokeWidth={1.5} />
                <path d={`M${e.x - 5} ${e.y - 4} L${e.x + 5} ${e.y + 4} M${e.x - 5} ${e.y + 4} L${e.x + 5} ${e.y - 4}`} className="stroke-muted-foreground" />
                <g transform={`translate(${e.x} ${e.y + 26})`}>{tag}</g>
              </g>
            );
          case "pump":
            return (
              <g key={e.tag}>
                <path d={`M${e.x} ${e.y - 12} L${e.x + 26} ${e.y} L${e.x} ${e.y + 12} Z`} className={cn("fill-muted", st)} strokeWidth={1.5} />
                <Value x={e.x + 13} y={e.y - 20} r={r} className="text-[10px]" />
                <g transform={`translate(${e.x + 13} ${e.y + 30})`}>{tag}</g>
              </g>
            );
          case "outlet":
            return (
              <g key={e.tag}>
                <rect x={e.x} y={e.y} width={e.w ?? 88} height={e.h ?? 30} rx={3} fill="none" className="stroke-border" strokeWidth={1.5} />
                <text x={e.x + (e.w ?? 88) / 2} y={e.y + (e.h ?? 30) / 2 + 4} textAnchor="middle" className="fill-muted-foreground text-[9px]">{e.tag}</text>
              </g>
            );
          case "instrument":
            return (
              <g key={e.tag}>
                <text x={e.x} y={e.y} className="fill-muted-foreground text-[9px]">{e.tag}</text>
                <Value x={e.x} y={e.y + 16} r={r} className="text-[10px]" anchor="start" />
              </g>
            );
        }
      })}
    </svg>
  );
}

demo.tsxHow it is called: the plant as data, and the readings with one vessel in warn.

import { ProcessMimic, type Equipment, type Reading } from "./ProcessMimic";

/** Two vessels, a valve, a pump and two field instruments. V-102 is above its level alarm. */
const EQUIPMENT: Equipment[] = [
  { tag: "V-101", kind: "vessel", x: 26, y: 46 },
  { tag: "FV-12", kind: "valve", x: 126, y: 92 },
  { tag: "V-102", kind: "vessel", x: 156, y: 62 },
  { tag: "P-204", kind: "pump", x: 286, y: 108 },
  { tag: "to unit 3", kind: "outlet", x: 328, y: 182 },
  { tag: "TI-07", kind: "instrument", x: 26, y: 172 },
  { tag: "PI-19", kind: "instrument", x: 156, y: 188 },
];

const PIPES: [number, number][][] = [
  [[96, 92], [156, 92]],
  [[226, 108], [286, 108]],
  [[312, 108], [360, 108], [360, 182]],
];

const READINGS: Record<string, Reading> = {
  "V-101": { value: 44, unit: "%", status: "nominal" },
  "V-102": { value: 96, unit: "%", status: "warn" },
  "P-204": { value: 312, unit: "rpm", status: "nominal" },
  "TI-07": { value: 84, unit: "°C", status: "nominal" },
  "PI-19": { value: 2.1, unit: "bar", status: "nominal" },
};

export default function Demo() {
  return (
    <div className="rounded-lg border bg-card p-4">
      <ProcessMimic equipment={EQUIPMENT} pipes={PIPES} readings={READINGS} />
    </div>
  );
}
What it renders. Identical markup in both panes, with only the token values changing.

Copy-paste: this implementation as plain text

Examples

Captures whose hotspots reference this pattern, grouped by product and dated. The dashed boxes are this pattern; hover any box for the note.

Ignition

A public SCADA demo running live simulated plant data, with a runtime toggle between simple and photorealistic pump and pipe rendering—the ISA-101 argument as a setting.

Ignition — Water Treatment / Overview
Process mimic. Flat two-dimensional shapes, values placed where the instrument is, and the flow ordered by process rather than by geography. Dense small-multiple layout. Nine filters, identical four-value panels. Reading one teaches you all nine, and the two stopped ones are found by shape. Gauge and dial. Tank level as a filled vertical scale—a bounded range where the endpoints are the physical tank, which is the case the gauge survives. Grayscale with alerts. Green for running, on every unit. The opposite of grey-at-rest, and it works only while stopped is the rare case. Process mimic. Pump and pipe appearance switchable between simple and photorealistic. The whole ISA-101 argument, shipped as a setting. Semantic status color. Stopped is grey and says Stopped. Colour and word together, so the state survives a monochrome screen.
Water Treatment / Overview September 11, 2026 Ignition Perspective public demo, Water Treatment (signed out) dense · dark · desktop-web
A real process mimic with live simulated plant data, and it settles two arguments from the entry. The first: the layout is topologically faithful and geometrically loose. Raw water pumps at the left, flash mixers, seven basins, nine filters, tanks, high service pumps, clearwell—the flow reads left to right because that is the process order, not because that is where the equipment stands. The second is where it departs from ISA-101, and the departure is deliberate. Green here means running. Every basin, every flocculator, every filter that is working is green, so most of the screen is coloured and the two stopped filters are the grey ones. That inverts the high-performance HMI rule—colour reserved for abnormal—and spends the budget on the ninety percent case. It is still readable, because the abnormal state is the absence of a colour everything else has, but it only works while "stopped" is rare. The pipe colours are a third channel again, encoding which fluid is in them rather than any state at all.
  • Process mimic Flat two-dimensional shapes, values placed where the instrument is, and the flow ordered by process rather than by geography.
  • Grayscale with alerts Green for running, on every unit. The opposite of grey-at-rest, and it works only while stopped is the rare case.
  • Dense small-multiple layout Nine filters, identical four-value panels. Reading one teaches you all nine, and the two stopped ones are found by shape.
  • Semantic status color Stopped is grey and says Stopped. Colour and word together, so the state survives a monochrome screen.
  • Gauge and dial Tank level as a filled vertical scale—a bounded range where the endpoints are the physical tank, which is the case the gauge survives.
  • Process mimic Pump and pipe appearance switchable between simple and photorealistic. The whole ISA-101 argument, shipped as a setting.

Machine-readable: this page as markdown