Kendo Diagram will not Displying untill we press f12/inspect

I have a div in html file as.

<div id="center-pane" class="col-sm-10">
<div>
<div id="d1" style="height: 400px;">
div>
div>
div>

from this html i am calling a function which have a js code to bind the kendo diagram with div 'd1'.

Here is my js code.

diagram = $("#d1").kendoDiagram({
dataSource: {
data: [{
items: [{}, {}]
}],
schema: {
model: {
children: "items"
}
}
},
shapeDefaults: {
width: 80,
height: 80,
type: "image",
source: "https://demos.telerik.com/kendo-ui/html5-dashboard-sample-app/Content/Products/4.jpg",
content: {
text: "shape",
},
},
layout: {
type: "tree"
},
connectionDefaults: {
content: {
color: "green",
fontFamily: "Segoe UI",
fontSize: 16,
fontStyle: "italic",
fontWeight: 200,
template: "#: dataItem.label #"
}
},
}).getKendoDiagram();

I will call the js function which consist of code to bind diagram with div tag, it will get called and after execution the disgram will not appear, to see the diagram I have to press the F12 button or have to zoom-in/zoom-out the browser page.

What i found that the diagram is getting bind to that div tag but that entire div tag is not displaying, sibling of d1 tag will be visible.

var somevar = $("#d1").html();
alert(somevar);

The above alert box will display the diagram content even though if i will not press the F12 button, it means that the diagram is getting bind to that div but div is not appearing. If i remove the code for binding diagram and call the function then whatever the contents are there in that div are visible if and only if i will comment that code for binding diagram.

Thank You.