New to Kendo UI for jQuery? Start a free 30-day trial

Save

methods

Returns the complete Diagram configuration in JSON format.

save

Returns:Object

An options object containing the complete Diagram configuration.

<button id="saveBtn">Save Diagram</button>
<button id="loadBtn">Load Diagram</button>
<div id="diagram"></div>
<script>
  $("#saveBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    localStorage.setItem("diagram", JSON.stringify(diagram.save()));
  });
  $("#loadBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    if(localStorage.getItem("diagram")){
      diagram.load(JSON.parse(localStorage.getItem("diagram")));
    }
  });
  $("#diagram").kendoDiagram({
    layout: {
      type: "layered"
    },
    shapes: [{
      id: "1"
    }, {
      id: "2"
    }, {
      id: "3"
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>