Load a diagram : not all nodes are displayed

Hi,

I have a diagram which is saved in database using :

diagram.saveDiagram()

When I load the diagram, here is what I get:


instead of 


I can get back the nodes by clicking on their position! I use

diagram.loadDiagram(diagramToLoad);

I tried without success to add:

this.diagram.refreshDiagram();

or 

this.diagram.refresh();

Here is the diagram string of the diagram

"{""getNodeDefaults"":""brainstormNodeDefaults"",""serializationSettings"":{""preventDefaults"":true},""scrollSettings"":{""viewPortWidth"":1465,""viewPortHeight"":665.6000366210938,""currentZoom"":0.6626480480313173,""horizontalOffset"":178.79,""verticalOffset"":-22.399999618530273},""contextMenuSettings"":{""show"":true,""showCustomMenuOnly"":true,""items"":[{""text"":""Supprimer"",""id"":""Delete"",""iconCss"":""bi-node-minus""},{""text"":""Convertir en objectif"",""id"":""ConvertO"",""iconCss"":""bi-arrow-right""},{""text"":""Convertir en résultat clé"",""id"":""ConvertKR"",""iconCss"":""bi-arrow-right""},{""text"":""Convertir en initiative"",""id"":""ConvertI"",""iconCss"":""bi-arrow-right""},{""text"":""Convertir en hypothèse"",""id"":""ConvertA"",""iconCss"":""bi-arrow-right""},{""text"":""Publiez-le !"",""id"":""Okr"",""iconCss"":""bi-diagram-2""},{""text"":""Éditer"",""id"":""Edit"",""iconCss"":""bi-pencil""}]},""nodes"":[{""shape"":{""type"":""Basic""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""T"",""offsetX"":897.6000004577636,""width"":319.99999908447245,""height"":88.80000000000003,""offsetY"":104.4,""id"":""nodehnMQc"",""zIndex"":69,""style"":{""fill"":""#ffccbc"",""strokeWidth"":""0"",""color"":""#ffccbc""},""annotations"":[{""id"":""Q4COe"",""content"":""Objectifs Q1 2022"",""style"":{""fontSize"":27}}]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/objective_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""O"",""offsetX"":914.83,""width"":244.31545637650896,""height"":124.99860558798143,""offsetY"":246.3,""id"":""nodehO9SK"",""zIndex"":71,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""B6u02"",""content"":""Améliorer l'activation"",""style"":{""color"":""white"",""fontSize"":19}}],""outEdges"":[""connectorucV1G"",""connectorrBBai"",""connectorxwNAq"",""connectorOPUDX""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/objective_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""O"",""offsetX"":478.3979981689454,""width"":239.20400366210927,""height"":149.50250228881828,""offsetY"":265.24874885559086,""id"":""nodeaZxgf"",""zIndex"":72,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""sqnm9"",""content"":""Renforcer mon positionnement différentiant"",""style"":{""color"":""white"",""fontSize"":18}}],""inEdges"":[""connectorucV1G""],""outEdges"":[""connectorQW1IE"",""connectorDIvm2"",""connectorsWNBU"",""connectorle62l"",""connectorrONSV"",""connectorEQsR8""]},{""shape"":{""type"":""Basic""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""N"",""offsetX"":449,""width"":102,""height"":46.79999999999994,""offsetY"":125.40000000000003,""id"":""noder1LFr"",""zIndex"":72,""style"":{""fill"":""#b9f6ca"",""strokeWidth"":""1"",""color"":""#b9f6ca""},""annotations"":[{""id"":""c4f6A"",""content"":""App"",""style"":{""fontSize"":20}}]},{""shape"":{""type"":""Basic""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""N"",""offsetX"":798.7399963378907,""width"":157.47999267578126,""height"":40.000000000000036,""offsetY"":345.5487488555908,""id"":""nodeyZZB8"",""zIndex"":70,""style"":{""fill"":""#a7ffeb"",""strokeWidth"":""1"",""color"":""#a7ffeb""},""annotations"":[{""id"":""QbtPr"",""content"":""Consulting"",""style"":{""fontSize"":20}}]},{""shape"":{""type"":""Basic""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""N"",""offsetX"":1389.7,""width"":194.39999999999986,""height"":51.84013998322111,""offsetY"":223.99,""id"":""nodeLFw5n"",""zIndex"":72,""style"":{""fill"":""#ff8a80"",""strokeWidth"":""1"",""color"":""#ff8a80""},""annotations"":[{""id"":""UFV8U"",""content"":""Marketing"",""style"":{""fontSize"":20}}]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/keyresult_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""K"",""offsetX"":820,""width"":200,""height"":125,""offsetY"":686.3999999999999,""id"":""nodeI8sw7"",""zIndex"":72,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""Cq8bo"",""content"":""Augmenter le nombre de missions OKRs"",""style"":{""color"":""white"",""fontSize"":16}}],""inEdges"":[""connectorOPUDX""],""outEdges"":[""connectoraOmiy""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/keyresult_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""K"",""offsetX"":1392.504,""width"":200,""height"":125,""offsetY"":322.5,""id"":""nodeGqLSP"",""zIndex"":72,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""oPsIG"",""content"":""Augmenter l'aquisition de la newsletter"",""style"":{""color"":""white"",""fontSize"":14}}],""inEdges"":[""connectorrBBai"",""connectorKvJMR""],""outEdges"":[""connectoreeBI8"",""connectorGg9Zq""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/assumption_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""A"",""offsetX"":110.26000121593475,""width"":179.4799975681305,""height"":115.63811923852687,""offsetY"":307.7296892363274,""id"":""nodeTgU2X"",""zIndex"":44,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""GMBwO"",""content"":""Le module strategie va attirer les CxO"",""style"":{""color"":""white"",""fontSize"":15}}],""inEdges"":[""connectorEQsR8""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/keyresult_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""K"",""offsetX"":49.675200000000004,""width"":166.8,""height"":88.80000000000007,""offsetY"":494.19999999999993,""id"":""nodeLKq8g"",""zIndex"":68,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""Uff7N"",""content"":""Augmenter le nombre de comptes créés par semaine"",""style"":{""color"":""white""}}],""inEdges"":[""connectorQW1IE""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/keyresult_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""K"",""offsetX"":1103.9200073242187,""width"":180,""height"":108,""offsetY"":686.3999999999999,""id"":""nodecTFZg"",""zIndex"":72,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""hOi6P"",""content"":""Augmenter le nombre de pilotes"",""style"":{""color"":""white""}}],""inEdges"":[""connectorxwNAq""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/initiative_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""I"",""offsetX"":1538.4,""width"":163.20000000000005,""height"":97.19999999999993,""offsetY"":493.79999999999995,""id"":""nodebUWi3"",""zIndex"":68,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""XPA5n"",""content"":""Faire des Visuels"",""style"":{""color"":""white""}}],""inEdges"":[""connectoreeBI8""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/initiative_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""I"",""offsetX"":1370.504,""width"":156,""height"":96,""offsetY"":584.3999999999999,""id"":""nodeQhD9g"",""zIndex"":68,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""aVLa0"",""content"":""Faire du contenu qui performe"",""style"":{""color"":""white""}}],""inEdges"":[""connectorGg9Zq""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/initiative_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""I"",""offsetX"":502.12,""width"":244.24000000000004,""height"":137.6,""offsetY"":848.8,""id"":""nodelGkXs"",""zIndex"":34,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""mum3P"",""content"":""Tester les webinars mensuels ciblés différences + follow up CRM"",""style"":{""color"":""white"",""fontSize"":16}}],""inEdges"":[""connectorUFAE7""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/keyresult_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""K"",""offsetX"":559.2451612903226,""width"":201.50967741935494,""height"":128.80000000000027,""offsetY"":648.7999999999998,""id"":""nodenyK3t"",""zIndex"":72,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""pcNJE"",""content"":""Augmenter le taux de transformation suite à une démo"",""style"":{""color"":""white"",""fontSize"":17}}],""inEdges"":[""connectorDIvm2""],""outEdges"":[""connectorUFAE7""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/initiative_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""I"",""offsetX"":60.59519999999999,""width"":188.64,""height"":112.31999999999994,""offsetY"":685.2527999999999,""id"":""nodeLTh4G"",""zIndex"":30,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""pGO0e"",""content"":""Renforcer le story telling différentiant sur .com"",""style"":{""color"":""white""}}],""inEdges"":[""connectorsWNBU""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/initiative_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""I"",""offsetX"":58.435199999999995,""width"":187.2,""height"":99.36000000000001,""offsetY"":818.4527999999998,""id"":""nodenU1cN"",""zIndex"":46,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""hxXvI"",""content"":""Focus Feature Brainstorm"",""style"":{""color"":""white""}}],""inEdges"":[""connectorle62l""]},{""shape"":{""type"":""Basic""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""T"",""offsetX"":135.92000000000002,""width"":128.15999999999997,""height"":51.83999999999992,""offsetY"":876.4255999999997,""id"":""nodehSC8U"",""zIndex"":57,""style"":{""fill"":""#d7ccc8"",""strokeWidth"":""0"",""color"":""#d7ccc8""},""annotations"":[{""id"":""TKIsu"",""content"":""Pour janvier""}]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/initiative_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""I"",""offsetX"":64.9152,""width"":179.99999999999994,""height"":100.79999999999995,""offsetY"":955.0079956054686,""id"":""nodeWvJ19"",""zIndex"":64,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""fJfXq"",""content"":""Focus Feature stratégie"",""style"":{""color"":""white""}}],""inEdges"":[""connectorrONSV""]},{""shape"":{""type"":""Basic""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""T"",""offsetX"":175.92000000000002,""width"":128.15999999999997,""height"":51.83999999999992,""offsetY"":1005.92,""id"":""nodehSC8UflaTt"",""zIndex"":69,""style"":{""fill"":""#d7ccc8"",""strokeWidth"":""0"",""color"":""#d7ccc8""},""annotations"":[{""id"":""TKIsu"",""content"":""Pour février""}]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/initiative_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""I"",""offsetX"":990.8351999999998,""width"":188.63999999999976,""height"":116.63999999999999,""offsetY"":833.3279956054687,""id"":""nodeE9FMq"",""zIndex"":72,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""qBBo1"",""content"":""Page consulting sur RG.Com + ecosystème"",""style"":{""color"":""white""}}],""inEdges"":[""connectoraOmiy""]},{""shape"":{""type"":""Image"",""source"":""../img/diagram/kpi_fr.png""},""ports"":[{""id"":""port1"",""shape"":""Circle"",""offset"":{""x"":0}},{""id"":""port2"",""shape"":""Circle"",""offset"":{""y"":1}},{""id"":""port3"",""shape"":""Circle"",""offset"":{""x"":1}},{""id"":""port4"",""shape"":""Circle"",""offset"":{""y"":0}}],""addInfo"":""D"",""offsetX"":1667.1905513300576,""width"":185.6188973398846,""height"":98.09128721213409,""offsetY"":363.7543563939329,""id"":""nodeXf2MJ"",""zIndex"":18,""constraints"":6289390,""style"":{""strokeWidth"":""0""},""annotations"":[{""id"":""a9kqQ"",""content"":""# Newsletter""}],""outEdges"":[""connectorKvJMR""]}],""connectors"":[{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":792.67,""y"":251.6},""targetPoint"":{""x"":598,""y"":260.06},""id"":""connectorucV1G"",""sourceID"":""nodehO9SK"",""zIndex"":72,""targetID"":""nodeaZxgf"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":901.36,""y"":308.8},""targetPoint"":{""x"":833.47,""y"":623.9},""id"":""connectorOPUDX"",""sourceID"":""nodehO9SK"",""zIndex"":70,""targetID"":""nodeI8sw7"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":1036.99,""y"":265.79},""targetPoint"":{""x"":1292.5,""y"":306.55},""id"":""connectorrBBai"",""sourceID"":""nodehO9SK"",""zIndex"":70,""targetID"":""nodeGqLSP"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":358.8,""y"":279.05},""targetPoint"":{""x"":200,""y"":297.37},""id"":""connectorEQsR8"",""zIndex"":60,""targetID"":""nodeTgU2X"",""segments"":[{""type"":""Bezier""}],""sourceID"":""nodeaZxgf""},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":941.68,""y"":308.8},""targetPoint"":{""x"":1080.72,""y"":632.4},""id"":""connectorxwNAq"",""sourceID"":""nodehO9SK"",""zIndex"":73,""targetID"":""nodecTFZg"",""segments"":[{""type"":""Bezier"",""point1"":{""x"":1080,""y"":540}}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":358.8,""y"":329.12},""targetPoint"":{""x"":132.81,""y"":449.8},""id"":""connectorQW1IE"",""sourceID"":""nodeaZxgf"",""zIndex"":71,""targetID"":""nodeLKq8g"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":1445.73,""y"":385},""targetPoint"":{""x"":1497.01,""y"":445.2},""id"":""connectoreeBI8"",""sourceID"":""nodeGqLSP"",""zIndex"":71,""targetID"":""nodebUWi3"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":1387.26,""y"":385},""targetPoint"":{""x"":1374.53,""y"":536.4},""id"":""connectorGg9Zq"",""sourceID"":""nodeGqLSP"",""zIndex"":71,""targetID"":""nodeQhD9g"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":540.85,""y"":713.2},""targetPoint"":{""x"":521.77,""y"":780},""id"":""connectorUFAE7"",""sourceID"":""nodenyK3t"",""zIndex"":72,""targetID"":""nodelGkXs"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":494.15,""y"":340},""targetPoint"":{""x"":545.67,""y"":584.4},""id"":""connectorDIvm2"",""sourceID"":""nodeaZxgf"",""zIndex"":73,""targetID"":""nodenyK3t"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":404.04,""y"":340},""targetPoint"":{""x"":116.46,""y"":629.09},""id"":""connectorsWNBU"",""sourceID"":""nodeaZxgf"",""zIndex"":40,""targetID"":""nodeLTh4G"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":421.65,""y"":340},""targetPoint"":{""x"":96.15,""y"":768.77},""id"":""connectorle62l"",""sourceID"":""nodeaZxgf"",""zIndex"":52,""targetID"":""nodenU1cN"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":433.59,""y"":340},""targetPoint"":{""x"":95.13,""y"":904.61},""id"":""connectorrONSV"",""sourceID"":""nodeaZxgf"",""zIndex"":72,""targetID"":""nodeWvJ19"",""segments"":[{""type"":""Bezier"",""point2"":{""x"":240,""y"":940}}]},{""addInfo"":""C"",""type"":""Bezier"",""sourcePoint"":{""x"":892.67,""y"":748.9},""targetPoint"":{""x"":923.03,""y"":775.01},""id"":""connectoraOmiy"",""sourceID"":""nodeI8sw7"",""zIndex"":72,""targetID"":""nodeE9FMq"",""segments"":[{""type"":""Bezier""}]},{""addInfo"":""C"",""type"":""Bezier"",""style"":{""strokeWidth"":2},""targetDecorator"":{""style"":{""strokeWidth"":2}},""sourcePoint"":{""x"":1574.38,""y"":349.81},""targetPoint"":{""x"":1492.5,""y"":337.52},""id"":""connectorKvJMR"",""sourceID"":""nodeXf2MJ"",""zIndex"":24,""targetID"":""nodeGqLSP"",""segments"":[{""type"":""Bezier""}]}],""selectedItems"":{""width"":0,""height"":0},""tool"":4,""drawingObject"":null}"



