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

Diagram save into the Database


I am using Syncfusion evaluation version, curently I am evaluating syncfusion diagram. I want to save diagram into the database and also retrive from the database instead of local harddisk. I am highly appreaciting if any one give some sample application.


9 Replies

J. J.Nagarajan Syncfusion Team March 6, 2007 03:01 AM UTC

Hi Abdul,

The diagram can be serialized in XML format using the Diagram.SaveSoap/LoadSoap methods. You can also save and load the diagram in the database. Please refer to the following code snippet

DataTable dt;
private void menuItem2_Click(object sender, System.EventArgs e)
dt = new DataTable();
DataRow row = dt.NewRow();
row["Diagram"] = this.diagram1;

private void menuItem3_Click(object sender, System.EventArgs e)
Syncfusion.Windows.Forms.Diagram.Controls.Diagram d1= dt.Rows[0]["Diagram"] as Syncfusion.Windows.Forms.Diagram.Controls.Diagram ;


I have attached the sample for your reference. In this sample when you click on the DataTable->SetData, you can create a DataTable and DataRows. When you click on the DataTable->GetData then you can load the diagram and it will display in Diagram2.

I hope this will meet your requirement. Please do the following to run the sample

1.Execute the sample
2.Click DataTable->SetData to create the DataTable
3. Click DataTable->GetData to save and load the Diagram

You can Download this sample from the following page.


Please refer to this sample and let me know if you have any questions.

Thanks for using Syncfusion product.


SA sam March 30, 2016 05:36 AM UTC


I'm using syncfusion diagram web control to make BPM for my application, How can I pass the diagram web control value(BPM Image) to server side


SG Shyam G Syncfusion Team March 31, 2016 10:47 AM UTC

Hi Sambath,

Please confirm us whether you need to set the Bitmap image in diagram background in the server side or you need to create a BPMN node in the server side.  


Shyam G 

ME Megatron April 11, 2016 04:45 AM UTC

Hi I have same need for ASP MVC

SG Shyam G Syncfusion Team April 12, 2016 11:13 AM UTC

Hi Megatron,

As mentioned in our previous update, please confirm us whether you need to set the Bitmap image in diagram background in the server side or you need to create a BPMN node in the server side.

Shyam G

ME Megatron April 12, 2016 02:01 PM UTC

Hi, I am talking about nodes and the directional business process flows.
How can I parse and detect an disconnected/open node.


ME Megatron April 12, 2016 02:10 PM UTC

I want to save both the diagram, and an image, so that I can show the user a picture before he opens the diagram.

Before I send to server for save, I want to check for errors like disconnected/orphaned nodes before I save the images.

If there are errors I want to prompt the user with the list of error and pertinent node information (Text) and ask to proceed/continue and save or cancel and fix.


SG Shyam G Syncfusion Team April 13, 2016 11:59 AM UTC

Hi Megatron,

We have created a simple flow sample to achieve your requirement. Also before sending the JSON data to server, you can use node’s inEdges and outEdges property to get the connections(connected/disconnected nodes) which is coming in/out of the nodes. Also you can use exportDiagram API method to export the diagram as an image. Please refer to the below code example.

Code example:

  function save() {        

        var diagram = $("#diagram1").ejDiagram("instance");

        var saving = diagram.save();

        for (i = 0; i < saving.nodes.length; i++) {

            var node = saving.nodes[i];

            //iterate the node inEdges

            for (j = 0; j < node.inEdges.length; j++) {


            //iterate the node outEdges

            for (k = 0; k < node.outEdges.length; k++) {



  //to get an image URL

  var image = exportDiagram();

  function exportDiagram() {

        var diagram = $("#diagram1").ejDiagram("instance");

        var options = {

            fileName: "diagram",

            //Specifies whether to export as files/data

            mode: "data"


        var dataURL = diagram.exportDiagram(options);

        return dataURL;

Shyam G

SG Shyam G Syncfusion Team April 13, 2016 12:17 PM UTC

Hi Megatron,

You can refer the below help documentation link to know more about exporting the diagram.

Help documentation:http://help.syncfusion.com/js/diagram/exporting

Shyam G

Live Chat Icon For mobile
Up arrow icon