serialize

serializes data to an array of JSON objects

array serialize( [boolean all] );

all

boolean

defines whether all data or only the blocks data are serialized

array

serialized data as an array of JSON objects

Example

$$("diagram1").serialize();

Details

Including shape data into blocks

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();

Serializing data for Diagram Editor

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:

data (array) - an array with block data
links (array) - an array with link data
shapes (array) - an array with all shapes currently used in this Diagram (default and custom ones)
item (object) - a set of the default properties that are applied to Diagram blocks unless they have the corresponding settings of their own
linkItem (object) - a set of the default properties that are applied to Diagram links unless they have the corresponding settings of their own.

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
  }
};