FSM Platform - Visual Editor

FSM Editor Guide

What is a Finite State Machine?

A Finite State Machine (FSM) is a computational model that describes how a system behaves in response to events. It consists of:

States: The different conditions or modes your system can be in
Transitions: The changes from one state to another triggered by events
Events: The inputs that cause state transitions
Actions: Operations performed during transitions

How to Use This Editor

1. Add States

Click the state buttons in the sidebar to add different types of states to your canvas.

• Initial State: Starting point (green)
• Normal State: Regular processing state (blue)
• Final State: End state (red)

2. Create Transitions

Click "Add Transition" then click two states to connect them with an arrow.

• Define the event that triggers the transition
• Add conditions if needed
• Specify actions to perform

3. Edit Properties

Select any state or transition to edit its properties in the right panel.

• Change names and descriptions
• Modify state types
• Update event conditions

4. Save & Execute

Use the toolbar buttons to save your FSM and create instances.

• Save your FSM definition
• Create instances to run
• Trigger events to test

Common FSM Patterns

Order Processing

Pending → Confirmed → Shipped → Delivered

Events: confirm, ship, deliver

User Onboarding

Registered → Verified → Profile → Active

Events: verify, complete_profile

Approval Workflow

Submitted → Review → Approved/Rejected

Events: submit, approve, reject

💡 Pro Tips

Start Simple: Begin with 3-4 states and add complexity gradually
Name Clearly: Use descriptive names for states and events
Test Early: Create instances and test your FSM as you build
Handle Errors: Always consider what happens when things go wrong
Document: Add descriptions to explain complex business logic

Need Help?

Learn how to use the FSM Editor

States

Click to add different types of states to your FSM

Transitions

Connect states with transitions triggered by events

💡 Click two states to connect them

Properties

Select an element to edit properties