Quickstart Guide

Setup

• Launch Application:

  Navigate directly to app.logiop.com, or visit the Logiop Studio product website and click Launch Studio. This loads the application and displays the Onboarding UI. Accept the terms, EULA, and privacy policy, then click Continue to open the Sign In panel.

• Sign In:

  If you are a returning user setting up on a new browser or device, select Returning User at the top of the panel; otherwise, leave New User selected. New users automatically receive a 30-day free trial, while returning users retrieve their existing license. Sign in using your preferred provider (returning users must use their original registered account). Once authenticated, you will proceed to the Workspace setup step.

• Select a Workspace folder:

  Choose a local directory via the File System Access API to permanently store all Workspace files, keeping your work safe even if the app is uninstalled or browser site data is cleared. Returning users can reselect their existing Workspace folder. Upon selection:
  • Your browser will prompt for read and write permissions for the selected folder.
  • After granting access, Studio verifies folder accessibility and provisions your license from our cloud servers.

• Go to Dashboard:

  Once setup is complete, click Go to Dashboard to enter your Workspace and begin managing or creating Projects in the Dashboard.

Create a New Project

The Workspace structural hierarchy is as follows:

To create a project, click Create a new project in the Dashboard → Workspace section. In the Create a new project window, select Create in a new Solution, enter a Solution name and a Project name, then press Enter or click Create at the bottom.

This creates the new Solution and Project along with a root State Machine defaulted to 'Machine1'. To rename the machine, select it in the Project Explorer tree inside the right sidebar panel, then edit its name in the Properties panel below.

Add Vertices

Select a Vertex stencil from the Stencil Toolbar and click anywhere on the Canvas to place it. Vertices can be freely moved or resized, multi-selected (using Ctrl or the Rubberband Selector), or dragged beyond Canvas boundaries to automatically expand the Canvas.

To rename a Vertex, select it and edit its name in the Properties panel.

Draw Transitions

• Create a New Transition:

  Select the Transition stencil from the Stencil Toolbar. Click and drag from the edge of the source Vertex to an edge on the target Vertex, then release to anchor the target connector. Transitions use an automatic best-fit routing algorithm, ensuring paths re-route smoothly when connected Vertices are moved.

  To rename a Transition, select it and edit its name in the Properties panel.

• Change Transition Connectors:

  To reconnect an existing Transition, click and drag its connector handle from its current edge to any desired Vertex edge, then release.

Manage Composite States

• Make a State composite:

  Convert a simple State into a composite State by adding one or more orthogonal Regions. Right-click the State and select New Region from the context menu.

• Add Vertices to a Region:

  Select a Vertex stencil from the Stencil Toolbar and click inside the target Region. Vertices can be freely moved and resized within their parent Region; the entire parent hierarchy (including the top-level Canvas) automatically expands to accommodate descendant layout changes.

• Change Region Priority:

  Orthogonal Regions execute top-to-bottom based on visual order. You can adjust a Region's execution priority using the Properties panel.

• Multi-Select Vertices in a Region:

  To select multiple Vertices within a Region, hold Ctrl while clicking individual elements, or hold Shift while dragging the Rubberband Selector.

• Reparenting Vertices:

  Select the Vertices, drag them over the target Region or the Canvas, and hold Alt before releasing to drop them inside.

• Add Entry or Exit Points:

  Select an Entry Point or Exit Point stencil from the Stencil Toolbar and click on a composite State. These Connection Points automatically anchor to the outer boundaries of their parent State, and cannot be reparented to a different State.

Manage Submachines

A State Machine can contain multiple Submachines, which are ideal for encapsulating reusable logic or decluttering your main Canvas. A Submachine is referenced on a Canvas using a Submachine State. A Submachine can reference other Submachines within the same root State Machine, excluding itself.

• Create a Submachine:

  Right-click the State Machine node in the Project Explorer and select New Submachine. A Submachine Canvas always initializes with a top-level composite State. All child elements must be placed inside this State, as elements cannot be added directly to the root Canvas of a Submachine.

• Reference a Submachine:

  Drag the Submachine State stencil from the Stencil Toolbar onto the parent Canvas to open the Select a Submachine window. You can select an existing Submachine or create and reference a new one directly from this window.

• Connection Point References:

  Connect main execution flows directly to the edges of the Submachine State. For alternate flows, map them using Connection Point References. First, add the Connection Points to the Submachine’s top-level composite State. Next, right-click the referencing Submachine State, open its context menu, and select the available Connection Points you need. To preserve referential integrity, an added Connection Point Reference remains hidden from the context menu until it is deleted from the Submachine State.

Manage Behaviors

Behaviors are stored at the root State Machine level and referenced across elements. This maintains a single source of truth across all States, Transitions, and Submachines for maximum reusability. Edits made to a Behavior automatically propagate to all of its references.

Behaviors are categorized into four distinct types:

• Events:

  Utilized exclusively by Transitions to trigger state changes.

• Actions:

  Applied to a State’s Entry and Exit Behaviors, or used as a Transition’s Effect Behavior.

• DoActivity Actions:

  Reserved exclusively for a State’s ongoing DoActivity Behavior.

• Guards:

  Used solely to define Transition Guard conditions.

You can manage Behaviors from two primary locations:

Internal Transitions and Deferred Events

Internal Transitions allow a State to process Events without triggering its Entry or Exit Behaviors.

• Create an Internal Transition:

  Right-click the State and select New Internal Transition. This opens the Element Behaviors window to attach relevant Events, Guards, and Effect Behaviors.

• Configure Deferred Events:

  To defer Events for a State, create an Internal Transition, add the target Events, and check the Defer checkbox on the toolbar. You can also defer Events on an existing Internal Transition, but doing so clears any previously assigned Guards or Effect Behaviors. Learn more about Deferred Events.

Clipboard and Cloning

• Clipboard Operations:

  Cut, copy, and paste elements across any State Region, State Machine, or Submachine within your active Project. Pasting into a different State Machine automatically merges copied Behaviors into the target State Machine’s Behavior repository.

• Deep Clone Machines and Submachines:

  Duplicate entire State Machine trees or individual Submachines instantly. Right-click the node in the Project Explorer tree and select Duplicate from the context menu.

History and Undo/Redo

Export State Machines

To export your State Machine diagrams, click the Export button on the Main Toolbar and select a target format:

• JSON:

  Exports the full State Machine model graph—including elements, Submachines, and Behaviors—structured to JSON according to the official Logiop Schema. Ideal for custom execution runtimes or automated verification tools.

• SVG:

  Exports vector graphic images of your active Canvas diagram to SVG preserved with exact visual styling, perfect for documentation and design reviews.