serialize

serializes data to an array of JSON objects

array serialize( [boolean all] );
allbooleandefines whether all data or only the blocks data are serialized
arrayserialized 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();

Related sample:  Diagram: Get Data with Shape Stypes

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

Related sample:  Diagram Editor: Live Editing

See also
Back to top