Generate diagram using JSON

[SaiSravya]

I want to generate a diagram by giving the json in typescript file. The diagram should automatically generate with the JSON

Below is the json for the attached screenshot. 

[{"shape":{"type":"Basic","shape":"Rectangle","cornerRadius":0},"id":"nodeAeCoEa","width":150,"height":20,"offsetX":291.5,"offsetY":144,"style":{"fill":"#726dd1","strokeColor":"black","strokeWidth":1,"strokeDashArray":"","opacity":1,"gradient":{"type":"None"}},"container":null,"visible":true,"horizontalAlignment":"Left","verticalAlignment":"Top","backgroundColor":"transparent","borderColor":"none","borderWidth":0,"rotateAngle":0,"pivot":{"x":0.5,"y":0.5},"margin":{},"flip":"None","wrapper":{"actualSize":{"width":150,"height":20},"offsetX":291.5,"offsetY":144},"constraints":5240814,"zIndex":0,"annotations":[],"ports":[],"isExpanded":true,"expandIcon":{"shape":"None"},"inEdges":[],"outEdges":[],"parentId":"Ready to Registerv8UVR","processId":"","umlIndex":-1,"isPhase":false,"isLane":false},{"shape":{"type":"Basic","shape":"Rectangle","cornerRadius":0},"id":"nodeBiNM0M","width":150,"height":70,"offsetX":291.5,"offsetY":184,"style":{"fill":"#dbe6eb","strokeColor":"#dbe6eb","strokeWidth":1,"strokeDashArray":"","opacity":1,"gradient":{"type":"None"}},"annotations":[{"id":"BO6vx","content":"Are you ready to register? You can do so right here","style":{"strokeWidth":0,"strokeColor":"transparent","fill":"transparent","fontSize":14,"bold":false,"textWrapping":"WrapWithOverflow","color":"black","whiteSpace":"CollapseSpace","fontFamily":"Arial","italic":false,"opacity":1,"strokeDashArray":"","textAlign":"Center","textOverflow":"Wrap","textDecoration":"None"},"hyperlink":{"link":"","content":"","textDecoration":"None"},"constraints":4,"visibility":true,"rotateAngle":0,"margin":{"right":0,"bottom":0,"left":0,"top":0},"horizontalAlignment":"Center","verticalAlignment":"Center","offset":{"x":0.5,"y":0.5}}],"container":null,"visible":true,"horizontalAlignment":"Left","verticalAlignment":"Top","backgroundColor":"transparent","borderColor":"none","borderWidth":0,"rotateAngle":0,"pivot":{"x":0.5,"y":0.5},"margin":{},"flip":"None","wrapper":{"actualSize":{"width":150,"height":70},"offsetX":291.5,"offsetY":184},"constraints":5240814,"zIndex":1,"ports":[],"isExpanded":true,"expandIcon":{"shape":"None"},"inEdges":[],"outEdges":[],"parentId":"Ready to Registerv8UVR","processId":"","umlIndex":-1,"isPhase":false,"isLane":false},{"children":["nodeAeCoEa","nodeBiNM0M"],"shape":{"type":"Basic","shape":"Rectangle"},"id":"Ready to Registerv8UVR","container":null,"offsetX":291.5,"offsetY":176.5,"visible":true,"horizontalAlignment":"Left","verticalAlignment":"Top","backgroundColor":"transparent","borderColor":"none","borderWidth":0,"rotateAngle":0,"pivot":{"x":0.5,"y":0.5},"margin":{"right":0,"bottom":0,"left":0,"top":0},"flip":"None","wrapper":{"actualSize":{"width":150,"height":85},"offsetX":291.5,"offsetY":176.5},"style":{"fill":"white","strokeWidth":1,"strokeColor":"transparent","strokeDashArray":"","opacity":1,"gradient":{"type":"None"}},"width":150,"height":85,"zIndex":2,"annotations":[],"ports":[],"isExpanded":true,"expandIcon":{"shape":"None"},"constraints":5240814,"inEdges":[],"outEdges":[],"parentId":"","processId":"","umlIndex":-1,"isPhase":false,"isLane":false}]

Attachment: Screenshot_from_20200120_102237_b2482ebd.zip

[Shyam G]

Hi SaiSravya, 

By analyzing your JSON, we found that you have set a fill as white for the group node. So only, we could not see the children node content. We have changed the group node fill as transparent to resolve your issue. We have highlighted the changes in the below screenshot and refer to the below sample for further reference. Also, if you need to load a JSON at runtime, please click on save button to download the diagram as JSON and load the same using the load button from the below sample. 

Sample: https://stackblitz.com/edit/gr9bwr?file=index.ts 

Screenshot: 

 

Regards, 

Shyam G 

[SaiSravya]

Could you please share the HTML file.

My use case is like

1) The user creates a diagram and clicks on submit.

2) It will get stored as a JSON in database

3) On a click of load option , a JSON is sent by backend. Using that i need to generate the diagram

Please do share the html file

[Shyam G]

Hi SaiSravya, 

In the previous update, we have shared a stackblitz sample which contains both index.html file and the index.ts file.  

Regards, 

Shyam G 

[SaiSravya]

There is some error which is stopping me to run

Attachment: Screenshot_from_20200121_135849_1751c644.zip

[SaiSravya]

Am attaching the component where i used your syncfusion package. I need to bring up this use case in this component

Could you please help me on this.

If i replicate the same which you shared i am having some issues. I have shared the error in my previous reply

Please share the same use case in my component

Attachment: flowdiagram_477738e.zip

[Shyam G]

Hi SaiSravya, 

Sorry for the inconvenience.  

In your screenshot JSON, we have seen the node actualsize property, which is not required while initializing the diagram. However, we have removed it from our stackblitz sample and provided a modified sample below. 

Sample: https://stackblitz.com/edit/gr9bwr-iiqckx?file=index.ts 

• Also, you need to save the JSON in the database and to retrieve the same and load the diagram.
• In the above sample, when you click on save button, the diagram json file gets downloaded and you can load the same by clicking on the load button. We have used Syncfusion uploader control to save and load the diagram.
• Similarly, the diagram saveDiagram method returns the JSON and you can save it into the database and you can retrieve the JSON and load it using loadDiagram method. Please refer to a code example below.

Code example: 

//get the saved json and save it into the database 

let jsonOutput = this.diagram.saveDiagram(); 

//retrieve the json from the database and load it with loadDiagram method 

this.diagram.loadDiagram(yourjson); 

Regards, 

Shyam G