State component

A state component displays the current state of a system as a Mermaid flowchart, which shows the states, the transitions between them and the active state.

State component showing state machine visualisation with Mermaid flowchart

Use a state component to show a state machine, a process flow or the status of a complex system as a diagram. Use a Caption or a Lamp when only the name or the health of the current state needs to be shown.

Parameters

Parameter	Type	Required	Default	Description
model	string	Yes	None	Mermaid flowchart definition that lists the states and the transitions between them. Without a model, the component shows that no model is available
value	string	No	None	Identifier of the active state, which the diagram highlights. The identifier must match a node identifier in model, for example IDLE for the node IDLE(Idle)
bind	array	No	None	Data binding. Bind a tag to the value target to drive the highlighted state. Only the value target is handled

id, class, label, enabled, and visible are accepted but have no effect.

Example

The bound tag supplies the name of the current state, which must match one of the node identifiers in model, such as IDLE:

dashboard:
  items:
    - row:
        items:
          - state:
              model: |
                flowchart LR
                  ERROR(Error)
                  IDLE(Idle)
                  ENABLE(Enable)
                  DISCOVERY(Discovery)
                  MEASURE(Measure)
                  PRECHARGE(Precharge)
                  RUN(Run)
                  IDLE --> ENABLE
                  IDLE --> DISCOVERY
                  ENABLE --> MEASURE
                  MEASURE --> PRECHARGE
                  PRECHARGE --> RUN
              bind:
                - target: value
                  source: /Prohelion BMU/Properties/State/Controller/CurrentState/Name
                  toType: string