---
alias: introduction-visual-conventions
description: "This documentation outlines visual conventions used throughout the system’s interface"
---

# Visual Conventions

## General Conventions

The following conventions are applied throughout the document:

!!! info
    Helpful hints to assist in particular situations.

!!! note
    A note with important information.

!!! warning
    A warning or a word of caution.

!!! tip
    A best practice or a recommendation.

!!! smart-barcode "Supports Smart Barcodes"
    Indicates that the feature, page, or component supports Smart Barcode Scanning.

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 |
| ---------- | ----------- |
| :information_source:  | Info |
| :warning: | Warning |
| :material-pencil-circle: | Note |
| :material-fire:  | 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                                                                |
| ---------------------------- | -------------------------------------------------------------------------- |
| :lock:                       | Described functionality is associated with the stated **security** feature |
| :material-pencil:            | Icon that symbolizes an **edit** action                                    |
| :material-plus:              | Icon that symbolizes an **add** action                                     |
| :material-trash-can:         | Icon that symbolizes a **remove** action                                   |
| :material-arrow-up:          | Icon that symbolizes a **move up** action                                  |
| :material-arrow-down:        | Icon that symbolizes a **move down** action                                |
| :material-camera:            | Icon that symbolizes the use of a **camera** or **scanner**                |
| :material-keyboard:          | Icon that symbolizes the use of a **keypad**                               |
| :material-eye:               | Icon that symbolizes a browser modal window **view** action                |
| :material-download:          | Icon that symbolizes a **download** action                                 |
| :material-content-copy:      | Icon that symbolizes a **copy** action                                     |
| :fontawesome-solid-file-pdf: | 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:

| Icon                              | Description                           |
| --------------------------------- | ------------------------------------- |
| :core-static-sequential-sm:       | Indicates a Sequential Flow           |
| :core-static-float-sm:            | Indicates a Non-Sequential Block      |
| :mes-static-alternateflow-sm:     | Indicates an Alternate Flow           |
| :mes-static-lineflow-sm:          | Indicates a Line Flow                 |
| :core-static-rework-sm:           | Indicates a Rework Path               |
| :mes-static-optional-sm:          | Indicates an Optional Flow Item       |
| :core-coreconnectiot-stepover-sm: | Indicates a Pass-through Step         |
| :core-static-deeaction-sm:        | Indicates the presence of a Condition |
| :core-entitytypes-rule-sm:        | Indicates the presence of a Rule      |

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:

| Icon                                | Context              |
| ----------------------------------- | -------------------- |
| :mes-entitytypes-service-sm:        | Service              |
| :mes-entitytypes-resource-sm:       | Resource             |
| :mes-entitytypes-recipe-sm:         | Recipe               |
| :mes-entitytypes-parameter-sm:      | Parameter            |
| :mes-entitytypes-datacollection-sm: | Data Collection      |
| :mes-entitytypes-chart-sm:          | Chart                |
| :mes-entitytypes-checklist-sm:      | Checklist            |
| :mes-entitytypes-bom-sm:            | BOM                  |
| :mes-entitytypes-durable-sm:        | Durable              |
| :core-entitytypes-document-sm:      | Document             |
| :mes-entitytypes-flow-sm:           | Flow                 |
| :mes-static-yieldandcycletime-sm:   | Yield and Cycle Time |
| :mes-entitytypes-futureaction-sm:   | Future Action        |

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:

| Icon                                 | Description                |
| ------------------------------------ | -------------------------- |
| :mes-entitytypes-service-sm:         | Service                    |
| :mes-entitytypes-resource-sm:        | Resource                   |
| :mes-entitytypes-recipe-sm:          | Recipe                     |
| :mes-entitytypes-parameter-sm:       | Parameter                  |
| :mes-entitytypes-datacollection-sm:  | Data Collection            |
| :mes-entitytypes-chart-sm:           | Chart                      |
| :mes-entitytypes-checklist-sm:       | Checklist                  |
| :mes-entitytypes-bom-sm:             | BOM                        |
| :mes-entitytypes-durable-sm:         | Durable                    |
| :core-entitytypes-document-sm:       | Document                   |
| :mes-entitytypes-samplingpattern-sm: | Sampling Pattern           |
| :mes-entitytypes-inspectionplan-sm:  | Inspection Plan:           |
| :mes-static-time-sm:                 | Time Constraints           |
| :mes-entitytypes-flow-sm:            | Flow                       |
| :mes-entitytypes-certification-sm:   | Certification Requirements |
| :mes-static-yieldandcycletime-sm:    | Yield and Cycle Time       |

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.

| Icon                             | Description                                    |
| -------------------------------- | ---------------------------------------------- |
| :core-static-manualtask-sm:      | Indicates a Manual Task                        |
| :core-static-manualaction-sm:    | Indicates a Manual Action                      |
| :core-static-automaticaction-sm: | Indicates an Automatic Action                  |
| :core-static-sequential-sm:      | Represents a Sequential Checklist Item         |
| :core-static-float-sm:           | Represents a Floating Checklist Item           |
| :core-static-new-sm:             | Indicates a Required Checklist Item            |
| :core-static-signature-sm:       | Indicates the need for a Signature             |
| :core-static-parameter-sm:       | Indicates the presence of a Parameter          |
| :core-static-link-sm:            | Indicates the presence of a Documentation Link |

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:

```mermaid
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
```

| Label | Description |
| --- | ---|
| Primary entity | The main entity of the diagram. All other elements relate directly or indirectly to this entity. |
| Business Data | A MES Business Data entity that has a direct relationship with the primary entity. |
| Linked entity | An associated entity that connects to the primary entity or to a related Business Data entity. |
| Non-Business Data | A supporting entity associated with the primary entity that is not classified as Business Data. |
| Context/configuration | A configuration or setup object that provides context for the primary entity, but is not directly part of it. |
| Optional object | An optional object for a given entity instance. |

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:

```mermaid
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;
```

!!! note
    Some diagrams may vary slightly depending on their purpose or usage, so the colors should be treated as a visual guide.

## Functionality Name

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

:lock: 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:

:material-timer-remove-outline: This feature is marked as **deprecated** and will be removed in a future version.