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, or choose it in Edit state, to edit transitions. You can also Tab to a state and press Enter.
  • 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: open diagram tools and appearance settings:
    • Sidebars: show or hide the editing and analysis sidebars.
    • Fit Diagram: fit all states and arrows in the canvas. Manual pan, zoom, or dragging leaves automatic fitting.
    • Force Layout: automatically reposition states. A check mark means it is enabled.
    • Simplify Arrows: combine transitions with the same destination and output into one labeled arrow. A check mark means it is enabled.
    • Toggle theme: switch between light and dark mode.
  • About: opens project information and credits.
  • Help: opens this guide.
  • Step 0: shows the current simulation step count.
  • Reset: returns the simulation to its initial condition and clears the current run state.
  • Back: pause execution and restore the previous clock step, including its inputs, outputs, and log. Up to 300 steps are available in the current session. Reset, loading, Undo, setting the current state manually, or changing FSM logic clears this history. Layout and input toggles retain it. Back is disabled when there is no previous step.
  • Step: advance the FSM by one clock step using the current inputs.
  • Run: runs continuously. Focusing a name, transition, or synthesis flip-flop field pauses execution; live input-bit buttons can still be toggled while running.
  • Ctrl/Cmd+S: exports the current workspace. Browser-local autosave runs quietly; save failures or recovery warnings appear below the toolbar.
  • Recovery: if saved work cannot be restored, autosave pauses. Download recovery data or retain a browser recovery copy before enabling autosave.
• Left panel: quick actions and editor
  • Add Moore State: drag onto the canvas, or activate the button with click/Enter/Space to add a state in view.
  • Add Mealy State: drag onto the canvas, or activate the button with click/Enter/Space.
  • All Moore / All Mealy / Mixed: the switch below the state-creation circles converts all states to Moore or Mealy behavior. Mixed indicates the FSM contains both types; ambiguous Mealy-to-Moore output choices require confirmation.
  • Set Initial: designates the state used by Reset. Synthesis shows the register initialization values.
  • State editor: click a state on the canvas to edit its name, outputs, and transitions here.
• Website embedding: save the design to JSON, then run python build_embed.py your_fsm.json. The generated page starts at the initial state with the saved inputs, offers Reset / Back / Step, input toggles, a theme button and analysis, and keeps the design fixed. It does not use browser autosave. Use --no-synth to omit synthesis. In an embed, Space steps, Shift+Space goes back, and R resets when a control is not focused.
• Center canvas
  • Drag states to reposition them on the grid.
  • Click a state to select it and open its editor. Choosing “Choose a state” in the state picker clears that selection.
  • Drag a transition’s curvature handle to reshape its path. Handles stay in front of state circles, so an overlapping handle receives the click.
  • The transition selected by the current input has a bold blue label, including when arrows are simplified. This distinguishes the active label from other outgoing transitions.
  • Drag an arrow head to retarget the transition to another state.
  • Left-click and drag on empty canvas space to pan around the diagram. State and curve coordinates are bounded to ±1,000,000; the camera origin is bounded to ±100,000,000 so saved designs remain reloadable, even at extreme zoom.
• Top-right input and output boxes
  • Inputs: use the + / − buttons in this floating panel to add or remove input variables. Click each input bit, or focus it and press Space/Enter, to toggle between 0 and 1 before stepping or while Run continues. Focus stays on that bit for repeated toggles. Wheel scrolling over these panels scrolls their contents instead of zooming the canvas.
  • Outputs: shows the current output bits of the active state or transition behavior. Its + / − buttons add or remove output variables. Removing an input or output first previews the named bit and the entries/values that will be discarded; Cancel preserves the design, and Undo can restore an accepted removal.
• 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 right sidebar: opens the bottom panel with the excitation table and Karnaugh map analysis.
  • LOG: records clock events, distinguishing the traversed Mealy transition output (or pre-clock Moore output) from the post-clock output.
• Bottom excitation-analysis panel
  • Excitation Table + KMap: shows flip-flop input requirements and simplified expressions. Colored bounding outlines enclose each group using the legend’s colors. Their dimensions follow the cells in the group. Overlapping groups use offset outlines. Groups wrapping across opposite edges or spanning five-/six-variable submaps appear as separate outlined portions with the same group color; hover a cell to see its group numbers. Hover or focus a legend button to emphasize a group; click or press Enter/Space to pin it, and activate it again to show all groups. Groups are scoped to their own map; pins clear when the analysis is rebuilt. A constant-one function outlines the entire map.
  • 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.

Ambiguous Moore Conversion

The highlighted states have transitions with conflicting output values. Moore mode requires one output per state — converting will use the first transition's output for each.