shapes.typeString
(default: "rectangle")
Specifies the type of the Shape using any of the built-in shape type.
rectangle
: this is the default optioncircle
: a circle/ellipseimage
: an imagetext
: some text
Or common workflow shapes as:
Terminator
: Start and end points of the workflow.Process
: Standard processing steps or actions.Decision
: Decision points with Yes/No or True/False branches.Document
: Document creation or data output.PredefinedProcess
: Subroutines or predefined operations.Database
:Database operations or data storage.Delay
:Wait periods or time-based operations.ManualOperation
:Manual tasks requiring human intervention.
Example - customizing shape types
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
layout: "tree",
shapes: [{
id: "1",
content: {
text: "Step 1"
}
}, {
id: "2",
content: {
text: "Step 2"
},
type: "circle"
}, {
id: "3",
type: "image",
source: "https://demos.telerik.com/kendo-ui/html5-dashboard-sample-app/Content/Products/4.jpg"
}],
connections: [{
from: "1",
to: "2"
},{
from: "2",
to: "3"
}],
connectionDefaults: {
endCap: "ArrowEnd"
}
});
</script>
In this article