I’m currently doing some research to find the best library I can use to create an Angular based FSM (Finite State Machine) editor for an upcoming project. I’ve reviewed the GoJS documentation and I think GoJS might do the trick but I need some help to tie it all together in my head so I can create a proof of concept.
The editor should allow users to create diagrams similar to this:
In the screenshot above, each state in the FSM is represented by a rectangular node. The name of the state is defined in the dark grey area at the top of the node. The events that can be generated by a particular state is defined in the light grey areas of the node. Each state can have 0 or n events. The connectors represent the transitions in the FSM. A connector can only start at an event (light grey) and end at a state (dark grey) and each event can have 0 or 1 transition. Users should be able to drag an existing transition to a new state without having to delete the transition. Since this will be an editor, users will need to be able create/delete states, events, and transitions.
Can someone please point me to specific areas in the documentation that I can use to fulfill the requirements I’ve described above? Based on what I’ve read, I’m thinking that the states in my FSM can be a group of nodes, stacked vertically. What I’m unsure of being able to dynamically add and remove the events to the stack of nodes.
Thank you for your assistance.