Graph / Finite State Machine Designer

Export as: JSON | PNG | SVG | LaTeX | Import from: JSON

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
• Move something: drag it around
• Delete something: click it and press the delete key (not the backspace key)

• 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 also includes functionality used for simulating chip-firing games. When in chip firing mode, the following happen:

• Adding or deleting vertices or edges is disabled
• Clicking a vertex "fires" that vertex, giving away 1 chip from that vertex to each vertex it connects to
• Shift clicking undoes the "firing" of that vertex
• Empty vertices are treated as having zero chips on them
• An edge with a numerical label indicates the "weight" of the edge, causing that many chips to be fired along that edge instead of only one

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