Component Reference
The complete inventory of the visualization layer: 56 widgets, 9 drawing tools and 1048 HMI symbols.
Each widget has its own page — follow the link for what it is for, its properties and its events. Use the component name exactly as written; it is the identifier the Designer, the import/export documents and the AI assistant all use.
Widgets
| Component | Name | Category | In the palette |
|---|---|---|---|
| Alarm Bell | AlarmBell | Alarm | Annunciator: a bell + active-alarm count badge; click for a summary popover with acknowledge |
| Alarm Event | AlarmEvent | Alarm | Live active alarms with state, severity accent, filtering, and acknowledge |
| Alarm Journal | AlarmJournal | Alarm | Append-only alarm history — searchable and paged, fast over months of data |
| Alarm Performance | AlarmDashboard | Alarm | ISA-18.2 monitoring: alarm rate, top bad actors, per-priority split, KPIs |
| Bar Chart | BarChart | Chart | Bars over a category axis — toggle horizontal or stack. Bind data to a named query; click a bar to expose {{point.value}}. |
| Historian | Historian | Chart | Time-series chart driven by the historian. Backfills the configured window, then tails live ticks as they arrive. |
| HMI Sparkline | HmiSparkline | Chart | Lightweight inline trend with an optional desired-range band; light enough to repeat many times per view |
| HMI Trend | HmiTrendChart | Chart | HP HMI embedded trend: operating-range Y-axis, desired-range band + dashed alarm limits, neutral line that colours only on excursion |
| Line Chart | LineChart | Chart | Line series over a category axis — toggle smooth / step / area / stack. Bind data to a named query; click a point to expose {{point.value}}. |
| Pie Chart | PieChart | Chart | Pie — set innerRadius for a donut, or the rose toggle. Bind data to a named query; click a slice to expose {{point.value}} and {{point.percent}}. |
| Radar Chart | RadarChart | Chart | Multi-axis radar (one polygon per row). Numeric columns become axes; bind data to a named query. |
| Scatter Chart | ScatterChart | Chart | Scatter / bubble (size + group fields). Bind data to a named query; click a point to expose {{point.value}} ([x, y]). |
| Sparkline | Sparkline | Chart | Compact chrome-less trend (line / area / bar). Bind data to a named query or a tag history. |
| Embedded View | EmbeddedView | Container | Embed another view into the current layout |
| Flex Container | FlexContainer | Container | Flexible layout container |
| Flex Repeater | FlexRepeater | Container | Repeat a view once per item of a bound array |
| Tab Container | TabContainer | Container | Tabbed container — one tab per panel, only the open tab is mounted |
| 3D Viewer | Viewer3D | Display | Renders a 3D symbol from the Symbol Library ('symbol3d', driven by its 'params' — bind each to a tag; the symbol's rules colour, move and label its parts), a plant of them ('equipment'), or a plain .glb model ('model'; to drive a .glb from tags, make it a 3D symbol: Symbol Library → Build from model). It is also a container (a digital twin): widgets placed inside it overlay the 3D view. Each child's 'anchor' prop places it — { mode: "screen" } keeps it at its x/y like a HUD panel; { mode: "node", target: "<part name>", point: "top"|"center"|"bottom", align: "bottom"|"top"|"center"|"left"|"right", offsetX, offsetY, occlude, hideBeyond } pins it to a model part so it follows the part as the camera moves (e.g. an EmbeddedView faceplate on a pump). |
| Barcode | Barcode | Display | Generates a barcode from a fixed or bound value: Code 128, GS1-128, EAN-13/8, UPC-A/E, Code 39/93, ITF, Data Matrix, GS1 Data Matrix, PDF417, Aztec or plain QR. Check digits are validated — an invalid value shows an error (and fires encodeError) instead of a wrong code. Encoded off the UI thread and cached; SVG/PNG download for label printing. |
| File Manager | FileManager | Display | Browse, upload, organize and download files in the shared uploads folder. Scope it to a root sub-folder, filter by type (images, video, documents, …), and switch between grid and list views. Shows a clear warning until an admin configures the upload folder. |
| Gauge | Gauge | Display | Analog gauge with arc indicator and needle |
| Icon | Icon | Display | A single scalable vector icon from the icon library |
| Image | Image | Display | Image element |
| Linear Scale | LinearScale | Display | Ruler-style scale — tick marks, numeric labels, indicators and a live pointer |
| Map | OpenStreetMap | Display | An OpenStreetMap geographic map with live, tag-bindable markers. Tiles are served through the same-origin backend proxy. |
| Markdown | Markdown | Display | Renders Markdown (GitHub-Flavored) as rich text — headings, lists, tables, task lists and syntax-highlighted code. Bind the content to a tag to drive it live. Safe by default; raw HTML is opt-in and sanitised. |
| Moving Analog Indicator | MovingAnalogIndicator | Display | HP HMI value-in-context bar: alarm bands (muted until entered), PV arrow + setpoint tick |
| PDF Viewer | PdfViewer | Display | Displays a PDF document from the asset Library or the Uploads folder (manuals, SOPs, drawings) with page navigation, zoom and download. Rendered by PDFium-WASM in a worker — no external downloads. |
| Progress | Progress | Display | Progress / fill bar — horizontal or vertical, single- or multi-value, with a numeric readout |
| QR Code | QRCode | Display | Generates a QR code from a fixed or bound value (asset IDs, work orders, batch numbers, links to SOPs or a LiveView page). Styled modules and finder patterns, colour gradient, a centred logo and a call-to-action frame; SVG/PNG download. Rendered off the UI thread and cached, so a view full of codes stays responsive. Fires encodeError when the value cannot be encoded. |
| Segment Display | SegmentDisplay | Display | 7- or 16-segment digital readout for floating-point values |
| Table | Table | Display | Data table that stays fast over large result sets |
| Tag Browser | TagBrowser | Display | Browse the tag namespace as a tree and select tags (structure only, no live values) |
| Tank | Tank | Display | Liquid level tank with fill indicator |
| Text | Text | Display | Text element with typography presets (h1–h6, paragraph, quote…) |
| Tree | TreeView | Display | A generic, customizable tree — author nodes with any icon, or bind a data hierarchy |
| Video Player | VideoPlayer | Display | Plays a video from the asset Library or the Uploads folder (training clips, SOPs, recorded incidents) with themed controls, shows a LIVE camera feed from the site's own media server, or embeds a YouTube/Vimeo link. Library, Uploads and live camera feeds all work OFFLINE; hosted video needs internet access and an administrator to enable External frames. Browsers play MP4 (H.264) and WebM — a DVR export in .avi/.mkv must be re-exported as MP4. |
| AI Chat | AIAssistant | Input | An AI assistant on this screen. Tick the skills it may use and the part of the plant it covers; operators can then ask about tags, alarms and your uploaded manuals without leaving the screen. It can read and suggest — it never changes anything on its own. |
| Button | Button | Input | Clickable button |
| Checkbox | Checkbox | Input | Checkbox group — pick one (single) or many (multiple) |
| Color Picker | ColorPicker | Input | Pick a color — exposes the chosen CSS color string on its value |
| Date Picker | DatePicker | Input | Date, date-range, or time picker |
| Dropdown | Dropdown | Input | Dropdown selection field |
| Form | Form | Input | Collect inputs and submit them to a database via a write Named Query |
| Input | Input | Input | Text input field |
| QR / Barcode Scanner | BarcodeScanner | Input | Reads QR codes and barcodes from the device camera, a USB/Bluetooth handheld scanner (keyboard wedge) or a photo. The scanned text becomes this widget's value ({{nodes.<scanner id>.props.value}}) and fires the scan event — wire scan → Set tag with value scan.text to write it to a tag. Decoding runs in a WebAssembly worker, never on the UI thread. The camera needs HTTPS or localhost; the handheld and image modes work over plain HTTP. |
| Radio | Radio | Input | Single-choice radio group |
| Slider | Slider | Input | Numeric slider track (exposes a number value) |
| Switch | Switch | Input | On/off toggle (exposes a boolean value) |
| Textarea | Textarea | Input | Multi-line text input |
| Upload | Upload | Input | Pick / drop a file — store it anywhere via its value or the fileReceived event |
| WYSIWYG | WYSIWYG | Input | Rich Markdown editor (true WYSIWYG, with source and preview modes). Exposes the authored markdown on its value — bindable, and usable as a form field. |
| Horizontal Menu | HorizontalMenu | Navigation | Top navigation with popover submenus |
| Link | Link | Navigation | Hyperlink |
| Vertical Menu | VerticalMenu | Navigation | Side navigation with submenus |
| Scheduler | Scheduler | Scheduler | A use-case-agnostic resource/timeline planning board — nested resources, Day/Week/Month scale views, author-defined categories and configurable bars. Each of the five array props (resources, events, categories, bands, dependencies) binds to its own Named Query whose COLUMN NAMES are that prop's field names; hover a prop for a worked SQL example. rangeStart/rangeEnd accept relative times (now, now-2h, today, today+5d) as well as ISO or epoch-ms. In an event script the payload is a BARE identifier: event for eventChange/eventClick/eventDoubleClick, slot for slotSelect. slotSelect also carries resourceId/time, reachable as slot.resourceId / slot.time. A bound events prop is not rewritten by a drag: handle eventChange and write through to the source, then refreshBinding. |
Drawing tools
Vector shapes drawn directly on a coordinate view. Geometry properties (x1Norm, y1Norm, x2Norm, y2Norm, points) are normalized 0–1 within the shape's box; omit them for a sensible default.
See Drawing & symbols for how to use them.
Arrow
Arrow — a line with a flippable arrow head at its centre
Component name: Arrow


| Property | Type | Default | Description |
|---|---|---|---|
routing | object | — | How the line's points are joined. style: straight | orthogonal | horizontal | vertical | isometric | curved | entityRelation; corner: sharp | rounded (bends only). Bezier CURVES drawn with point handles (the hidden curves prop) need style 'straight'. |
↳ routing.style | enum | straight | straight joins the points as drawn (and is the only style that draws point curves); the others route their own legs. Options: straight · orthogonal · horizontal · vertical · isometric · curved · entityRelation. |
↳ routing.corner | enum | sharp | Options: sharp · rounded. |
stroke | object | — | The line's pen: color, width (px), dash pattern, cap and opacity. On a pipe, width is the pipe's diameter and the dash is ignored. |
↳ stroke.color | color | currentColor | Line colour. On a pipe with line-colour shading this is the pipe's colour (hidden on a gradient pipe, which is its own colours). |
↳ stroke.width | number | 2.5 | Line width in px (a pipe's diameter). |
↳ stroke.dash | enum | "" | Dash pattern. A lineType.kind other than 'none' owns the dash and overrides this. Hidden on a pipe, which is always solid. Options: `` · 4 4 · 1 4 · 8 4 · 8 4 2 4 · 12 4 4 4. |
↳ stroke.cap | enum | butt | Options: butt · round · square. |
↳ stroke.opacity | number | 1 | — |
lineType | object | — | P&ID line type (ISA-5.1) — kind plus its marks' spacing/count/scale and, for flow arrows, reverse. Disabled while pipe.look is 'round' (a pipe's flow arrows are set in its pipe group). |
↳ lineType.kind | enum | none | 'process' is a pipe; 'electric' is a dashed instrument signal; 'pneumatic' adds double hash marks; 'data-link' adds circles for a software/digital link. 'flow-arrows' replaces the line with small arrows pointing the way it flows (on a pipe they ride INSIDE it); they move while the flow animation runs (animationType flow, or a flowing flow.source). 'none' leaves the styling to stroke.dash. Stroke colour and width are always yours. Options: none · process · electric · electric-binary · pneumatic · pneumatic-binary · data-link · hydraulic · capillary · electromagnetic · mechanical · flow-arrows. |
↳ lineType.spacing | number | 0 | Gap (px) between the marks. 0 = the type's own default. |
↳ lineType.count | number | 0 | Draw EXACTLY this many marks, spread evenly. 0 = auto — spacing decides, so the count grows with the line. Overrides spacing when set. |
↳ lineType.scale | number | 1 | Size multiplier for the marks (1 = the type's own). On a pipe it sizes the flow arrows inside it (0.5–2). |
↳ lineType.reverse | boolean | false | Flow arrows point end → start instead of the way the line was drawn. A live flow's own direction (flow.direction) turns them round again while it flows. |
pipe | object | — | Draw the line as a shaded round PIPE (the Symbol Editor's pipe). look: none | round. shading: 'line' (shaded in stroke.color, follows live flow/idle/fault colours) or a material gradient (steel, stainless, copper, pvc, iron, insulated) or 'custom' with edge/middle/centre colours. Use stroke.width as the diameter (8–14 px reads as a pipe). Arrow markers become shaded pipe heads. Flow arrows ride INSIDE the pipe: arrows = flow (only while the flow animation runs — animation.type flow, or a flowing flow.source) | always | none, sized by arrowSize (× the pipe's own, 0.25–4), spaced by arrowSpacing (px, 0 = auto), turned round by arrowReverse, coloured arrowColor. lineType and fittings are disabled on a pipe. |
↳ pipe.look | enum | none | Options: none · round. |
↳ pipe.shading | enum | line | line = shaded in the line colour; a preset = that material's gradient; custom = your own edge → centre colours. Options: line · steel · stainless · copper · pvc · iron · insulated · custom. |
↳ pipe.edge | color | #3f4650 | Gradient colour at the pipe's edges. |
↳ pipe.middle | color | #8d96a1 | Gradient colour between edge and centre. |
↳ pipe.centre | color | #eef1f4 | Gradient colour along the pipe's centre (the highlight). |
↳ pipe.arrows | enum | flow | Flow arrows inside the pipe: flow = only while the flow animation runs (they move); always = also when still (they hold, pointing the way it flows); none = never. Options: flow · always · none. |
↳ pipe.arrowSize | number | 1 | Size of the inner arrows — a multiplier on the pipe's own (1 = the Symbol Editor's share of the pipe width). |
↳ pipe.arrowSpacing | number | 0 | Gap between the inner arrows, in px. 0 = auto (grows with the arrow size). |
↳ pipe.arrowReverse | boolean | false | Arrows point end → start instead of the way the line was drawn. A live flow's own direction turns them round again while it flows. |
↳ pipe.arrowColor | color | "" | Colour of the flow arrows inside the pipe. Empty = translucent white. |
markers | object | — | Heads on the line: start / end (at the endpoints), mid (at the CENTRE of the run, on the stroke — stays visible when both ends are bound) and midFlip (reverse the centre head only). size is in stroke-width units. On a pipe only none | arrow apply (a shaded pipe head); circle/square are not drawn there. |
↳ markers.start | enum | none | Options: none · arrow · circle · square. |
↳ markers.end | enum | none | Options: none · arrow · circle · square. |
↳ markers.size | number | 5 | Head size in stroke-width units. On a pipe it scales the shaded pipe heads (5 = the pipe's own head). |
↳ markers.mid | enum | none | Head drawn at the CENTRE of the line (on the stroke), not at an endpoint. Options: none · arrow · circle · square. |
↳ markers.midFlip | boolean | false | Reverse the centre head only — the line itself is unchanged. |
fittings | object | — | P&ID fittings placed ALONG this line. items: space-separated "SymbolKey@position" tokens — position is 0..1 along the routed pipe, so the fitting follows the pipe when it moves; append '!' to flip a directional symbol. Example: "[email protected] [email protected]!". size: drawn size in px (default 22). Disabled while pipe.look is 'round'. |
↳ fittings.items | string | "" | Space-separated "SymbolKey@position" tokens (position 0..1 along the line, '!' to flip). Use the symbol names from the Piping and Fittings categories. |
↳ fittings.size | number | 22 | Drawn size of each fitting, in px. Does NOT scale with stroke width. |
flow | object | — | Live flow binding: source = a tag (flow rate or run/stop flag). While flowing the line takes color and animates (arrows move inside a pipe); idle it greys to idleColor. compare/threshold decide 'flowing'; direction auto = from the value's sign. |
↳ flow.source | tag | "" | Tag that drives this pipe — a flow rate or a run/stop flag. Leave empty for a plain line. |
↳ flow.compare | enum | > | How source is tested for "flowing". Options: > · >= · < · <= · == · != · truthy. |
↳ flow.threshold | number | 0 | — |
↳ flow.color | color | #5b8a8a | Stroke while flowing (HP HMI: muted, not vivid). Hidden on a gradient pipe, which keeps its own colours. |
↳ flow.idleColor | color | #9aa5b1 | Stroke while stopped (muted grey — the calm/idle state). Hidden on a gradient pipe. |
↳ flow.direction | enum | auto | Which way it flows. auto = from the value's sign (negative = reverse). Options: auto · forward · reverse. |
fault | object | — | Optional fault binding: when the source tag is truthy the line turns color (a broken / discordant flow path). Wins over flow. |
↳ fault.source | tag | "" | Tag whose truthy value turns the line the alarm colour. |
↳ fault.color | color | #d32f2f | — |
animation | object | — | Whole-line animation: type, duration (s), easing, active (bind to a tag), direction, pivotX/pivotY. type 'flow' marches the dash along the line — or, on flow arrows and on a pipe, moves the arrows; direction 'reverse' runs it end → start. |
↳ animation.type | enum | none | flow = the line flows (a marching dash, or moving arrows on flow-arrows / a pipe); the others move the whole line. Options: none · blink · pulse · flow · colorCycle · rotate · glow · shake · flicker. |
↳ animation.duration | number | 2 | Seconds per cycle. |
↳ animation.easing | enum | linear | Only the oscillating animations (blink / pulse / glow / shake / flicker) ease; the continuous loops run linear. Options: linear · ease · ease-in · ease-out · ease-in-out. |
↳ animation.active | boolean | true | Animate only while this is true. Bind it to a tag — e.g. run the flow only while the pump runs. |
↳ animation.direction | enum | normal | Reverse turns a rotation or a flow the other way; alternate swings back and forth. Options: normal · reverse · alternate. |
↳ animation.pivotX | number | 0.5 | Point it rotates/pulses about, across the box (0 = left, 0.5 = centre, 1 = right). |
↳ animation.pivotY | number | 0.5 | Point it rotates/pulses about, down the box (0 = top, 0.5 = centre, 1 = bottom). |
opacity | number | 1 | — |
shadow | boolean | false | — |
style | style | {} | Custom CSS properties |
x1Norm | number | 0 | start point x, normalized 0..1 within the box (0 = left edge, 1 = right edge) |
y1Norm | number | 0 | start point y, normalized 0..1 within the box (0 = top edge, 1 = bottom edge) |
x2Norm | number | 1 | end point x, normalized 0..1 within the box |
y2Norm | number | 1 | end point y, normalized 0..1 within the box |
waypoints | string | "" | Line/Arrow intermediate points between start and end, as a "x,y x,y …" string normalized 0..1 within the box (empty = a single straight run) |
curves | string | "" | Line/Arrow BEZIER CURVES (like a Symbol Editor path): one space-separated token per point [start, …waypoints, end] — '-' = a corner, or 'ix,iy,ox,oy' = that point's in- and out-handle as px OFFSETS from the point (either half may be empty). Drawn only with routing.style 'straight'. S-bend on a 2-point line: ",,80,-50 -80,50,,"; an arc through one waypoint: "- -40,0,40,0 -" |
startBindNode | string | "" | P&ID connection: node id/ref of the component the START endpoint binds to — it snaps to and follows that component (omit x1Norm/y1Norm when bound). Empty = free point |
endBindNode | string | "" | P&ID connection: node id/ref of the component the END endpoint binds to — it snaps to and follows that component (omit x2Norm/y2Norm when bound). Empty = free point |
startBindPort | string | "" | where on the start component to attach: 'auto' (default — the nearest point on the component's DRAWN OUTLINE facing the other end, so the line touches the symbol body rather than its bounding box) or a fixed port (top/right/bottom/left/center/corner), also resolved onto the outline. Use a fixed port when the nozzle elevation matters — a bottoms line must leave the BOTTOM |
endBindPort | string | "" | where on the end component to attach: 'auto' (default — the nearest point on the component's DRAWN OUTLINE facing the other end, so the line touches the symbol body rather than its bounding box) or a fixed port (top/right/bottom/left/center/corner), also resolved onto the outline. Use a fixed port when the nozzle elevation matters — a bottoms line must leave the BOTTOM |
Cube
Isometric cube with a top and side face
Component name: Cube


| Property | Type | Default | Description |
|---|---|---|---|
stroke | object | — | The outline's pen: color, width (px), dash pattern, cap and opacity. |
↳ stroke.color | color | currentColor | — |
↳ stroke.width | number | 2.5 | Stroke width in px. |
↳ stroke.dash | enum | "" | Options: `` · 4 4 · 1 4 · 8 4 · 8 4 2 4 · 12 4 4 4. |
↳ stroke.cap | enum | butt | Options: butt · round · square. |
↳ stroke.opacity | number | 1 | — |
fill | object | — | The inside: color and opacity. |
↳ fill.color | color | none | Fill colour ('none' = hollow). |
↳ fill.opacity | number | 1 | — |
depthRatio | number | 0.22 | — |
opacity | number | 1 | — |
shadow | boolean | false | — |
animation | object | — | Whole-shape animation: type (none | blink | pulse | flow | colorCycle | rotate | glow | shake | flicker), duration (s), easing, active (bind to a tag to run it only while true), direction, pivotX/pivotY (rotate/pulse centre, 0..1 of the box). |
↳ animation.type | enum | none | Options: none · blink · pulse · flow · colorCycle · rotate · glow · shake · flicker. |
↳ animation.duration | number | 2 | Seconds per cycle. |
↳ animation.easing | enum | linear | Only the oscillating animations (blink / pulse / glow / shake / flicker) ease; the continuous loops run linear. Options: linear · ease · ease-in · ease-out · ease-in-out. |
↳ animation.active | boolean | true | Animate only while this is true. Bind it to a tag — e.g. run the flow only while the pump runs. |
↳ animation.direction | enum | normal | Reverse turns a rotation or a flow the other way; alternate swings back and forth. Options: normal · reverse · alternate. |
↳ animation.pivotX | number | 0.5 | Point it rotates/pulses about, across the box (0 = left, 0.5 = centre, 1 = right). |
↳ animation.pivotY | number | 0.5 | Point it rotates/pulses about, down the box (0 = top, 0.5 = centre, 1 = bottom). |
style | style | {} | Custom CSS properties |
Curved Line
Cubic bezier curve with optional arrow heads and animation
Component name: CurvedLine


| Property | Type | Default | Description |
|---|---|---|---|
curvature | number | 0.3 | 0 = straight line, 0.3 = gentle S-curve, 0.7 = wide arc |
stroke | object | — | The curve's pen: color, width (px), dash pattern, cap and opacity. |
↳ stroke.color | color | currentColor | — |
↳ stroke.width | number | 2.5 | Stroke width in px. |
↳ stroke.dash | enum | "" | Options: `` · 4 4 · 1 4 · 8 4 · 8 4 2 4 · 12 4 4 4. |
↳ stroke.cap | enum | butt | Options: butt · round · square. |
↳ stroke.opacity | number | 1 | — |
markers | object | — | Heads at the ends: start / end (none | arrow | circle | square) and size in stroke-width units. |
↳ markers.start | enum | none | Options: none · arrow · circle · square. |
↳ markers.end | enum | none | Options: none · arrow · circle · square. |
↳ markers.size | number | 5 | Head size in stroke-width units. |
opacity | number | 1 | — |
shadow | boolean | false | — |
animation | object | — | Whole-shape animation: type (none | blink | pulse | flow | colorCycle | rotate | glow | shake | flicker), duration (s), easing, active (bind to a tag to run it only while true), direction, pivotX/pivotY (rotate/pulse centre, 0..1 of the box). |
↳ animation.type | enum | none | Options: none · blink · pulse · flow · colorCycle · rotate · glow · shake · flicker. |
↳ animation.duration | number | 2 | Seconds per cycle. |
↳ animation.easing | enum | linear | Only the oscillating animations (blink / pulse / glow / shake / flicker) ease; the continuous loops run linear. Options: linear · ease · ease-in · ease-out · ease-in-out. |
↳ animation.active | boolean | true | Animate only while this is true. Bind it to a tag — e.g. run the flow only while the pump runs. |
↳ animation.direction | enum | normal | Reverse turns a rotation or a flow the other way; alternate swings back and forth. Options: normal · reverse · alternate. |
↳ animation.pivotX | number | 0.5 | Point it rotates/pulses about, across the box (0 = left, 0.5 = centre, 1 = right). |
↳ animation.pivotY | number | 0.5 | Point it rotates/pulses about, down the box (0 = top, 0.5 = centre, 1 = bottom). |
style | style | {} | Custom CSS properties |
Cylinder
Database cylinder with an elliptical rim
Component name: Cylinder


| Property | Type | Default | Description |
|---|---|---|---|
stroke | object | — | The outline's pen: color, width (px), dash pattern, cap and opacity. |
↳ stroke.color | color | currentColor | — |
↳ stroke.width | number | 2.5 | Stroke width in px. |
↳ stroke.dash | enum | "" | Options: `` · 4 4 · 1 4 · 8 4 · 8 4 2 4 · 12 4 4 4. |
↳ stroke.cap | enum | butt | Options: butt · round · square. |
↳ stroke.opacity | number | 1 | — |
fill | object | — | The inside: color and opacity. |
↳ fill.color | color | none | Fill colour ('none' = hollow). |
↳ fill.opacity | number | 1 | — |
ellipseRatio | number | 0.18 | — |
opacity | number | 1 | — |
shadow | boolean | false | — |
animation | object | — | Whole-shape animation: type (none | blink | pulse | flow | colorCycle | rotate | glow | shake | flicker), duration (s), easing, active (bind to a tag to run it only while true), direction, pivotX/pivotY (rotate/pulse centre, 0..1 of the box). |
↳ animation.type | enum | none | Options: none · blink · pulse · flow · colorCycle · rotate · glow · shake · flicker. |
↳ animation.duration | number | 2 | Seconds per cycle. |
↳ animation.easing | enum | linear | Only the oscillating animations (blink / pulse / glow / shake / flicker) ease; the continuous loops run linear. Options: linear · ease · ease-in · ease-out · ease-in-out. |
↳ animation.active | boolean | true | Animate only while this is true. Bind it to a tag — e.g. run the flow only while the pump runs. |
↳ animation.direction | enum | normal | Reverse turns a rotation or a flow the other way; alternate swings back and forth. Options: normal · reverse · alternate. |
↳ animation.pivotX | number | 0.5 | Point it rotates/pulses about, across the box (0 = left, 0.5 = centre, 1 = right). |
↳ animation.pivotY | number | 0.5 | Point it rotates/pulses about, down the box (0 = top, 0.5 = centre, 1 = bottom). |
style | style | {} | Custom CSS properties |
Ellipse
Ellipse / circle with fill, stroke and animation
Component name: Ellipse


| Property | Type | Default | Description |
|---|---|---|---|
stroke | object | — | The outline's pen: color, width (px), dash pattern, cap and opacity. |
↳ stroke.color | color | currentColor | — |
↳ stroke.width | number | 2.5 | Stroke width in px. |
↳ stroke.dash | enum | "" | Options: `` · 4 4 · 1 4 · 8 4 · 8 4 2 4 · 12 4 4 4. |
↳ stroke.cap | enum | butt | Options: butt · round · square. |
↳ stroke.opacity | number | 1 | — |
fill | object | — | The inside: color and opacity. |
↳ fill.color | color | none | Fill colour ('none' = hollow). |
↳ fill.opacity | number | 1 | — |
opacity | number | 1 | — |
shadow | boolean | false | — |
animation | object | — | Whole-shape animation: type (none | blink | pulse | flow | colorCycle | rotate | glow | shake | flicker), duration (s), easing, active (bind to a tag to run it only while true), direction, pivotX/pivotY (rotate/pulse centre, 0..1 of the box). |
↳ animation.type | enum | none | Options: none · blink · pulse · flow · colorCycle · rotate · glow · shake · flicker. |
↳ animation.duration | number | 2 | Seconds per cycle. |
↳ animation.easing | enum | linear | Only the oscillating animations (blink / pulse / glow / shake / flicker) ease; the continuous loops run linear. Options: linear · ease · ease-in · ease-out · ease-in-out. |
↳ animation.active | boolean | true | Animate only while this is true. Bind it to a tag — e.g. run the flow only while the pump runs. |
↳ animation.direction | enum | normal | Reverse turns a rotation or a flow the other way; alternate swings back and forth. Options: normal · reverse · alternate. |
↳ animation.pivotX | number | 0.5 | Point it rotates/pulses about, across the box (0 = left, 0.5 = centre, 1 = right). |
↳ animation.pivotY | number | 0.5 | Point it rotates/pulses about, down the box (0 = top, 0.5 = centre, 1 = bottom). |
style | style | {} | Custom CSS properties |
Freehand
Smooth freehand stroke — getStroke runs at render size, no NaN
Component name: Freehand


| Property | Type | Default | Description |
|---|---|---|---|
brush | object | — | How the stroke is drawn. strokeMode false (default) = a filled, pressure-tapered outline shaped by size (px) and thinning (0 = uniform, 1 = max taper), painted by fill; true = a uniform stroked line painted by stroke, with end markers. |
↳ brush.strokeMode | boolean | false | Draw a uniform stroked line instead of the filled tapered outline. |
↳ brush.size | number | 6 | Outline width in px. |
↳ brush.thinning | number | 0.5 | 0 = uniform, 1 = max taper with pressure. |
fill | object | — | Colour of the filled outline (outline mode). |
↳ fill.color | color | currentColor | Fill colour ('none' = hollow). |
↳ fill.opacity | number | 1 | — |
stroke | object | — | The line's pen in stroke mode: color, width (px), dash, cap and opacity. |
↳ stroke.color | color | currentColor | — |
↳ stroke.width | number | 6 | Stroke width in px. |
↳ stroke.dash | enum | "" | Options: `` · 4 4 · 1 4 · 8 4 · 8 4 2 4 · 12 4 4 4. |
↳ stroke.cap | enum | round | Options: butt · round · square. |
↳ stroke.opacity | number | 1 | — |
markers | object | — | Heads at the ends: start / end (none | arrow | circle | square) and size in stroke-width units. |
↳ markers.start | enum | none | Options: none · arrow · circle · square. |
↳ markers.end | enum | none | Options: none · arrow · circle · square. |
↳ markers.size | number | 5 | Head size in stroke-width units. |
opacity | number | 1 | — |
shadow | boolean | false | — |
animation | object | — | Whole-shape animation: type (none | blink | pulse | flow | colorCycle | rotate | glow | shake | flicker), duration (s), easing, active (bind to a tag to run it only while true), direction, pivotX/pivotY (rotate/pulse centre, 0..1 of the box). |
↳ animation.type | enum | none | Options: none · blink · pulse · flow · colorCycle · rotate · glow · shake · flicker. |
↳ animation.duration | number | 2 | Seconds per cycle. |
↳ animation.easing | enum | linear | Only the oscillating animations (blink / pulse / glow / shake / flicker) ease; the continuous loops run linear. Options: linear · ease · ease-in · ease-out · ease-in-out. |
↳ animation.active | boolean | true | Animate only while this is true. Bind it to a tag — e.g. run the flow only while the pump runs. |
↳ animation.direction | enum | normal | Reverse turns a rotation or a flow the other way; alternate swings back and forth. Options: normal · reverse · alternate. |
↳ animation.pivotX | number | 0.5 | Point it rotates/pulses about, across the box (0 = left, 0.5 = centre, 1 = right). |
↳ animation.pivotY | number | 0.5 | Point it rotates/pulses about, down the box (0 = top, 0.5 = centre, 1 = bottom). |
style | style | {} | Custom CSS properties |
Line
Line with optional arrow heads, dash patterns and animation
Component name: Line


| Property | Type | Default | Description |
|---|---|---|---|
routing | object | — | How the line's points are joined. style: straight | orthogonal | horizontal | vertical | isometric | curved | entityRelation; corner: sharp | rounded (bends only). Bezier CURVES drawn with point handles (the hidden curves prop) need style 'straight'. |
↳ routing.style | enum | straight | straight joins the points as drawn (and is the only style that draws point curves); the others route their own legs. Options: straight · orthogonal · horizontal · vertical · isometric · curved · entityRelation. |
↳ routing.corner | enum | sharp | Options: sharp · rounded. |
stroke | object | — | The line's pen: color, width (px), dash pattern, cap and opacity. On a pipe, width is the pipe's diameter and the dash is ignored. |
↳ stroke.color | color | currentColor | Line colour. On a pipe with line-colour shading this is the pipe's colour (hidden on a gradient pipe, which is its own colours). |
↳ stroke.width | number | 2.5 | Line width in px (a pipe's diameter). |
↳ stroke.dash | enum | "" | Dash pattern. A lineType.kind other than 'none' owns the dash and overrides this. Hidden on a pipe, which is always solid. Options: `` · 4 4 · 1 4 · 8 4 · 8 4 2 4 · 12 4 4 4. |
↳ stroke.cap | enum | butt | Options: butt · round · square. |
↳ stroke.opacity | number | 1 | — |
lineType | object | — | P&ID line type (ISA-5.1) — kind plus its marks' spacing/count/scale and, for flow arrows, reverse. Disabled while pipe.look is 'round' (a pipe's flow arrows are set in its pipe group). |
↳ lineType.kind | enum | none | 'process' is a pipe; 'electric' is a dashed instrument signal; 'pneumatic' adds double hash marks; 'data-link' adds circles for a software/digital link. 'flow-arrows' replaces the line with small arrows pointing the way it flows (on a pipe they ride INSIDE it); they move while the flow animation runs (animationType flow, or a flowing flow.source). 'none' leaves the styling to stroke.dash. Stroke colour and width are always yours. Options: none · process · electric · electric-binary · pneumatic · pneumatic-binary · data-link · hydraulic · capillary · electromagnetic · mechanical · flow-arrows. |
↳ lineType.spacing | number | 0 | Gap (px) between the marks. 0 = the type's own default. |
↳ lineType.count | number | 0 | Draw EXACTLY this many marks, spread evenly. 0 = auto — spacing decides, so the count grows with the line. Overrides spacing when set. |
↳ lineType.scale | number | 1 | Size multiplier for the marks (1 = the type's own). On a pipe it sizes the flow arrows inside it (0.5–2). |
↳ lineType.reverse | boolean | false | Flow arrows point end → start instead of the way the line was drawn. A live flow's own direction (flow.direction) turns them round again while it flows. |
pipe | object | — | Draw the line as a shaded round PIPE (the Symbol Editor's pipe). look: none | round. shading: 'line' (shaded in stroke.color, follows live flow/idle/fault colours) or a material gradient (steel, stainless, copper, pvc, iron, insulated) or 'custom' with edge/middle/centre colours. Use stroke.width as the diameter (8–14 px reads as a pipe). Arrow markers become shaded pipe heads. Flow arrows ride INSIDE the pipe: arrows = flow (only while the flow animation runs — animation.type flow, or a flowing flow.source) | always | none, sized by arrowSize (× the pipe's own, 0.25–4), spaced by arrowSpacing (px, 0 = auto), turned round by arrowReverse, coloured arrowColor. lineType and fittings are disabled on a pipe. |
↳ pipe.look | enum | none | Options: none · round. |
↳ pipe.shading | enum | line | line = shaded in the line colour; a preset = that material's gradient; custom = your own edge → centre colours. Options: line · steel · stainless · copper · pvc · iron · insulated · custom. |
↳ pipe.edge | color | #3f4650 | Gradient colour at the pipe's edges. |
↳ pipe.middle | color | #8d96a1 | Gradient colour between edge and centre. |
↳ pipe.centre | color | #eef1f4 | Gradient colour along the pipe's centre (the highlight). |
↳ pipe.arrows | enum | flow | Flow arrows inside the pipe: flow = only while the flow animation runs (they move); always = also when still (they hold, pointing the way it flows); none = never. Options: flow · always · none. |
↳ pipe.arrowSize | number | 1 | Size of the inner arrows — a multiplier on the pipe's own (1 = the Symbol Editor's share of the pipe width). |
↳ pipe.arrowSpacing | number | 0 | Gap between the inner arrows, in px. 0 = auto (grows with the arrow size). |
↳ pipe.arrowReverse | boolean | false | Arrows point end → start instead of the way the line was drawn. A live flow's own direction turns them round again while it flows. |
↳ pipe.arrowColor | color | "" | Colour of the flow arrows inside the pipe. Empty = translucent white. |
markers | object | — | Heads on the line: start / end (at the endpoints), mid (at the CENTRE of the run, on the stroke — stays visible when both ends are bound) and midFlip (reverse the centre head only). size is in stroke-width units. On a pipe only none | arrow apply (a shaded pipe head); circle/square are not drawn there. |
↳ markers.start | enum | none | Options: none · arrow · circle · square. |
↳ markers.end | enum | none | Options: none · arrow · circle · square. |
↳ markers.size | number | 5 | Head size in stroke-width units. On a pipe it scales the shaded pipe heads (5 = the pipe's own head). |
↳ markers.mid | enum | none | Head drawn at the CENTRE of the line (on the stroke), not at an endpoint. Options: none · arrow · circle · square. |
↳ markers.midFlip | boolean | false | Reverse the centre head only — the line itself is unchanged. |
fittings | object | — | P&ID fittings placed ALONG this line. items: space-separated "SymbolKey@position" tokens — position is 0..1 along the routed pipe, so the fitting follows the pipe when it moves; append '!' to flip a directional symbol. Example: "[email protected] [email protected]!". size: drawn size in px (default 22). Disabled while pipe.look is 'round'. |
↳ fittings.items | string | "" | Space-separated "SymbolKey@position" tokens (position 0..1 along the line, '!' to flip). Use the symbol names from the Piping and Fittings categories. |
↳ fittings.size | number | 22 | Drawn size of each fitting, in px. Does NOT scale with stroke width. |
flow | object | — | Live flow binding: source = a tag (flow rate or run/stop flag). While flowing the line takes color and animates (arrows move inside a pipe); idle it greys to idleColor. compare/threshold decide 'flowing'; direction auto = from the value's sign. |
↳ flow.source | tag | "" | Tag that drives this pipe — a flow rate or a run/stop flag. Leave empty for a plain line. |
↳ flow.compare | enum | > | How source is tested for "flowing". Options: > · >= · < · <= · == · != · truthy. |
↳ flow.threshold | number | 0 | — |
↳ flow.color | color | #5b8a8a | Stroke while flowing (HP HMI: muted, not vivid). Hidden on a gradient pipe, which keeps its own colours. |
↳ flow.idleColor | color | #9aa5b1 | Stroke while stopped (muted grey — the calm/idle state). Hidden on a gradient pipe. |
↳ flow.direction | enum | auto | Which way it flows. auto = from the value's sign (negative = reverse). Options: auto · forward · reverse. |
fault | object | — | Optional fault binding: when the source tag is truthy the line turns color (a broken / discordant flow path). Wins over flow. |
↳ fault.source | tag | "" | Tag whose truthy value turns the line the alarm colour. |
↳ fault.color | color | #d32f2f | — |
animation | object | — | Whole-line animation: type, duration (s), easing, active (bind to a tag), direction, pivotX/pivotY. type 'flow' marches the dash along the line — or, on flow arrows and on a pipe, moves the arrows; direction 'reverse' runs it end → start. |
↳ animation.type | enum | none | flow = the line flows (a marching dash, or moving arrows on flow-arrows / a pipe); the others move the whole line. Options: none · blink · pulse · flow · colorCycle · rotate · glow · shake · flicker. |
↳ animation.duration | number | 2 | Seconds per cycle. |
↳ animation.easing | enum | linear | Only the oscillating animations (blink / pulse / glow / shake / flicker) ease; the continuous loops run linear. Options: linear · ease · ease-in · ease-out · ease-in-out. |
↳ animation.active | boolean | true | Animate only while this is true. Bind it to a tag — e.g. run the flow only while the pump runs. |
↳ animation.direction | enum | normal | Reverse turns a rotation or a flow the other way; alternate swings back and forth. Options: normal · reverse · alternate. |
↳ animation.pivotX | number | 0.5 | Point it rotates/pulses about, across the box (0 = left, 0.5 = centre, 1 = right). |
↳ animation.pivotY | number | 0.5 | Point it rotates/pulses about, down the box (0 = top, 0.5 = centre, 1 = bottom). |
opacity | number | 1 | — |
shadow | boolean | false | — |
style | style | {} | Custom CSS properties |
x1Norm | number | 0 | start point x, normalized 0..1 within the box (0 = left edge, 1 = right edge) |
y1Norm | number | 0 | start point y, normalized 0..1 within the box (0 = top edge, 1 = bottom edge) |
x2Norm | number | 1 | end point x, normalized 0..1 within the box |
y2Norm | number | 1 | end point y, normalized 0..1 within the box |
waypoints | string | "" | Line/Arrow intermediate points between start and end, as a "x,y x,y …" string normalized 0..1 within the box (empty = a single straight run) |
curves | string | "" | Line/Arrow BEZIER CURVES (like a Symbol Editor path): one space-separated token per point [start, …waypoints, end] — '-' = a corner, or 'ix,iy,ox,oy' = that point's in- and out-handle as px OFFSETS from the point (either half may be empty). Drawn only with routing.style 'straight'. S-bend on a 2-point line: ",,80,-50 -80,50,,"; an arc through one waypoint: "- -40,0,40,0 -" |
startBindNode | string | "" | P&ID connection: node id/ref of the component the START endpoint binds to — it snaps to and follows that component (omit x1Norm/y1Norm when bound). Empty = free point |
endBindNode | string | "" | P&ID connection: node id/ref of the component the END endpoint binds to — it snaps to and follows that component (omit x2Norm/y2Norm when bound). Empty = free point |
startBindPort | string | "" | where on the start component to attach: 'auto' (default — the nearest point on the component's DRAWN OUTLINE facing the other end, so the line touches the symbol body rather than its bounding box) or a fixed port (top/right/bottom/left/center/corner), also resolved onto the outline. Use a fixed port when the nozzle elevation matters — a bottoms line must leave the BOTTOM |
endBindPort | string | "" | where on the end component to attach: 'auto' (default — the nearest point on the component's DRAWN OUTLINE facing the other end, so the line touches the symbol body rather than its bounding box) or a fixed port (top/right/bottom/left/center/corner), also resolved onto the outline. Use a fixed port when the nozzle elevation matters — a bottoms line must leave the BOTTOM |
Polygon
Polygon with normalized vertex list, fill, stroke and animation
Component name: Polygon


| Property | Type | Default | Description |
|---|---|---|---|
stroke | object | — | The outline's pen: color, width (px), dash pattern, opacity and corner join. |
↳ stroke.color | color | currentColor | — |
↳ stroke.width | number | 2.5 | Stroke width in px. |
↳ stroke.dash | enum | "" | Options: `` · 4 4 · 1 4 · 8 4 · 8 4 2 4 · 12 4 4 4. |
↳ stroke.opacity | number | 1 | — |
↳ stroke.join | enum | round | Options: miter · round · bevel. |
fill | object | — | The inside: color and opacity. |
↳ fill.color | color | none | Fill colour ('none' = hollow). |
↳ fill.opacity | number | 1 | — |
↳ fill.rule | enum | nonzero | How a self-crossing outline is filled. Options: nonzero · evenodd. |
opacity | number | 1 | — |
shadow | boolean | false | — |
animation | object | — | Whole-shape animation: type (none | blink | pulse | flow | colorCycle | rotate | glow | shake | flicker), duration (s), easing, active (bind to a tag to run it only while true), direction, pivotX/pivotY (rotate/pulse centre, 0..1 of the box). |
↳ animation.type | enum | none | Options: none · blink · pulse · flow · colorCycle · rotate · glow · shake · flicker. |
↳ animation.duration | number | 2 | Seconds per cycle. |
↳ animation.easing | enum | linear | Only the oscillating animations (blink / pulse / glow / shake / flicker) ease; the continuous loops run linear. Options: linear · ease · ease-in · ease-out · ease-in-out. |
↳ animation.active | boolean | true | Animate only while this is true. Bind it to a tag — e.g. run the flow only while the pump runs. |
↳ animation.direction | enum | normal | Reverse turns a rotation or a flow the other way; alternate swings back and forth. Options: normal · reverse · alternate. |
↳ animation.pivotX | number | 0.5 | Point it rotates/pulses about, across the box (0 = left, 0.5 = centre, 1 = right). |
↳ animation.pivotY | number | 0.5 | Point it rotates/pulses about, down the box (0 = top, 0.5 = centre, 1 = bottom). |
style | style | {} | Custom CSS properties |
points | string | 0,0 0.5,1 1,0 | polygon/freehand vertices as a "x,y x,y …" string, each coordinate normalized 0..1 within the box |
Rectangle
Rectangle with fill, stroke, rounded corners and animation
Component name: Rectangle


| Property | Type | Default | Description |
|---|---|---|---|
stroke | object | — | The outline's pen: color, width (px), dash pattern, cap and opacity. |
↳ stroke.color | color | currentColor | — |
↳ stroke.width | number | 2.5 | Stroke width in px. |
↳ stroke.dash | enum | "" | Options: `` · 4 4 · 1 4 · 8 4 · 8 4 2 4 · 12 4 4 4. |
↳ stroke.cap | enum | butt | Options: butt · round · square. |
↳ stroke.opacity | number | 1 | — |
fill | object | — | The inside: color and opacity. |
↳ fill.color | color | none | Fill colour ('none' = hollow). |
↳ fill.opacity | number | 1 | — |
rx | number | 0 | corner radius in px |
opacity | number | 1 | — |
shadow | boolean | false | — |
animation | object | — | Whole-shape animation: type (none | blink | pulse | flow | colorCycle | rotate | glow | shake | flicker), duration (s), easing, active (bind to a tag to run it only while true), direction, pivotX/pivotY (rotate/pulse centre, 0..1 of the box). |
↳ animation.type | enum | none | Options: none · blink · pulse · flow · colorCycle · rotate · glow · shake · flicker. |
↳ animation.duration | number | 2 | Seconds per cycle. |
↳ animation.easing | enum | linear | Only the oscillating animations (blink / pulse / glow / shake / flicker) ease; the continuous loops run linear. Options: linear · ease · ease-in · ease-out · ease-in-out. |
↳ animation.active | boolean | true | Animate only while this is true. Bind it to a tag — e.g. run the flow only while the pump runs. |
↳ animation.direction | enum | normal | Reverse turns a rotation or a flow the other way; alternate swings back and forth. Options: normal · reverse · alternate. |
↳ animation.pivotX | number | 0.5 | Point it rotates/pulses about, across the box (0 = left, 0.5 = centre, 1 = right). |
↳ animation.pivotY | number | 0.5 | Point it rotates/pulses about, down the box (0 = top, 0.5 = centre, 1 = bottom). |
style | style | {} | Custom CSS properties |
Symbol library
1048 symbols in two disciplines — process (P&ID) and electrical — plus a set of arrows.
Process
485 symbols across 21 categories.
Agitators
10 symbols.
| Symbol | Component name | States |
|---|---|---|
| Agitator (Anchor) | PidAgitatorAgitatorAnchor | — |
| Agitator (Cross-Beam) | PidAgitatorAgitatorCrossBeam | — |
| Agitator (Disc) | PidAgitatorAgitatorDisc | — |
| Agitator (Flate-Blade Paddle) | PidAgitatorAgitatorFlateBladePaddle | — |
| Agitator (Gat Paddle) | PidAgitatorAgitatorGatPaddle | — |
| Agitator (Helical) | PidAgitatorAgitatorHelical | — |
| Agitator (Impeller) | PidAgitatorAgitatorImpeller | — |
| Agitator (Propeller) | PidAgitatorAgitatorPropeller | — |
| Agitator (Turbine) | PidAgitatorAgitatorTurbine | — |
| Agitator, Stirrer | PidAgitatorAgitatorStirrer | — |
Apparatus Elements
6 symbols.
| Symbol | Component name | States |
|---|---|---|
| Manhole | PidApparatusManhole | — |
| Socket, Connection Nozzle | PidApparatusSocketConnectionNozzle | — |
| Support Bracket | PidApparatusSupportBracket | — |
| Support Leg | PidApparatusSupportLeg | — |
| Support Ring | PidApparatusSupportRing | — |
| Support Skirt | PidApparatusSupportSkirt | — |
Centrifuges
8 symbols.
| Symbol | Component name | States |
|---|---|---|
| Centrifuge (High Speed) | PidCentrifugeCentrifugeHighSpeed | — |
| Centrifuge (Perforated Shell) | PidCentrifugeCentrifugePerforatedShell | — |
| Centrifuge (Pusher) | PidCentrifugeCentrifugePusher | — |
| Centrifuge (Screw, Perforated Shell) | PidCentrifugeCentrifugeScrewPerforatedShell | — |
| Centrifuge (Separator Disc) | PidCentrifugeCentrifugeSeparatorDisc | — |
| Centrifuge (Skimmer) | PidCentrifugeCentrifugeSkimmer | — |
| Centrifuge (Solid Shell) | PidCentrifugeCentrifugeSolidShell | — |
| Centrifuge, Decanter (Screw, Solid Shell) | PidCentrifugeCentrifugeDecanterScrewSolidShell | — |
Compressors
20 symbols.
| Symbol | Component name | States |
|---|---|---|
| AC Air Compressor | PidCompressorACAirCompressor | — |
| Blower, Fan (ISO) | PidCompressorBlowerFanISO | — |
| Centrifugal Compressor | PidCompressorCentrifugalCompressor | — |
| Centrifugal Compressor - Turbine Driven | PidCompressorCentrifugalCompressorTurbineDriven | — |
| Compressor | PidCompressorCompressor | — |
| Compressor (Centrifugal) (ISO) | PidCompressorCompressorCentrifugalISO | — |
| Compressor (Diaphragm) (ISO) | PidCompressorCompressorDiaphragmISO | — |
| Compressor (Ejector) (ISO) | PidCompressorCompressorEjectorISO | — |
| Compressor (Piston) (ISO) | PidCompressorCompressorPistonISO | — |
| Compressor (Ring) (ISO) | PidCompressorCompressorRingISO | — |
| Compressor (Roller Vane) (ISO) | PidCompressorCompressorRollerVaneISO | — |
| Compressor (Rotary) (ISO) | PidCompressorCompressorRotaryISO | — |
| Compressor (Screw) (ISO) | PidCompressorCompressorScrewISO | — |
| Compressor (Turbo) (ISO) | PidCompressorCompressorTurboISO | — |
| Compressor and Silencers | PidCompressorCompressorAndSilencers | — |
| Compressor, Vacuum Pump (ISO) | PidCompressorCompressorVacuumPumpISO | — |
| Liquid Ring Compressor | PidCompressorLiquidRingCompressor | — |
| Reciprocating Compressor | PidCompressorReciprocatingCompressor | — |
| Reciprocating Compressor 2 | PidCompressorReciprocatingCompressor2 | — |
| Rotary Compressor | PidCompressorRotaryCompressor | — |
Crushers & Grinding
13 symbols.
| Symbol | Component name | States |
|---|---|---|
| Crusher | PidCrusherCrusher | — |
| Crusher (Cone) | PidCrusherCrusherCone | — |
| Crusher (Hammer) | PidCrusherCrusherHammer | — |
| Crusher (Impact) | PidCrusherCrusherImpact | — |
| Crusher (Jaw) | PidCrusherCrusherJaw |