7 Replies

LA Laurent January 2, 2022 05:33 PM UTC

The good diagram string (without double quotes)

{"getNodeDefaults":"brainstormNodeDefaults","serializationSettings":{"preventDefaults":true},"scrollSettings":{"viewPortWidth":1465,"viewPortHeight":665.6000366210938,"currentZoom":0.6626480480313173,"horizontalOffset":178.79,"verticalOffset":-22.399999618530273},"contextMenuSettings":{"show":true,"showCustomMenuOnly":true,"items":[{"text":"Supprimer","id":"Delete","iconCss":"bi-node-minus"},{"text":"Convertir en objectif","id":"ConvertO","iconCss":"bi-arrow-right"},{"text":"Convertir en résultat clé","id":"ConvertKR","iconCss":"bi-arrow-right"},{"text":"Convertir en initiative","id":"ConvertI","iconCss":"bi-arrow-right"},{"text":"Convertir en hypothèse","id":"ConvertA","iconCss":"bi-arrow-right"},{"text":"Publiez-le !","id":"Okr","iconCss":"bi-diagram-2"},{"text":"Éditer","id":"Edit","iconCss":"bi-pencil"}]},"nodes":[{"shape":{"type":"Basic"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"T","offsetX":897.6000004577636,"width":319.99999908447245,"height":88.80000000000003,"offsetY":104.4,"id":"nodehnMQc","zIndex":69,"style":{"fill":"#ffccbc","strokeWidth":"0","color":"#ffccbc"},"annotations":[{"id":"Q4COe","content":"Objectifs Q1 2022","style":{"fontSize":27}}]},{"shape":{"type":"Image","source":"../img/diagram/objective_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"O","offsetX":914.83,"width":244.31545637650896,"height":124.99860558798143,"offsetY":246.3,"id":"nodehO9SK","zIndex":71,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"B6u02","content":"Améliorer l'activation","style":{"color":"white","fontSize":19}}],"outEdges":["connectorucV1G","connectorrBBai","connectorxwNAq","connectorOPUDX"]},{"shape":{"type":"Image","source":"../img/diagram/objective_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"O","offsetX":478.3979981689454,"width":239.20400366210927,"height":149.50250228881828,"offsetY":265.24874885559086,"id":"nodeaZxgf","zIndex":72,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"sqnm9","content":"Renforcer mon positionnement différentiant","style":{"color":"white","fontSize":18}}],"inEdges":["connectorucV1G"],"outEdges":["connectorQW1IE","connectorDIvm2","connectorsWNBU","connectorle62l","connectorrONSV","connectorEQsR8"]},{"shape":{"type":"Basic"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"N","offsetX":449,"width":102,"height":46.79999999999994,"offsetY":125.40000000000003,"id":"noder1LFr","zIndex":72,"style":{"fill":"#b9f6ca","strokeWidth":"1","color":"#b9f6ca"},"annotations":[{"id":"c4f6A","content":"App","style":{"fontSize":20}}]},{"shape":{"type":"Basic"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"N","offsetX":798.7399963378907,"width":157.47999267578126,"height":40.000000000000036,"offsetY":345.5487488555908,"id":"nodeyZZB8","zIndex":70,"style":{"fill":"#a7ffeb","strokeWidth":"1","color":"#a7ffeb"},"annotations":[{"id":"QbtPr","content":"Consulting","style":{"fontSize":20}}]},{"shape":{"type":"Basic"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"N","offsetX":1389.7,"width":194.39999999999986,"height":51.84013998322111,"offsetY":223.99,"id":"nodeLFw5n","zIndex":72,"style":{"fill":"#ff8a80","strokeWidth":"1","color":"#ff8a80"},"annotations":[{"id":"UFV8U","content":"Marketing","style":{"fontSize":20}}]},{"shape":{"type":"Image","source":"../img/diagram/keyresult_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"K","offsetX":820,"width":200,"height":125,"offsetY":686.3999999999999,"id":"nodeI8sw7","zIndex":72,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"Cq8bo","content":"Augmenter le nombre de missions OKRs","style":{"color":"white","fontSize":16}}],"inEdges":["connectorOPUDX"],"outEdges":["connectoraOmiy"]},{"shape":{"type":"Image","source":"../img/diagram/keyresult_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"K","offsetX":1392.504,"width":200,"height":125,"offsetY":322.5,"id":"nodeGqLSP","zIndex":72,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"oPsIG","content":"Augmenter l'aquisition de la newsletter","style":{"color":"white","fontSize":14}}],"inEdges":["connectorrBBai","connectorKvJMR"],"outEdges":["connectoreeBI8","connectorGg9Zq"]},{"shape":{"type":"Image","source":"../img/diagram/assumption_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"A","offsetX":110.26000121593475,"width":179.4799975681305,"height":115.63811923852687,"offsetY":307.7296892363274,"id":"nodeTgU2X","zIndex":44,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"GMBwO","content":"Le module strategie va attirer les CxO","style":{"color":"white","fontSize":15}}],"inEdges":["connectorEQsR8"]},{"shape":{"type":"Image","source":"../img/diagram/keyresult_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"K","offsetX":49.675200000000004,"width":166.8,"height":88.80000000000007,"offsetY":494.19999999999993,"id":"nodeLKq8g","zIndex":68,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"Uff7N","content":"Augmenter le nombre de comptes créés par semaine","style":{"color":"white"}}],"inEdges":["connectorQW1IE"]},{"shape":{"type":"Image","source":"../img/diagram/keyresult_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"K","offsetX":1103.9200073242187,"width":180,"height":108,"offsetY":686.3999999999999,"id":"nodecTFZg","zIndex":72,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"hOi6P","content":"Augmenter le nombre de pilotes","style":{"color":"white"}}],"inEdges":["connectorxwNAq"]},{"shape":{"type":"Image","source":"../img/diagram/initiative_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"I","offsetX":1538.4,"width":163.20000000000005,"height":97.19999999999993,"offsetY":493.79999999999995,"id":"nodebUWi3","zIndex":68,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"XPA5n","content":"Faire des Visuels","style":{"color":"white"}}],"inEdges":["connectoreeBI8"]},{"shape":{"type":"Image","source":"../img/diagram/initiative_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"I","offsetX":1370.504,"width":156,"height":96,"offsetY":584.3999999999999,"id":"nodeQhD9g","zIndex":68,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"aVLa0","content":"Faire du contenu qui performe","style":{"color":"white"}}],"inEdges":["connectorGg9Zq"]},{"shape":{"type":"Image","source":"../img/diagram/initiative_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"I","offsetX":502.12,"width":244.24000000000004,"height":137.6,"offsetY":848.8,"id":"nodelGkXs","zIndex":34,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"mum3P","content":"Tester les webinars mensuels ciblés différences + follow up CRM","style":{"color":"white","fontSize":16}}],"inEdges":["connectorUFAE7"]},{"shape":{"type":"Image","source":"../img/diagram/keyresult_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"K","offsetX":559.2451612903226,"width":201.50967741935494,"height":128.80000000000027,"offsetY":648.7999999999998,"id":"nodenyK3t","zIndex":72,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"pcNJE","content":"Augmenter le taux de transformation suite à une démo","style":{"color":"white","fontSize":17}}],"inEdges":["connectorDIvm2"],"outEdges":["connectorUFAE7"]},{"shape":{"type":"Image","source":"../img/diagram/initiative_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"I","offsetX":60.59519999999999,"width":188.64,"height":112.31999999999994,"offsetY":685.2527999999999,"id":"nodeLTh4G","zIndex":30,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"pGO0e","content":"Renforcer le story telling différentiant sur .com","style":{"color":"white"}}],"inEdges":["connectorsWNBU"]},{"shape":{"type":"Image","source":"../img/diagram/initiative_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"I","offsetX":58.435199999999995,"width":187.2,"height":99.36000000000001,"offsetY":818.4527999999998,"id":"nodenU1cN","zIndex":46,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"hxXvI","content":"Focus Feature Brainstorm","style":{"color":"white"}}],"inEdges":["connectorle62l"]},{"shape":{"type":"Basic"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"T","offsetX":135.92000000000002,"width":128.15999999999997,"height":51.83999999999992,"offsetY":876.4255999999997,"id":"nodehSC8U","zIndex":57,"style":{"fill":"#d7ccc8","strokeWidth":"0","color":"#d7ccc8"},"annotations":[{"id":"TKIsu","content":"Pour janvier"}]},{"shape":{"type":"Image","source":"../img/diagram/initiative_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"I","offsetX":64.9152,"width":179.99999999999994,"height":100.79999999999995,"offsetY":955.0079956054686,"id":"nodeWvJ19","zIndex":64,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"fJfXq","content":"Focus Feature stratégie","style":{"color":"white"}}],"inEdges":["connectorrONSV"]},{"shape":{"type":"Basic"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"T","offsetX":175.92000000000002,"width":128.15999999999997,"height":51.83999999999992,"offsetY":1005.92,"id":"nodehSC8UflaTt","zIndex":69,"style":{"fill":"#d7ccc8","strokeWidth":"0","color":"#d7ccc8"},"annotations":[{"id":"TKIsu","content":"Pour février"}]},{"shape":{"type":"Image","source":"../img/diagram/initiative_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"I","offsetX":990.8351999999998,"width":188.63999999999976,"height":116.63999999999999,"offsetY":833.3279956054687,"id":"nodeE9FMq","zIndex":72,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"qBBo1","content":"Page consulting sur RG.Com + ecosystème","style":{"color":"white"}}],"inEdges":["connectoraOmiy"]},{"shape":{"type":"Image","source":"../img/diagram/kpi_fr.png"},"ports":[{"id":"port1","shape":"Circle","offset":{"x":0}},{"id":"port2","shape":"Circle","offset":{"y":1}},{"id":"port3","shape":"Circle","offset":{"x":1}},{"id":"port4","shape":"Circle","offset":{"y":0}}],"addInfo":"D","offsetX":1667.1905513300576,"width":185.6188973398846,"height":98.09128721213409,"offsetY":363.7543563939329,"id":"nodeXf2MJ","zIndex":18,"constraints":6289390,"style":{"strokeWidth":"0"},"annotations":[{"id":"a9kqQ","content":"# Newsletter"}],"outEdges":["connectorKvJMR"]}],"connectors":[{"addInfo":"C","type":"Bezier","sourcePoint":{"x":792.67,"y":251.6},"targetPoint":{"x":598,"y":260.06},"id":"connectorucV1G","sourceID":"nodehO9SK","zIndex":72,"targetID":"nodeaZxgf","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":901.36,"y":308.8},"targetPoint":{"x":833.47,"y":623.9},"id":"connectorOPUDX","sourceID":"nodehO9SK","zIndex":70,"targetID":"nodeI8sw7","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":1036.99,"y":265.79},"targetPoint":{"x":1292.5,"y":306.55},"id":"connectorrBBai","sourceID":"nodehO9SK","zIndex":70,"targetID":"nodeGqLSP","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":358.8,"y":279.05},"targetPoint":{"x":200,"y":297.37},"id":"connectorEQsR8","zIndex":60,"targetID":"nodeTgU2X","segments":[{"type":"Bezier"}],"sourceID":"nodeaZxgf"},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":941.68,"y":308.8},"targetPoint":{"x":1080.72,"y":632.4},"id":"connectorxwNAq","sourceID":"nodehO9SK","zIndex":73,"targetID":"nodecTFZg","segments":[{"type":"Bezier","point1":{"x":1080,"y":540}}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":358.8,"y":329.12},"targetPoint":{"x":132.81,"y":449.8},"id":"connectorQW1IE","sourceID":"nodeaZxgf","zIndex":71,"targetID":"nodeLKq8g","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":1445.73,"y":385},"targetPoint":{"x":1497.01,"y":445.2},"id":"connectoreeBI8","sourceID":"nodeGqLSP","zIndex":71,"targetID":"nodebUWi3","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":1387.26,"y":385},"targetPoint":{"x":1374.53,"y":536.4},"id":"connectorGg9Zq","sourceID":"nodeGqLSP","zIndex":71,"targetID":"nodeQhD9g","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":540.85,"y":713.2},"targetPoint":{"x":521.77,"y":780},"id":"connectorUFAE7","sourceID":"nodenyK3t","zIndex":72,"targetID":"nodelGkXs","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":494.15,"y":340},"targetPoint":{"x":545.67,"y":584.4},"id":"connectorDIvm2","sourceID":"nodeaZxgf","zIndex":73,"targetID":"nodenyK3t","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":404.04,"y":340},"targetPoint":{"x":116.46,"y":629.09},"id":"connectorsWNBU","sourceID":"nodeaZxgf","zIndex":40,"targetID":"nodeLTh4G","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":421.65,"y":340},"targetPoint":{"x":96.15,"y":768.77},"id":"connectorle62l","sourceID":"nodeaZxgf","zIndex":52,"targetID":"nodenU1cN","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":433.59,"y":340},"targetPoint":{"x":95.13,"y":904.61},"id":"connectorrONSV","sourceID":"nodeaZxgf","zIndex":72,"targetID":"nodeWvJ19","segments":[{"type":"Bezier","point2":{"x":240,"y":940}}]},{"addInfo":"C","type":"Bezier","sourcePoint":{"x":892.67,"y":748.9},"targetPoint":{"x":923.03,"y":775.01},"id":"connectoraOmiy","sourceID":"nodeI8sw7","zIndex":72,"targetID":"nodeE9FMq","segments":[{"type":"Bezier"}]},{"addInfo":"C","type":"Bezier","style":{"strokeWidth":2},"targetDecorator":{"style":{"strokeWidth":2}},"sourcePoint":{"x":1574.38,"y":349.81},"targetPoint":{"x":1492.5,"y":337.52},"id":"connectorKvJMR","sourceID":"nodeXf2MJ","zIndex":24,"targetID":"nodeGqLSP","segments":[{"type":"Bezier"}]}],"selectedItems":{"width":0,"height":0},"tool":4,"drawingObject":null}



AM Arunkumar Manoharan Syncfusion Team January 3, 2022 12:03 PM UTC

Hi Laurent,

On further analysis, we found that the zIndex for the nodes and connector have the same index value more than one occurrence . So only the objects are missing in the loaded JSON file. We have modified the zIndex of nodes and the connectors in your JSON file and provided below. Could you please share with us more details on how you are saving the JSON file at your end. Also, please confirm whether you are changing the zIndex while loading the JSON file.


Regards,

Arun.


Attachment: Data_11216915.zip


LA Laurent January 3, 2022 12:54 PM UTC

Hi,

Thank you for your analysis.

To generate the json file, i simply use :  diagram.saveDiagram() 

Note that I have define the diagram with the option:

<e-diagram-serializationsettings preventDefaults="true" />

Then i store the json file as is in a sql database without any modification.

I don't modify the zindex while saving nor while loading the json file.


Regards,

Laurent




AM Arunkumar Manoharan Syncfusion Team January 4, 2022 03:06 PM UTC

Hi Laurent,


When we load the JSON in the diagram, the nodes are having the same z-index. We have tried to render the node and saved and loaded the diagram. The nodes do not get disappeared and are updated properly. So please share with us a


  1. video demonstration of how do you add nodes in the diagram.
  2. do you change any index for the nodes after rendering in the diagram?
  3. If you use any order commands after rendering the diagram.


So please share the above details, this would help us to validate further and update the solution and also we attached the sample and replication video from our end by saving and loading the nodes and connector in the diagram for more information please refer to it.


Regards

Arun Kumar.


Attachment: Syncfusionzindex_c74abce6.zip


LA Laurent January 5, 2022 09:07 AM UTC

Hi,

Here is what i have found:

  • Create a shape 1 (zIndex=0)
  • Create a shape 2 (zIndex=1) and a shape 3  (zIndex=2)



  • Delete shape 1 (shape2 and shape 3 zIndex are not changed)
  • Save the diagram (diagram.saveDiagram())
  • Check shape2.zIndex = shape3.zIndex = 2 


It is the same behaviour if you delete Shape3 or Shape2 instead of Shape1.

I do not change the zIndex at any time, I just check them using diagram.selectedItems.nodes[0].zIndex

I looks like that zIndex are rearranged during the saveDiagram() if a node has been removed  




LA Laurent January 9, 2022 03:17 PM UTC

Hi, 

Do you hve any clue about the my previous reply?


I really have some issues with diagram using saveDiagram and loadDiagram.

Here is another use case when loading a diagram with zindex re ordered by myself (as the previous issue is still not resolved...):

diagramToLoad = '{\r\n "getNodeDefaults": "brainstormNodeDefaults",\r\n "serializationSettings": {\r\n "preventDefaults": true\r\n },\r\n "snapSettings": {\r\n "constraints": 0\r\n },\r\n "scrollSettings": {\r\n "viewPortWidth": 1465,\r\n "viewPortHeight": 695.6000366210938\r\n },\r\n "tool": 4,\r\n "nodes": [\r\n {\r\n "addInfo": "N",\r\n "shape": {\r\n "type": "Basic",\r\n "shape": "Rectangle",\r\n "cornerRadius": 0\r\n },\r\n "offsetX": 302,\r\n "width": 203,\r\n "height": 124,\r\n "offsetY": 163.5,\r\n "ports": [\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port1",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 0,\r\n "y": 0.5\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n },\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port2",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 0.5,\r\n "y": 1\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n },\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port3",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 1,\r\n "y": 0.5\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n },\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port4",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 0.5,\r\n "y": 0\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n }\r\n ],\r\n "id": "nodeMAvdV",\r\n "zIndex": 0,\r\n "container": null,\r\n "visible": true,\r\n "horizontalAlignment": "Left",\r\n "verticalAlignment": "Top",\r\n "backgroundColor": "transparent",\r\n "borderColor": "none",\r\n "borderWidth": 0,\r\n "rotateAngle": 0,\r\n "pivot": {\r\n "x": 0.5,\r\n "y": 0.5\r\n },\r\n "margin": {},\r\n "flip": "None",\r\n "wrapper": {\r\n "actualSize": {\r\n "width": 203,\r\n "height": 124\r\n },\r\n "offsetX": 302,\r\n "offsetY": 163.5\r\n },\r\n "constraints": 5240814,\r\n "style": {\r\n "strokeWidth": "1",\r\n "color": "black"\r\n },\r\n "annotations": [\r\n {\r\n "id": "VvrRw",\r\n "content": "EDCCD",\r\n "annotationType": "String",\r\n "style": {\r\n "strokeWidth": 0,\r\n "strokeColor": "transparent",\r\n "fill": "transparent",\r\n "bold": false,\r\n "textWrapping": "WrapWithOverflow",\r\n "color": "black",\r\n "whiteSpace": "CollapseSpace",\r\n "fontFamily": "Arial",\r\n "fontSize": "16",\r\n "italic": false,\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "textAlign": "Center",\r\n "textOverflow": "Wrap",\r\n "textDecoration": "None"\r\n },\r\n "hyperlink": {\r\n "link": "",\r\n "content": "",\r\n "textDecoration": "None"\r\n },\r\n "constraints": 4,\r\n "visibility": true,\r\n "rotateAngle": 0,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "offset": {\r\n "x": 0.5,\r\n "y": 0.5\r\n }\r\n }\r\n ],\r\n "isExpanded": true,\r\n "expandIcon": {\r\n "shape": "None"\r\n },\r\n "fixedUserHandles": [],\r\n "inEdges": [],\r\n "outEdges": [],\r\n "parentId": "",\r\n "processId": "",\r\n "umlIndex": -1,\r\n "isPhase": false,\r\n "isLane": false\r\n },\r\n {\r\n "addInfo": "N",\r\n "shape": {\r\n "type": "Basic",\r\n "shape": "Rectangle",\r\n "cornerRadius": 0\r\n },\r\n "offsetX": 624,\r\n "width": 229,\r\n "height": 142,\r\n "offsetY": 266.5,\r\n "ports": [\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port1",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 0,\r\n "y": 0.5\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n },\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port2",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 0.5,\r\n "y": 1\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n },\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port3",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 1,\r\n "y": 0.5\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n },\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port4",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 0.5,\r\n "y": 0\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n }\r\n ],\r\n "id": "nodeCxaGf",\r\n "zIndex": 1,\r\n "container": null,\r\n "visible": true,\r\n "horizontalAlignment": "Left",\r\n "verticalAlignment": "Top",\r\n "backgroundColor": "transparent",\r\n "borderColor": "none",\r\n "borderWidth": 0,\r\n "rotateAngle": 0,\r\n "pivot": {\r\n "x": 0.5,\r\n "y": 0.5\r\n },\r\n "margin": {},\r\n "flip": "None",\r\n "wrapper": {\r\n "actualSize": {\r\n "width": 229,\r\n "height": 142\r\n },\r\n "offsetX": 624,\r\n "offsetY": 266.5\r\n },\r\n "constraints": 5240814,\r\n "style": {\r\n "strokeWidth": "1",\r\n "color": "black"\r\n },\r\n "annotations": [\r\n {\r\n "id": "lHXA3",\r\n "content": "CDcdD",\r\n "annotationType": "String",\r\n "style": {\r\n "strokeWidth": 0,\r\n "strokeColor": "transparent",\r\n "fill": "transparent",\r\n "bold": false,\r\n "textWrapping": "WrapWithOverflow",\r\n "color": "black",\r\n "whiteSpace": "CollapseSpace",\r\n "fontFamily": "Arial",\r\n "fontSize": "16",\r\n "italic": false,\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "textAlign": "Center",\r\n "textOverflow": "Wrap",\r\n "textDecoration": "None"\r\n },\r\n "hyperlink": {\r\n "link": "",\r\n "content": "",\r\n "textDecoration": "None"\r\n },\r\n "constraints": 4,\r\n "visibility": true,\r\n "rotateAngle": 0,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "offset": {\r\n "x": 0.5,\r\n "y": 0.5\r\n }\r\n }\r\n ],\r\n "isExpanded": true,\r\n "expandIcon": {\r\n "shape": "None"\r\n },\r\n "fixedUserHandles": [],\r\n "inEdges": [],\r\n "outEdges": [],\r\n "parentId": "",\r\n "processId": "",\r\n "umlIndex": -1,\r\n "isPhase": false,\r\n "isLane": false\r\n },\r\n {\r\n "addInfo": "N",\r\n "shape": {\r\n "type": "Basic",\r\n "shape": "Rectangle",\r\n "cornerRadius": 0\r\n },\r\n "offsetX": 284.5,\r\n "width": 118,\r\n "height": 86,\r\n "offsetY": 368.5,\r\n "ports": [\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port1",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 0,\r\n "y": 0.5\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n },\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port2",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 0.5,\r\n "y": 1\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n },\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port3",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 1,\r\n "y": 0.5\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n },\r\n {\r\n "inEdges": [],\r\n "outEdges": [],\r\n "id": "port4",\r\n "shape": "Circle",\r\n "offset": {\r\n "x": 0.5,\r\n "y": 0\r\n },\r\n "height": 12,\r\n "width": 12,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "style": {\r\n "fill": "white",\r\n "strokeColor": "black",\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "strokeWidth": 1\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "visibility": 8\r\n }\r\n ],\r\n "id": "nodentrcW",\r\n "zIndex": 2,\r\n "container": null,\r\n "visible": true,\r\n "horizontalAlignment": "Left",\r\n "verticalAlignment": "Top",\r\n "backgroundColor": "transparent",\r\n "borderColor": "none",\r\n "borderWidth": 0,\r\n "rotateAngle": 0,\r\n "pivot": {\r\n "x": 0.5,\r\n "y": 0.5\r\n },\r\n "margin": {},\r\n "flip": "None",\r\n "wrapper": {\r\n "actualSize": {\r\n "width": 118,\r\n "height": 86\r\n },\r\n "offsetX": 284.5,\r\n "offsetY": 368.5\r\n },\r\n "constraints": 5240814,\r\n "style": {\r\n "strokeWidth": "1",\r\n "color": "black"\r\n },\r\n "annotations": [\r\n {\r\n "id": "w284g",\r\n "content": "VSFV",\r\n "annotationType": "String",\r\n "style": {\r\n "strokeWidth": 0,\r\n "strokeColor": "transparent",\r\n "fill": "transparent",\r\n "bold": false,\r\n "textWrapping": "WrapWithOverflow",\r\n "color": "black",\r\n "whiteSpace": "CollapseSpace",\r\n "fontFamily": "Arial",\r\n "fontSize": "16",\r\n "italic": false,\r\n "opacity": 1,\r\n "strokeDashArray": "",\r\n "textAlign": "Center",\r\n "textOverflow": "Wrap",\r\n "textDecoration": "None"\r\n },\r\n "hyperlink": {\r\n "link": "",\r\n "content": "",\r\n "textDecoration": "None"\r\n },\r\n "constraints": 4,\r\n "visibility": true,\r\n "rotateAngle": 0,\r\n "margin": {\r\n "right": 0,\r\n "bottom": 0,\r\n "left": 0,\r\n "top": 0\r\n },\r\n "horizontalAlignment": "Center",\r\n "verticalAlignment": "Center",\r\n "offset": {\r\n "x": 0.5,\r\n "y": 0.5\r\n }\r\n }\r\n ],\r\n "isExpanded": true,\r\n "expandIcon": {\r\n "shape": "None"\r\n },\r\n "fixedUserHandles": [],\r\n "inEdges": [],\r\n "outEdges": [],\r\n "parentId": "",\r\n "processId": "",\r\n "umlIndex": -1,\r\n "isPhase": false,\r\n "isLane": false\r\n }\r\n ],\r\n "connectors": [\r\n {\r\n "addInfo": "C",\r\n "type": "Bezier",\r\n "cornerRadius": 0,\r\n "style": {\r\n "strokeWidth": 1,\r\n "strokeColor": "black",\r\n "strokeDashArray": "",\r\n "fill": "transparent",\r\n "opacity": 1,\r\n "gradient": {\r\n "type": "None"\r\n }\r\n },\r\n "sourceDecorator": {\r\n "shape": "None",\r\n "width": 10,\r\n "height": 10,\r\n "pivot": {\r\n "x": 0,\r\n "y": 0.5\r\n },\r\n "style": {\r\n "fill": "black",\r\n "strokeColor": "black",\r\n "strokeWidth": 1,\r\n "strokeDashArray": "",\r\n "opacity": 1,\r\n "gradient": {\r\n "type": "None"\r\n }\r\n }\r\n },\r\n "targetDecorator": {\r\n "shape": "Arrow",\r\n "style": {\r\n "fill": "black",\r\n "strokeColor": "black",\r\n "strokeWidth": 2,\r\n "strokeDashArray": "",\r\n "opacity": 1,\r\n "gradient": {\r\n "type": "None"\r\n }\r\n },\r\n "width": 10,\r\n "height": 10,\r\n "pivot": {\r\n "x": 0,\r\n "y": 0.5\r\n }\r\n },\r\n "sourcePoint": {\r\n "x": 403.5,\r\n "y": 195.97\r\n },\r\n "targetPoint": {\r\n "x": 509.5,\r\n "y": 229.87\r\n },\r\n "shape": {\r\n "type": "None"\r\n },\r\n "id": "connectorhoNoK",\r\n "sourceID": "nodeMAvdV",\r\n "zIndex": 3,\r\n "targetID": "nodeCxaGf",\r\n "sourcePortID": "",\r\n "targetPortID": "",\r\n "flip": "None",\r\n "segments": [\r\n {\r\n "type": "Bezier",\r\n "point1": {\r\n "x": 0,\r\n "y": 0\r\n },\r\n "vector1": {\r\n "angle": 0,\r\n "distance": 0\r\n },\r\n "point2": {\r\n "x": 0,\r\n "y": 0\r\n },\r\n "vector2": {\r\n "angle": 0,\r\n "distance": 0\r\n },\r\n "point": {\r\n "x": 0,\r\n "y": 0\r\n }\r\n }\r\n ],\r\n "wrapper": {\r\n "actualSize": {\r\n "width": 103.94861203402616,\r\n "height": 33.877977562800595\r\n },\r\n "offsetX": 455.4743060170131,\r\n "offsetY": 212.9089887814003\r\n },\r\n "annotations": [],\r\n "fixedUserHandles": [],\r\n "visible": true,\r\n "constraints": 470590,\r\n "sourcePadding": 0,\r\n "targetPadding": 0,\r\n "tooltip": {\r\n "openOn": "Auto"\r\n },\r\n "connectionPadding": 0,\r\n "parentId": ""\r\n },\r\n {\r\n "addInfo": "C",\r\n "type": "Bezier",\r\n "cornerRadius": 0,\r\n "style": {\r\n "strokeWidth": 1,\r\n "strokeColor": "black",\r\n "strokeDashArray": "",\r\n "fill": "transparent",\r\n "opacity": 1,\r\n "gradient": {\r\n "type": "None"\r\n }\r\n },\r\n "sourceDecorator": {\r\n "shape": "None",\r\n "width": 10,\r\n "height": 10,\r\n "pivot": {\r\n "x": 0,\r\n "y": 0.5\r\n },\r\n "style": {\r\n "fill": "black",\r\n "strokeColor": "black",\r\n "strokeWidth": 1,\r\n "strokeDashArray": "",\r\n "opacity": 1,\r\n "gradient": {\r\n "type": "None"\r\n }\r\n }\r\n },\r\n "targetDecorator": {\r\n "shape": "Arrow",\r\n "style": {\r\n "fill": "black",\r\n "strokeColor": "black",\r\n "strokeWidth": 2,\r\n "strokeDashArray": "",\r\n "opacity": 1,\r\n "gradient": {\r\n "type": "None"\r\n }\r\n },\r\n "width": 10,\r\n "height": 10,\r\n "pivot": {\r\n "x": 0,\r\n "y": 0.5\r\n }\r\n },\r\n "sourcePoint": {\r\n "x": 296.71,\r\n "y": 225.5\r\n },\r\n "targetPoint": {\r\n "x": 288.17,\r\n "y": 325.5\r\n },\r\n "shape": {\r\n "type": "None"\r\n },\r\n "id": "connectorT35Ka",\r\n "sourceID": "nodeMAvdV",\r\n "zIndex": 4,\r\n "targetID": "nodentrcW",\r\n "sourcePortID": "",\r\n "targetPortID": "",\r\n "flip": "None",\r\n "segments": [\r\n {\r\n "type": "Bezier",\r\n "point1": {\r\n "x": 0,\r\n "y": 0\r\n },\r\n "vector1": {\r\n "angle": 0,\r\n "distance": 0\r\n },\r\n "point2": {\r\n "x": 0,\r\n "y": 0\r\n },\r\n "vector2": {\r\n "angle": 0,\r\n "distance": 0\r\n },\r\n "point": {\r\n "x": 0,\r\n "y": 0\r\n }\r\n }\r\n ],\r\n "wrapper": {\r\n "actualSize": {\r\n "width": 8.540916555356318,\r\n "height": 98.39948821102058\r\n },\r\n "offsetX": 292.4395417223218,\r\n "offsetY": 274.69974410551026\r\n },\r\n "annotations": [],\r\n "fixedUserHandles": [],\r\n "visible": true,\r\n "constraints": 470590,\r\n "sourcePadding": 0,\r\n "targetPadding": 0,\r\n "tooltip": {\r\n "openOn": "Auto"\r\n },\r\n "connectionPadding": 0,\r\n "parentId": ""\r\n },\r\n {\r\n "addInfo": "C",\r\n "type": "Bezier",\r\n "cornerRadius": 0,\r\n "style": {\r\n "strokeWidth": 1,\r\n "strokeColor": "black",\r\n "strokeDashArray": "",\r\n "fill": "transparent",\r\n "opacity": 1,\r\n "gradient": {\r\n "type": "None"\r\n }\r\n },\r\n "sourceDecorator": {\r\n "shape": "None",\r\n "width": 10,\r\n "height": 10,\r\n "pivot": {\r\n "x": 0,\r\n "y": 0.5\r\n },\r\n "style": {\r\n "fill": "black",\r\n "strokeColor": "black",\r\n "strokeWidth": 1,\r\n "strokeDashArray": "",\r\n "opacity": 1,\r\n "gradient": {\r\n "type": "None"\r\n }\r\n }\r\n },\r\n "targetDecorator": {\r\n "shape": "Arrow",\r\n "style": {\r\n "fill": "black",\r\n "strokeColor": "black",\r\n "strokeWidth": 2,\r\n "strokeDashArray": "",\r\n "opacity": 1,\r\n "gradient": {\r\n "type": "None"\r\n }\r\n },\r\n "width": 10,\r\n "height": 10,\r\n "pivot": {\r\n "x": 0,\r\n "y": 0.5\r\n }\r\n },\r\n "sourcePoint": {\r\n "x": 343.5,\r\n "y": 350.77\r\n },\r\n "targetPoint": {\r\n "x": 509.5,\r\n "y": 300.9\r\n },\r\n "shape": {\r\n "type": "None"\r\n },\r\n "id": "connectorJNgZ7",\r\n "sourceID": "nodentrcW",\r\n "zIndex": 5,\r\n "targetID": "nodeCxaGf",\r\n "sourcePortID": "",\r\n "targetPortID": "",\r\n "flip": "None",\r\n "segments": [\r\n {\r\n "type": "Bezier",\r\n "point1": {\r\n "x": 0,\r\n "y": 0\r\n },\r\n "vector1": {\r\n "angle": 0,\r\n "distance": 0\r\n },\r\n "point2": {\r\n "x": 0,\r\n "y": 0\r\n },\r\n "vector2": {\r\n "angle": 0,\r\n "distance": 0\r\n },\r\n "point": {\r\n "x": 0,\r\n "y": 0\r\n }\r\n }\r\n ],\r\n "wrapper": {\r\n "actualSize": {\r\n "width": 164.40833147597903,\r\n "height": 49.85204599257503\r\n },\r\n "offsetX": 425.7041657379895,\r\n "offsetY": 325.84397700371244\r\n },\r\n "annotations": [],\r\n "fixedUserHandles": [],\r\n "visible": true,\r\n "constraints": 470590,\r\n "sourcePadding": 0,\r\n "targetPadding": 0,\r\n "tooltip": {\r\n "openOn": "Auto"\r\n },\r\n "connectionPadding": 0,\r\n "parentId": ""\r\n }\r\n ]\r\n}'


diagram.loadDiagram( diagramToLoad )

I have check the saveDiagram() that seems correct. But when I test the zIndex of the elements I found:

diagram.nodes[0].zIndex = 2 (instead of 0)

diagram.nodes[1].zIndex = 4 (instead of 1)

diagram.nodes[2].zIndex = 7 (instead of 2)

diagram.connectors[0].zIndex = 9 (instead of 3)
diagram.connectors[1].zIndex = 10 (instead of 4)
diagram.connectors[2].zIndex = 11 (instead of 5)

There is a difference between diagram zIndex and the json file.

My understanding is that loadDiagram and saveDiagram are re ordering zIndex elements. Is that correct?

That is an issue for me because I try to share this diagram via signalR with others users. And I don't send all the diagram between users but only elements (a node or a connector).  



AR Aravind Ravi Syncfusion Team January 10, 2022 09:23 AM UTC

Hi Laurent, 

We have created a sample to save and load the diagram. When we delete any one of the nodes in the diagram and save and load the diagram, the diagram has been loaded properly. We are unable to reproduce the reported issue at our end. We have attached a video demonstration of how we delete the node and load the diagram and sample in the below link 



So please look at a video and sample and confirm us whether we tried to reproduce the issue in same way that you tried at your end. If no, then please share us a video demonstration of issue and modify the above sample illustrating issue with issue replication steps. This would help us to serve you better. 

Regards 
Aravind Ravi 


Loader.
Up arrow icon