The visual editor
The Diagram tab turns a state machine into a picture you can work with: each state is a box, and each transition is an arrow between boxes, labelled with its action name. It is the fastest way to understand a machine at a glance and to sketch changes.
Moving around
Section titled “Moving around”- Drag a state to reposition it on the canvas. Your layout is saved, so the machine looks the same next time you open it.
- Pan the canvas by dragging an empty area.
- Zoom in and out to fit large machines on screen.
Positions are stored per machine, so arranging one diagram never affects another.
Drawing a transition
Section titled “Drawing a transition”Each state box has small connection ports on its edges. To create a transition:
- Point at a port on the source state and start dragging.
- A line follows your cursor. As you approach a valid target, the target state highlights.
- Release on the target state.
The Add transition form opens with the two states already filled in, so you only need to enter the Action name and save. Dropping onto the same state you started from creates a self-loop, which is allowed.
Toolbar
Section titled “Toolbar”The diagram toolbar gives you:
- Add state — create a new state without leaving the diagram.
- Auto-layout — arrange all states automatically. See Auto-layout.
- Reset layout — clear your manual positions and start again.
- Zoom to fit — scale and center the diagram so the whole machine is visible.
Editing from the diagram
Section titled “Editing from the diagram”The initial state is marked on the canvas so you can always see where the flow begins. To change a state or transition itself, use the States and Transitions tabs — the diagram is for arrangement and for drawing new connections.