About Me

"When I was a student, I never truly appreciated sequential circuits since we only relied on static images and hand-drawn diagrams. We never had the tools to properly interpret flip-flops and state diagrams; we only drew diagrams and wrote tables without fully visualizing what they meant. It's time to let the students clearly see what I never got to see. - Adel"

Conceptualized by Adelson Chua and developed by Isaac Sy.

Development is ongoing, feedback is appreciated!

Dedicated to the crazy ones, the ones who see things differently.

From EEEI, UP Diliman for EEE 143 students

How to Use the FSM Simulator

The simulator is easiest to use on desktop. The layout is divided into a left control panel, a central canvas, a right analysis panel, and a bottom excitation-analysis panel.

• Quick Navigation
  • Drag states around the grid
  • Click a state to edit transitions
  • Drag curve handles to reroute arrows
  • Drag arrow heads to change target state
  • Left-click drag on canvas to pan
• Legend
  • Blue ring = active state
  • Blue arrow = chosen transition
  • Orange ring = state being edited
  • Orange arrow = transition being edited
  • Dots = curve handles
• Top bar
  • File: save, load, or manage your current FSM design.
  • View: show or hide panels and switch between light and dark mode.
  • About: opens project information and credits.
  • Help: opens this guide.
  • + Input Bit / - Input Bit: add or remove input variables used by transitions.
  • + Output Bit / - Output Bit: add or remove output variables used by states.
  • All Moore: toggles whether states behave as Moore-style output states.
  • Step 0: shows the current simulation step count.
  • Reset: returns the simulation to its initial condition and clears the current run state.
  • Step: advances the FSM by one input evaluation.
  • Run: runs the simulation continuously.
• Left panel: quick actions and editor
  • Add Moore State: drag this onto the canvas to create a Moore state.
  • Add Mealy State: drag this onto the canvas to create a Mealy state.
  • Force Layout: automatically repositions states to keep the graph organized.
  • Simplify Arrows: merges or tidies overlapping transition arrows when possible.
  • State editor: click a state on the canvas to edit its name, outputs, and transitions here.
• Center canvas
  • Drag states to reposition them on the grid.
  • Click a state to select it and open its editor.
  • Drag the curve handle at the middle of a transition to reshape its path.
  • Drag an arrow head to retarget the transition to another state.
  • Left-click and drag on empty canvas space to pan around the diagram.
• Top-right input and output boxes
  • Inputs: click each input bit to toggle between 0 and 1 before stepping or running the machine.
  • Outputs: shows the current output bits of the active state or transition behavior.
• Right panel
  • VARS: displays the current values of input bits, state bits, and related variables.
  • TABLE: shows the state transition table for the current FSM.
  • SYNTHESIZE in the table view: opens the bottom panel with the excitation table and Karnaugh map analysis.
  • LOG: records simulation events step by step.
• Bottom excitation-analysis panel
  • Excitation Table + KMap: shows flip-flop input requirements and simplified expressions.
  • One-Hot Encoding: shows a one-hot encoded version of the state transition table.
  • Flip-Flop Reference: displays the reference excitation tables for supported flip-flop types.
  • Close: hides the bottom analysis panel.