serialize

serializes data to an array of JSON objects

array serialize( [boolean all] );

Parameters

allbooleandefines whether all data or only the blocks data are serialized

Returns

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 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: Styled Shapes

See also
Back to top