Finite State Machine Designer

Export as: PNG | SVG | LaTeX Clear canvas

The big white box above is the FSM designer.  Here's how to use it:

• Add a state: double-click on the canvas
• Add an arrow: shift-drag on the canvas
• Add a start arrow: shift-drag outside of a state
• Add an self-linking arrow: shift-click on state or shitf-drag back to state
• Create a curved arrow: shift-click and drag existing arrow
• Move something: drag it around
• Label something: click on a state or arrow
• Delete something: click it and press the delete key OR press shift-backspace
  • Mac users can also delete using fn-backspace

• Make accept state: double-click on an existing state
• Type numeric subscript: put an underscore before the number (like "S_0")
• Type greek letter: put a backslash before it (like "\beta")

This was made in HTML5 and JavaScript using the canvas element.