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.
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...