Creating flow diagrams using Kendo Diagram

Adding workflow diagrams or hierarchical structure to a web page is now made easy with the introduction of diagrams in the Kendo UI library. In this recipe, we will build a flowchart diagram by creating shapes and then we will connect those with connectors. The library also provides a set of layouts that can be used to represent a hierarchical or tree-like structure.

How to do it…

A flowchart is used to represent steps in an algorithm; these steps are shown as shapes (rectangles and circles). The connectors are then used to connect the shapes and describe the flow. A diagram in Kendo UI is created by invoking the kendoDiagram function on the selected DOM node:

var diagram = $("#chart").kendoDiagram({

  connectionDefaults: {
    stroke: {
      color: '#F00'
    },
    startCap: 'FilledCircle',
    endCap: 'ArrowEnd',
  }
  
}).getKendoDiagram();

In the preceding code snippet, an empty diagram is created, with some default attributes for connections...