https://www.josephkiriacos.site/fsm-builder
A simple and concise tool that allows for creating and testing finite state machines. Created with typescript, css, and html in React. Utilizes the Canvas element for the visuals and normal html for everything else.
- Double click to create a new node.
- Ctrl+click to create a new transition.
- Drag a transition midpoint to change the curve.
- While a transition or node is selected, type to change its label.
- Press delete to delete a node or transition.
- Double an existing node to toggle if it is final.
This was my first attempt at creating a webapp and my first time utilizing React. There was a bit of a steep learning curve to this, as I kind of was learning as I went. The visuals of the site definitely won't win any awards, but it functions well enough and the actual graph creating looks quite nice in my opinion. Overall, this was a fun project to make and a great exercise so I'm happy with it.
MIT License and all that, knock yourself out doing whatever to the code.