Visual Conventions#

General Conventions#

The following conventions are applied throughout the document:

These call-outs carry important information that can be very useful. However, in some situations, other smaller icons are visible and should be regarded as a visual identifier that a larger information call-out of the same type can be found below. These icons include:

Convention	Callout
	Info
	Warning
	Note
	Tip

Table: Snippet visual conventions

Other visual indicators are used in the documentation to indicate information on specific actions or operations found in the MES GUI:

Convention	Description
	Described functionality is associated with the stated security feature
	Icon that symbolizes an edit action
	Icon that symbolizes an add action
	Icon that symbolizes a remove action
	Icon that symbolizes a move up action
	Icon that symbolizes a move down action
	Icon that symbolizes the use of a camera or scanner
	Icon that symbolizes the use of a keypad
	Icon that symbolizes a browser modal window view action
	Icon that symbolizes a download action
	Icon that symbolizes a copy action
	Icon symbolizing PDF availability

Table: Visual conventions

Flow Structure View#

In the Flow Structure View, icons will indicate the characteristics of a particular Flow Item. Below is a table listing these icons along with their meanings:

Table: Visual Conventions for the Flow Structure View

Context Structure View#

The Context Structure View displays information on the contexts that are associated with a given Flow Item. The available contexts for each Step are represented by icons located next to the Step name. Below is a table listing these icons along with their meanings:

Table: Visual Conventions for Step Contexts

Context Matrix View#

The Context Matrix View shows the entire set of entities that are contextually associated with each Flow Item. Each entity is represented by an icon, and their meanings are provided in the table below:

Table: Visual Conventions for Entities on the Context Matrix View

Checklist Items#

Critical Manufacturing MES uses icons to quickly convey specific information about Checklist items, helping you to understand the type and significance of each item at a glance. The table below lists the possible icons and their corresponding meanings.

Table: Visual Conventions for Checklist Items

Diagram Color Convention#

Diagrams are used to summarize relationships, dependencies, and lifecycle flows that are easier to understand visually than through text alone. To make these diagrams easier to understand, colors are also used to distinguish the role of each element, such as the primary entity, related entities, contextual configuration, optional objects, and lifecycle states.

The diagram below illustrates the standard role-based palette used for entity relationship diagrams:

flowchart LR
  E["Primary entity"]:::entity
  B["Business Data"]:::business
  L["Linked entity"]:::linked
  N["Non-Business Data"]:::nonbusiness
  C["Context / configuration"]:::context
  O["Optional object"]:::optional

  E --- B
  E --- L
  B --- N
  C --- E
  O --- E

  classDef entity fill:#FB9F53,stroke:#FB9F53,color:#000
  classDef business fill:#65CDE8,stroke:#65CDE8,color:#000
  classDef linked fill:#FCD5B5,stroke:#FCD5B5,color:#000
  classDef nonbusiness fill:#B7DEE8,stroke:#B7DEE8,color:#000
  classDef context fill:#B9CDE5,stroke:#B9CDE5,color:#000
  classDef optional fill:#B7DEE8,stroke:#65CDE8,color:#000,stroke-width:1px,stroke-dasharray: 5 5

Table: Entity diagram labels and descriptions

Other diagram types use a different color convention. Instead of distinguishing entity roles, these diagrams use color to represent states within a State Model or lifecycle:

• Active or in‑progress states use the initial state color.
• Terminal or final states use the final state color.

The diagram below illustrates a simple lifecycle workflow, using the standard color convention to distinguish active states from terminal states:

graph TD
    A1[Created] -->|Enqueue| A2[Queued]

    A2 -->|Complete| A3[Completed]
    A2 -->|Cancel| A4[Canceled]

    classDef mermaid_initial_state fill:#d7e4bd,stroke:#92d050,stroke-width:3px,color:#000;
    classDef mermaid_final_state fill:#a7e2f2,stroke:#65CDE8,stroke-width:3px,color:#000;

    class A1,A2 mermaid_initial_state;
    class A3,A4 mermaid_final_state;

Functionality Name#

For every described functionality, the specific security feature associated to it is listed below the name. Example:

FeatureGroup.Feature

Deprecated Features#

When a feature page is set to be deprecated and removed in a future version, it will display the following indication below the title:

This feature is marked as deprecated and will be removed in a future version.