Create FSM with events using the diagram control

[Anthony]

Hello:

I've never used Syncfusion before. I'm in the process of doing research to find an Angular diagramming library that will allow me to create diagrams of FSMs (Finite State Machines) with events. I've attached a screenshot that shows something that's similar to what I'm trying to do.

In the attached screenshot, each node represents a state in the FSM. The name of the state is at the top of the node in the dark grey area. The events that can be generated in each state are represented in the light gray parts of the nodes. The connectors indicate which state the FSM transitions to when an event is fired in the current state. So connectors can only start at a specific event (light grey area) and connect to the name of the next state (dark grey area).

I reviewed the Angular diagram documentation but didn't see anything that would help me create nodes of the type I require. I would appreciate any assistance in pointing me in the right direction so I can create a proof of concept to help me determine if this is the right library for the job.

Thank you.

Attachment: PlayMaker_b5f90933.7z

[Gowtham Gunashekar]

Hi Anthony, 

 

We are validating your requirement and update the further details in two business days (May 26, 2021). We appreciate your patience until then.  

   

Regards, 

Gowtham 

[Gowtham Gunashekar]

Hi Anthony, 

 

On the further analysis of the shred details, we suggest you use the group node and Bezier connector to achieve your requirement. We have created an alike sample of the shared image with group nodes and connector and added below for you references. We have added the documentation for group node and connector.  

  

 

Sample link: https://stackblitz.com/edit/angular-7b68xp-orhtb9 

 

Documentation for group nodes: https://ej2.syncfusion.com/angular/documentation/diagram/group/#create-group 

Documentation for connector: https://ej2.syncfusion.com/angular/documentation/diagram/connectors/ 

 

 

Regards,  

Gowtham  

[Anthony]

Thank you Gowntham for providing this information. I will let you know if there are further questions as I evaluate Syncfusion over the coming weeks.

[Gowtham Gunashekar]

Hi Anthony, 

 

Thanks for your update. We will wait to hear from you. 

 

Regards, 

Gowtham