🎡

FSM Designer Help

To the left is the FSM designer. Here's how to use it:

Add a state: double-click on the canvas
Add a transition: shift-drag on the canvas
- You may shift-drag starting from any point on the canvas, but you most likely want to shift-drag from a state.
- For regular transitions, use a / (forward slash) to separate transition conditions from outputs on the edge.
- Multiple outputs on the edge can be marked by separating the outputs by a comma.
- To indicate the reset state, draw a transition from empty space to the reset state.
Move something (edge (not its label) or state): drag it around
Edit something (edge/label or state): click on it
Stop editing something: press return/enter (commits changes) or escape (cancels changes)
Delete something: click it and press the delete key (not the backspace key) or command+d on macOS
Move viewport: click on canvas background and move mouse around
Zoom in/out: scroll up/down while the mouse is over top of the canvas
To undo/redo: Press ctrl+z/ctrl+y (command+z/command+y also work for macOS users)

Interface

Along the top, there are a series of buttons. In order of left to right, this is what each one does:

: Load a previously saved JSON file from your computer into the editor.
: Save the current project in local storage in your browser. If you clear cookies or use a different browser, etc., you will lose your data. The editor will occasionally autosave (updating the tool tip of the icon when doing so), but if you are worried, you might want to save things sometimes, too. Saving does not overwrite the undo stack in the editor.
: Save the current project onto your local computer. This file can then be opened on another computer or shared with others. It is recommended to download your project before closing out your browser, in case something happens to your user data.
: Build the FSM design into SystemVerilog code. Be sure to visit the settings panel first to ensure that everything is configured correctly. Clicking this button will also switch to displaying the output log.
: Display the property inspector panel, where you can modify the properties of states and transitions in the FSM diagram.
: Display output of the scripts run to convert the FSM into SystemVerilog code. The top box is for log messages (e.g. warnings), and the bottom box is for the output SystemVerilog code.
: Display the configuration panel for the SystemVerilog conversion process. This is where you set up the width of input and output signals, clock name, and other important information that cannot be immediately inferred from the FSM diagram.
: Display this panel of helpful information!

To trigger the behaviours specified above, you can either click the icon or use the keybindings described below:
All CTRL keybindings can also be used with the Meta (Command key on macOS) key.

: Import saved JSON project file: CTRL+O
: Save in browser: CTRL+S
: Download JSON project file: CTRL+SHIFT+S
: Build project: CTRL+B
: Toggle show/hide output log: CTRL+L
: Toggle show/hide preferences: CTRL+P
: Toggle show/hide help menu: F1

Verilog conversion help

Important notes: Active low signals are not supported in the input.

Usage: Configure all of the settings in the panel. Each setting has accompanying explanation text. Once done, click the Build button at the bottom of the settings panel or the in the menu bar, or press control/command+B to trigger a build.

Thanks and Attributions

Evan Wallace for the creation of the original FSM designer component
Fauzi Kliman for making significant quality of life improvements over the original version of the designer
Daniel Bruce / Entypo for the icons used on this page

Display settings

These settings are used to configure how the FSM is displayed in the editor. They are saved along with the FSM data.

Nodes Node side: {{ nodesize }}

Build settings

These settings are used to configure the SystemVerilog generation process. They are saved along with the FSM data.

Clock and reset These settings are used to generate the flip-flop that stores the FSM state.

Clock name:
Clock edge to flop on:
Reset signal name:
Edge to reset on:

Input signals These settings are used to generate the module header. All signals are inferred to be logic type.

Input {{index}} Name:
Width:

Output signals These settings are used to validate the FSM outputs described in the diagram, as well as to generate the module header. If there is an output in the diagram but not in this list, an error will be produced.

Input {{index}} Name:
Width:

Inverted?

Default value

Miscellaneous These are some miscellaneous settings that may be helpful to expose.

Output format:
Name of variable used to store current state:
Name of variable used to store next state:

Output Log

Output Result

Property inspector{{ editingItem.valid ? (editingItem.type == 'node' ? ': state' : ': transition') : '' }}

Press enter while focused in a text box or the commit button to commit changes. Press escape anywhere, the cancel button, or click any other item in the FSM to cancel changes. Changes will not update the FSM until they are committed.

Name:

Transition condition:

Outputs

Output {{index}}:

Warnings

{{ warning.message }}

Select an item in the FSM diagram to edit by clicking on it.