This project is a simple Finite State Designer that allows you to create, edit and visualize finite state machines. It is built using Javascript and HTML Canvas. You can try the live version here.
I created this project to enhance my javascript canvas and gain some experience with simple trigonometry, as it involves some basic trigonometry calculations. If you find any bugs or you want to add some features, feel free to open an issue or a pull request.
- Create a new state by double-clicking on the blank space
- Move the state by dragging it to the desired location
- Change the state to accept state by double-clicking on the state
- Create an arrow by holding the shift key and dragging from the current state to the target state
- Delete the object (state or arrow) by selected on them and pressing the delete key
- Export the design to a PNG file by pressing the export button
- Save the design to the local storage
- Load the design from the local storage
- Create an arrow from any space in the canvas
This project is highly inspired by Evan Wallace from one of his repo's