Drag & drop

Puedes añadir nodos al diagrama dinámicamente y luego moverlos arrastrando.

Edita el código y pulsa Run▶ Run↺ Reset

Añadir nodos

El panel bajo el diagrama tiene un botón + Añadir nodo. Cada clic crea un nodo con una key única y lo coloca en una posición de grid (sin superponerse).

model.addNodeData({ key: 2, label: 'Nuevo', x: 40, y: 40 });

Keys únicas

Es importante generar keys que no colisionen:

const keys = model.getNodeDataArray().map((d) => d.key ?? 0);
const next = Math.max(0, ...keys) + 1;

Arrastrar

Una vez añadidos, los nodos se mueven con el ratón (DraggingTool) y la posición se guarda en el modelo de forma undoable (Ctrl/Cmd+Z lo deshace).

Drag real desde una palette

Para arrastrar desde una Palette al diagrama, consulta e2e/fixtures/palette.html — el patrón es el mismo, pero el nodo se crea con los datos del template soltado.