The Visualization Tool

A tool that allows you to visualize state machines built in FSM.
Visualize your machine, see the transitions, and check your invariants.

Responsive image
Fig 1: A pda being visualized in the tool.
  1. State Options
    • Add or remove a state.
  2. Alpha Options
    • Add or remove a single letter from the alphabet (Displayed in 13).
    • Add or remove a single letter from the gamma (PDA only).
  3. Start State
    • Add or replace a start state.
  4. End State
    • Add or remove a end state
  5. Add Rules
    • Add a transition rule to the machine (Displayed in 6).
    • Note: The appearance of this section changes based on the machine type. The functionality remains the same.
  6. Rules
    • All machine transition rules are displayed in the bar.
  7. Machine Tape
    • The input that the machine will consume (See figure 2).
    Responsive image
    Fig 2: The input for a machine. The lighter color symbolizes that the input was consumed. The red is added for emphasis.
  8. Tape Input
    • Add or clear the tape. Each input must be separated by a space.
  9. Run
    • Run the machine with the given tape. An empty tape is allowed.
  10. Next and Prev
    • Goes back or forward through the tape and visualizes each transition
  11. Gen Code
    • Generates the FSM code fo the machine currently displayed in the Visualization tool.
    • The input field below Gen Code allows the user to specify the name of the file. The file is always saved in the current directory.
  12. Sigma (alphabet) and Gamma (stack alphabet)
    • The alphabet for the machine
    • For PDA: Gamma is also displayed
  13. Help Button
    • Link to this website.
  14. Color Blind Mode
    • A toggle that enables color blind mode.
  15. Graph View
    • A toggle that displays the graph or control representation of the machine
    • Note: To display graph representation GraphViz must be installed and added as an env variable. How to install.
  16. Final State
    • A final state symbolized by two red circles. There can be multiple final states.
  17. Start State
    • The starting state symbolized by a green circle.
  18. Transition
    • A transition being visualized in the tool.
    • A gray dotted line denoted the previous state the machine was in.
    • A black arrow symbolizes the state the machine is currently in
    • A green arrow symbolizes the state the machine is currently in where the invariant predicate associated with the state is true.
    • A red arrow symbolizes the state the machine is currently in were the invariant predicate associated with the state is false.
    • A yellow arrow symbolizes that the predicate given for the state does not evaluate to true or false.
      • Responsive image
      Fig 3: Possible outputs when visualizing invariants.
  19. Stack (PDA Only)
    • The stack for the current machine

The following functionality is only applicable to tm's and language recognizers

Responsive image
Fig 4: A tm-language-recognizer being visualized in the tool.
  1. Accept State (language recognizer only)
    • The accept state for the machine.
  2. Tape Position
    • To alter to position of the head on the tape.
  3. Accept State (language recognizer only)
    • A accept state symbolized by two red circles surrounded by a blue circle. There can only one accept states.
  4. Tm Tape
    • The tape for a turing machine. The number below each sigma is their position on the tape
    • The current head on the tape is the red highlighted sigma.