Java

Copy to Clipboard

PNG

Copy to Clipboard

JSON

Upload your JSON

JSON

Copy to Clipboard



Tutorial

The Left box above (canvas) is the FSM designer.  Here's how to use it:

Adding States

Action:

Double-click on the canvas

Description

Create a single state and put the cursor in it.

Adding Links

Action:

Shift + Drag on the canvas.

Description

Create an edge starting from the cursor location . If the cursor is on the state, then the link will begin from that state.

Adding States

Move:

Drag states or links over the canvas

Description

Move states/links around the canvas.

Accept State

Action:

Double-click on the created state to make it Accept State or revert back to Normal State

Description

Control the state's status, toggling between accepted and normal states within the FSM.

Delete

Action:

Click on the state/link and press delete (In Mac use fn + backspace )

Description

Remove a state or link .

Clear

Action:

Shift + L on canvas

Description

Remove all states and links .

Change Circle Radius

Action:

Click on the state/link and press Shift + or

Description

Resize the state size.

Change Font Size

Action:

Click on the state/link and press Shift + or

Description

Resize the state font size.

Modify Props

Action:

Click on the small square near the specific field to edit it.

Description

Can be used to add optional properties to the FSM.

Clear

Action:

Shift + L on canvas

Description

Remove all states and links .