Automata Designer

Export as: PNG | SVG | LaTeX | JSON

Clear Graph Import JSON File

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

• Add a state: double-click on the canvas
• Add an arrow: shift-drag on the canvas
• Indicate start state: press shift, press left mouse button on an empty place on the canvas, drag to state, release buttons
• Self-loop arrow: press shift, click on state
• Transition arrow: press shift, press left mouse button on current state, drag to next state, release buttons
• Move something: drag it around
• Delete something: click it and press the delete key (not the backspace key)
• Move viewport: click on canvas background and move mouse around

• 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" for lowercase, "\Beta" for uppercase)
• Type right arrow: "\rightarrow"
• Quick type: "\e" + space for lowercase epsilon, "\a" + space for right arrow
• To undo/redo ctrl+z/ctrl+y

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