serializes data to an array of JSON objects
all | boolean | defines whether all data or only the blocks data are serialized |
array | serialized data as an array of JSON objects |
$$("diagram1").serialize();
By default, shape settings (if any) are not included into the serialized array of blocks.
To include them, you need to provide a serialization scheme and extend item data with the settings of its SVG shape.
view:"diagram",
id:"diagram1",
shapes:[
{name: "circle", fontColor: "#fff", lineColor: "#65C0B7"},
{name: "action", lineColor: "#b5d461"},
],
scheme: {
$serialize: function(itemData){
const skipProps = ["id", "name", "svg"];
const shape = $$("diagram1").getShape(itemData.type);
if(shape){
for(let p in shape)
if(skipProps.indexOf(p)==-1 && !itemData[p])
itemData[p] = shape[p];
}
return itemData;
}
}
// ...
const allData = $$("diagram1").serialize();
Related sample: Diagram: Get Data with Shape Stypes
By default only blocks are serialized. If you want to get the full data object (e.g. to pass it to the editor) pass true as the method parameter. In this case the returned object will include the following fields:
const data = {
data: [
{ id: "start", type: "circle", value: "start",
x: 0, y: 80
},
// other blocks
],
links: [
{
source: "start", target: "search", id: 132
},
// other links
],
shapes: [
{
backgroundColor: "#65C0B7", fontColor: "#fff",
group: "block", id: "circle",
lineColor: "#65C0B7", name: "Circle",
svg: /*svg_code*/
},
// other shapes
],
item: {
height: 50, width: 100
},
linkItem: {
arrowSize: 6, arrow: false,
mode: "edges", backgroundColor: magenta
}
};
Related sample: Diagram Editor: Live Editing