I am currently developing a custom plugin for diagrams.net. I want to display a diagram as soon as the plugin is loaded without interaction with a user. Functions that manipulate only the graph like mxGraph.insertVertex, mxGraph.createVertex or mxGraph.addCell seem only to show the diagram when they are called within an action function which is tied to an item of a dropdown menu. This is not unexpected, as ultimately the underlying graph model needs to be changed. So, I was very pleased to find a solution to update the model in the documentation of mxGraph: https://jgraph.github.io/mxgraph/docs/js-api/files/model/mxGraphModel-js.html#mxGraphModel.beginUpdate . Unfortunately,it also does not display the diagram. At least there is no error message either.
Here is what I have tried. The plugin is called insert.js.
Draw.loadPlugin(function(ui)
{
var graph = ui.editor.graph;
var parent = ui.editor.graph.getDefaultParent();
var v1 = graph.insertVertex(parent, null, 'text label', 20, 20, 80, 30);
var model = graph.getModel();
var index = model.getChildCount(parent);
model.beginUpdate();
try
{
model.add(parent, v1,index);
}
finally
{
model.endUpdate();
}
});
Even though the vertex (v1) does not show up on the canvas, it is possible to access v1 later in the script.
I have discovered by accident (typo in the function name), that if the function endUpdate() is not executed, the vertex appears on the canvas. The fill color of the vertex is black and is not surrounded by the four blue arrows (hoverIcons). The vertex can be moved only once. It is not possible to add others shapes to the canvas. Other functionalities unrelated to the graph/ graph model like changing the grid size are possible.
What am I missing?