We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Generate diagram using JSON

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

6 Replies

SG Shyam G Syncfusion Team January 21, 2020 05:36 AM UTC

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. 


Shyam G 

SA SaiSravya January 21, 2020 05:47 AM UTC

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

SG Shyam G Syncfusion Team January 21, 2020 06:10 AM UTC

Hi SaiSravya, 

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

Shyam G 

SA SaiSravya January 21, 2020 08:29 AM UTC

There is some error which is stopping me to run

Attachment: Screenshot_from_20200121_135849_1751c644.zip

SA SaiSravya January 21, 2020 10:46 AM UTC

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

SG Shyam G Syncfusion Team January 22, 2020 06:27 AM UTC

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. 

  • 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 

Shyam G 

Live Chat Icon For mobile
Up arrow icon