# State Machine Panel UI

#### Opening State Machine Editor

You can open the State Machine Editor using one of the following methods.

- **Via the menu**  
    Navigate to **View > State Machine> State Machine Editor**.
- **Via the Solution Explorer Panel**  
    In the **Solution Explorer Panel,** browse through the solution and double-click an already existing State Machine.  
    (In the provided sample solutions, State Machines are located under **Solution > State Machine**)

Once the **State Machine Editor** is open, you can switch between it and other editors (e.g. the Scene Editor) by selecting the corresponding tab.

To adjust display preferences for the **State Machine Editor** panel, open the Preferences dialog via the menu: **File > Preferences...**, then navigate to [Preferences > Environment > State Machine](https://doc316en.candera.eu/books/preferences/page/state-machine).

#### State Machine Editor Panel

Navigation and rearranging elements in the State Machine Diagram (area A in the image below):

- **Pan the Diagram**:   
    Drag with the **middle mouse button** to move the State Machine diagram within the editor.
- **Rearrange Elements**:   
    Use **drag and drop** to reposition individual elements, such as states and transitions, within the diagram.
- **Select Multiple Nodes**:   
    Click and drag to draw a **selection rectangle** around the elements you want to select.

<div drawio-diagram="8810"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-12/drawing-4-1764807635.png" alt=""/></div>

<table border="1" id="bkmrk-a-%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%91%E3%83%8D%E3%83%AB-%E3%82%B9%E3%83%86%E3%83%BC%E3%83%88%E3%83%9E%E3%82%B7%E3%83%B3%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF" style="border-collapse: collapse; width: 800px; border-width: 1px;"><colgroup><col style="width: 6.4347%;"></col><col style="width: 25.9786%;"></col><col style="width: 67.5629%;"></col></colgroup><tbody><tr><td class="align-center">A</td><td>Diagram</td><td>Displays the main workspace for the State Machine Editor.</td></tr><tr><td class="align-center">B</td><td>State/Transition View</td><td>Hierarchically displays all States and Transitions defined in the State Machine Editor.</td></tr><tr><td class="align-center">C</td><td>Behavior/Fusion Configuration</td><td>Displays the behaviors configured for the currently selected element (e.g., State or Transition) in the diagram. By clicking the Fusion button, the Fusion Editor panel will appear, showing Fusion-specific configurations.</td></tr><tr><td class="align-center">a</td><td>Top Toolbar</td><td>Contains icons representing elements for constructing a state machine. These can be dragged onto the diagram to create and configure your state machine.</td></tr><tr><td class="align-center">b</td><td>Bottom Toolbar</td><td>Provides tools for zooming and panning the diagram's display.</td></tr></tbody></table>

#### State/Transition View

This view displays all elements of the State Machine (states and transitions) in a hierarchical tree format. When you select an element in the tree, the corresponding element is also automatically highlighted in the diagram on the right. This synchronized selection allows you to edit and check each element intuitively and efficiently.

<div drawio-diagram="7840"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-01/drawing-4-1738149478.png" alt=""/></div>

<table border="1" class="align-center" id="bkmrk-1-transition-%E3%82%B9%E3%83%86%E3%83%BC%E3%83%88%E3%83%9E%E3%82%B7%E3%83%B3" style="border-collapse: collapse; width: 800px; border-width: 1px; height: 564.888px;"><colgroup><col style="width: 45px;"></col><col style="width: 177px;"></col><col style="width: 576px;"></col></colgroup><tbody><tr><td style="border-width: 1px;">1</td><td class="align-left" style="border-width: 1px;">State Machine Name</td><td style="border-width: 1px;">Displays the name of the State Machine currently selected in the Solution Explorer. If a Subchart is open, its fill path is shown.

</td></tr><tr style="height: 80.05px;"><td style="border-width: 1px; height: 80.05px;">2</td><td class="align-left" style="border-width: 1px; height: 80.05px;">show current subcharts only

</td><td class="align-left" style="border-width: 1px; height: 80.05px;">Switches the content displayed in the editor tree.

- **Enabled (blue icon):** Displays the entire content of the selected state machine, allowing a comprehensive overview.
- **Disabled (white icon):** Displays only the currently active Subchart as the root of the editor tree. If no Subchart is active, the full content is shown.

</td></tr><tr style="height: 80.05px;"><td style="border-width: 1px; height: 80.05px;">3</td><td class="align-left" style="border-width: 1px; height: 80.05px;">show subchart details

</td><td class="align-left" style="border-width: 1px; height: 80.05px;">Switches the Subchart content displayed in the editor tree.

- **Enabled (blue icon):** Displays all contents within the currently active Subchart, providing a detailed view of its structure.
- **Disabled (white icon):** Displays only the active Subchart's immediate elements, focusing on essential information.

</td></tr><tr style="height: 102.438px;"><td style="border-width: 1px; height: 102.438px;">4</td><td class="align-left" style="border-width: 1px; height: 102.438px;">show transitions

</td><td class="align-left" style="border-width: 1px; height: 102.438px;">Toggles the visibility of Transitions in the editor tree.

- **Enabled (blue icon):** Displays all Transitions, showing their relationships as child nodes under their source or target.
- **Disabled (white icon):** Hides all Transitions, simplifying the tree display.

</td></tr><tr style="height: 29.675px;"><td style="border-width: 1px; height: 29.675px;">5</td><td class="align-left" style="border-width: 1px; height: 29.675px;">Navigation Buttons</td><td class="align-left" style="border-width: 1px; height: 29.675px;">Works similarly to a web browser's "Back" and "Forward" controls. They allow you to browse through the display history of state machines in the diagram, making it easy to revisit previously viewed diagrams.

</td></tr><tr><td style="border-width: 1px;">6</td><td class="align-left" style="border-width: 1px;">Hierarchy Navigation Button</td><td class="align-left" style="border-width: 1px;">Enables you to switch from a detailed Subchart view back to a higher-level hierarchy view. This feature helps you easily transition between Subchart-specific details and the overall state machine structure, ensuring better navigation and context awareness.</td></tr><tr><td style="border-width: 1px;">7</td><td class="align-left" style="border-width: 1px;">Search Field</td><td class="align-left" style="border-width: 1px;">Allows you to quickly locate States or Transitions within the editor tree by entering keywords. When a match is found, the corresponding element is automatically highlighted in both the editor tree and the diagram. Additionally, its details are displayed in the properties panel for easy review and editing.</td></tr><tr><td style="border-width: 1px;">8</td><td class="align-left" style="border-width: 1px;">Editor Tree</td><td class="align-left" style="border-width: 1px;">Displays all elements configured in the diagram, such as States, Transitions, and other components, in a hierarchical tree structure.</td></tr></tbody></table>

#### Behavior/Fusion Configuration

This panel displays the behaviors associated with the currently selected State Machine element (State, Transition, etc.). To configure or edit complex behavior logic, click the **Fusion...** button to open the Fusion Editor.

<div drawio-diagram="7841"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-01/drawing-4-1738149536.png" alt=""/></div>

<table border="1" class="align-center" id="bkmrk-1-%E6%A4%9C%E7%B4%A2%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89-%E3%81%93%E3%81%AE%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AB%E6%96%87%E5%AD%97" style="border-collapse: collapse; width: 800px; border-width: 1px; height: 132.567px;"><colgroup><col style="width: 45px;"></col><col style="width: 177px;"></col><col style="width: 576px;"></col></colgroup><tbody><tr style="height: 56.8333px;"><td style="border-width: 1px; height: 56.8333px;">1</td><td class="align-left" style="border-width: 1px; height: 56.8333px;">Search Field</td><td class="align-left" style="border-width: 1px; height: 56.8333px;">Allows you to quickly locate behaviors in the Behavior View by entering a string of characters.

If a behavior that includes the keyword you entered is found, it is automatically highlighted and its details are displayed in the Properties panel, enabling easily review and editing.

</td></tr><tr style="height: 46.2667px;"><td style="border-width: 1px; height: 46.2667px;">2</td><td class="align-left" style="border-width: 1px; height: 46.2667px;">Fusion button</td><td class="align-left" style="border-width: 1px; height: 46.2667px;">Opens the Fusion Editor and displays the Fusion diagram for the selected element (such as State, Transition, etc.). This allows you to configure and edit Fusion-specific configurations.

</td></tr><tr style="height: 29.4667px;"><td style="border-width: 1px; height: 29.4667px;">3</td><td class="align-left" style="border-width: 1px; height: 29.4667px;">Behavior View</td><td class="align-left" style="border-width: 1px; height: 29.4667px;">Lists all behaviors configured within the currently selected element (State, Transition, etc.).

</td></tr></tbody></table>

#### Top Toolbar

The toolbar at the top of the diagram provides icons for the elements that make up a State Machine. To add elements such as States, Transitions and other components:

- **Drag** the desired icons from the toolbar.
- **Drop** it into the State Machine diagram.

This intuitive drag-and-drop functionality makes it easy to build and customize complex State Machines

For detailed information about each component, please refer to <span style="color: rgb(230, 126, 35);">[Components in State Machine](https://doc316en.candera.eu/books/state-machine/page/components-in-state-machine)</span>.

<div drawio-diagram="8811"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-12/drawing-4-1764807680.png" alt=""/></div>

<table border="1" class="align-center" id="bkmrk-1-transition-transio" style="border-collapse: collapse; width: 800px; border-width: 1px; height: 406.884px;"><colgroup><col style="width: 45px;"></col><col style="width: 177px;"></col><col style="width: 577px;"></col></colgroup><tbody><tr style="height: 46.2667px;"><td style="border-width: 1px; height: 46.2667px;">1</td><td class="align-left" style="border-width: 1px; height: 46.2667px;"><span style="color: rgb(230, 126, 35);">[Transition](https://doc316en.candera.eu/link/204#bkmrk-transition)</span></td><td class="align-left" style="border-width: 1px; height: 46.2667px;">A **Transition** defines the movement **between States** based on specified conditions and actions.</td></tr><tr style="height: 35.0667px;"><td style="border-width: 1px; height: 35.0667px;">2</td><td class="align-left" style="border-width: 1px; height: 35.0667px;"><span style="color: rgb(230, 126, 35);">[Initial State](https://doc316en.candera.eu/link/204#bkmrk-initial-state)</span></td><td class="align-left" style="border-width: 1px; height: 35.0667px;">The **Initial State** represents the **starting point** of the State Machine's execution.

</td></tr><tr style="height: 46.2667px;"><td style="border-width: 1px; height: 46.2667px;">3</td><td class="align-left" style="border-width: 1px; height: 46.2667px;"><span style="color: rgb(230, 126, 35);">[History State](https://doc316en.candera.eu/link/204#bkmrk-history-state)</span></td><td class="align-left" style="border-width: 1px; height: 46.2667px;">The **History State** stores the last State within a Subchart and resumes execution from that state when the Subchart is re-entered.</td></tr><tr style="height: 46.2667px;"><td style="border-width: 1px; height: 46.2667px;">4</td><td class="align-left" style="border-width: 1px; height: 46.2667px;"><span style="color: rgb(230, 126, 35);">[State](https://doc316en.candera.eu/link/204#bkmrk-state)</span></td><td class="align-left" style="border-width: 1px; height: 46.2667px;">A **State** represents a specific point in the State Machine. Specific actions and conditions can be processed at both when **entering** and **exiting** the state.

</td></tr><tr style="height: 46.2667px;"><td style="border-width: 1px; height: 46.2667px;">5</td><td class="align-left" style="border-width: 1px; height: 46.2667px;"><span style="color: rgb(230, 126, 35);">[Subchart](https://doc316en.candera.eu/link/204#bkmrk-subchart)</span></td><td class="align-left" style="border-width: 1px; height: 46.2667px;">A **Subchart** is a structural element that groups States and Transitions into a single unit, simplifying the management of complex State Machines.</td></tr><tr style="height: 35.0667px;"><td style="border-width: 1px; height: 35.0667px;">6</td><td class="align-left" style="border-width: 1px; height: 35.0667px;"><span style="color: rgb(230, 126, 35);">[Entry Point](https://doc316en.candera.eu/link/204#bkmrk-entry%2Fexit-point)</span></td><td class="align-left" style="border-width: 1px; height: 35.0667px;">An **Entry Point** is a pseudo-state that enables controlled entry into a Subchart.</td></tr><tr style="height: 35.2833px;"><td style="border-width: 1px; height: 35.2833px;">7</td><td class="align-left" style="border-width: 1px; height: 35.2833px;"><span style="color: rgb(230, 126, 35);">[Exit Point](https://doc316en.candera.eu/link/204#bkmrk-entry%2Fexit-point)</span></td><td class="align-left" style="border-width: 1px; height: 35.2833px;">An **Exit Point** is a pseudo-state that enables controlled exit from a Subchart.

</td></tr><tr style="height: 46.2667px;"><td style="border-width: 1px; height: 46.2667px;">8</td><td class="align-left" style="border-width: 1px; height: 46.2667px;"><span style="color: rgb(230, 126, 35);">[Note](https://doc316en.candera.eu/link/204#bkmrk-note)</span></td><td class="align-left" style="border-width: 1px; height: 46.2667px;">A **Note** is a visual element used to organize and display **supplementary information** and design details related to State Machines.</td></tr><tr style="height: 35.0667px;"><td style="border-width: 1px; height: 35.0667px;">9</td><td class="align-left" style="border-width: 1px; height: 35.0667px;"><span style="color: rgb(230, 126, 35);">[Choice](https://doc316en.candera.eu/link/204#bkmrk-design-options)</span></td><td class="align-left" style="border-width: 1px; height: 35.0667px;">A **Choice** is used to branch transitions based on conditions.</td></tr><tr style="height: 35.0667px;"><td style="border-width: 1px; height: 35.0667px;">10</td><td class="align-left" style="border-width: 1px; height: 35.0667px;"><span style="color: rgb(230, 126, 35);">ViewState</span></td><td class="align-left" style="border-width: 1px; height: 35.0667px;">A **ViewState** controls the visibility of a specific <span style="color: rgb(230, 126, 35);">[View](https://doc316en.candera.eu/books/view-editor/page/view)</span> within the State Machine.</td></tr></tbody></table>

#### Bottom Toolbar


The **toolbar at the bottom of the diagram** provides controls for **display magnification** and other functions related to the diagram's visualization. These tools help you adjust the view for easier navigation and editing of complex State Machine diagrams.

<div drawio-diagram="8873"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-12/drawing-5-1766149926.png" alt=""/></div>

<div class="contents" id="bkmrk--0"></div><table border="1" class="align-center" id="bkmrk-1-%E3%82%BA%E3%83%BC%E3%83%A0-%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%91%E3%83%8D%E3%83%AB%E4%B8%8A%E3%81%A7%E3%81%AE%E8%A1%A8%E7%A4%BA%E5%80%8D%E7%8E%87%E3%82%92" style="border-collapse: collapse; width: 800px; border-width: 1px; height: 118.517px;"><colgroup><col style="width: 45px;"></col><col style="width: 177px;"></col><col style="width: 577px;"></col></colgroup><tbody><tr style="height: 29.6833px;"><td style="border-width: 1px; height: 29.6833px;">1</td><td class="align-left" style="border-width: 1px; height: 29.6833px;">Zoom</td><td class="align-left" style="border-width: 1px; height: 29.6833px;">Click on the "**Zoom**" text to reset the State Machine diagram to a **100% zoom factor**.</td></tr><tr style="height: 29.4667px;"><td style="border-width: 1px; height: 29.4667px;">2</td><td class="align-left" style="border-width: 1px; height: 29.4667px;">Zoom Slider</td><td class="align-left" style="border-width: 1px; height: 29.4667px;">Use this **zoom slider** to **adjusts the display magnification** of the diagram.</td></tr><tr style="height: 29.6833px;"><td style="border-width: 1px; height: 29.6833px;">3</td><td class="align-left" style="border-width: 1px; height: 29.6833px;">View whole layout</td><td class="align-left" style="border-width: 1px; height: 29.6833px;">This function **automatically scales the view** so that all elements in the diagram fit within the display area.

</td></tr><tr style="height: 29.6833px;"><td style="border-width: 1px; height: 29.6833px;">4</td><td class="align-left" style="border-width: 1px; height: 29.6833px;">Switch to selected node</td><td class="align-left" style="border-width: 1px; height: 29.6833px;">Centers the view on the currently selected element in the diagram.</td></tr></tbody></table>