Hello:
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.
There are several samples that demonstrate diagrams that describe or implement finite state machines, The primary one is State Chart:
You’ll note that the user can:
- create new nodes or delete them
- edit the text of nodes
- draw new links (“transitions”) or delete them
- edit the text of links
- reconnect an end of a link to connect with a different node
- reshape the path of the link
Many of our sample editors also demonstrate saving and loading the model as JSON-formatted text, where you can see (and edit) the text right there on the page.
There are variations that also demonstrate various extensions:
Then there are slightly different ones such as Concept Map:
And one that shows animation of tokens going along transition paths:
Also relevant are samples that demonstrate the execution of a system, like Logic Circuit:
For the details about what nodes look like, consider:
You don’t talk about whether users can select individual events, but if so:
When I get a few free minutes I can create a sample for you.
Here you go: Playmaker Editor
It took me about an hour to create this from scratch.
Lots more work will be needed to have it know about particular kinds of states and events, to hook it up to the actual running system in order to monitor it and control its behavior, and to improve some of the styling.
Wow…this is really impressive. Thank you for taking the time to throw this together so quickly and for all of the links you’ve provided. It will definitely speed up my GoJS evaluation by several days! I think you’ve provided more than enough for me to throw something together myself and given how quickly you were able to throw something together based on my specs, I’m very impressed but I’ll get a better feel once I do it myself.
Thanks again.
Just as an FYI, I finally heard back from Syncfusion, who were also working on putting together a sample based on my specs. It took them a few days but they finally sent me a Stackblitz: Angular 7b68xp (forked) - StackBlitz
I’ll be evaluating both solutions over the coming weeks.
Thanks,
Anthony
Interesting, thanks for the link.
Angular apps sure are verbose and have lots of dependencies.
Earlier I didn’t address making an Angular app. It’s not a big deal, but it is more complicated. You might want to use what is discussed at GoJS and Angular -- Northwoods Software, although we’re about to release a new version of our Angular components that assume immutable data, much as our React components do.
Are you saying that the diagram won’t update when the model changes?
I’m not tied to Angular, it’s just the starting point for my research. If a better path presents itself during my research, that’s the way I’ll go.
No, using immutable data just means more copying of data when communicating between components. GoJS continues to mutate data – our design always had an eye towards efficiency. Our React components copy the incoming data so that GoJS can modify it (if the app supports diagram modification) and then notify the app about the changes, which again copy the (changed) data so that the app and other components can treat them as immutable.
For smaller apps, I don’t think any framework is needed. But as they get more complex, I can see how they become useful. These days React is more popular than Angular. Still, basically all of our samples are framework-independent. We couldn’t afford to create N different copies, one for each framework, of each of our 500 or so samples, and then have to maintain them with the constant churn.
