addShape

adds a custom SVG-based shape to Diagram

void addShape(string id,object obj);
idstringshape ID
objobjectshape data object

Example

$$("diagram1").addShape("internet", {
  template:'<svg width="60" height="60" viewBox="0 0 60 60">...</svg>',
  // other data
});

Related samples

Details

The ID of the shape must be unique and should not coincide with any existing one. Possible fields are listed below:

  • template (string, function) - obligatory, template that defines the desired shape
  • name (string) - name displayed in the tooltip when the correspodning shape is hovered over in the editor
  • square (boolean) - if true, an item will have the same width and height when its size is changed via form or drag resize
  • angle (string, number) - angle of the shape rotation. The rotation origin is center
  • fillOpacity (string, number) - opacity of the fill color inside the shape. Ranges from 0.0 to 1 or percentage from "0%" to "100%"
  • lineWidth (string, number) - width of the shape outline
  • lineColor (string, number) - color of the shape outline. "#ccd7e6" by default
  • lineStyle (string, number) - stroke-dasharray for outline. Possible values are
    • "dotted"
    • "dashed"
    • numeric value The higher value is, the more space is in between dashes.
  • backgroundColor (string) - background color (color name or HEX value). "#f4f5f9" by default
  • altBackgroudColor (string) - alternative background. "#ccd7e6" by default. The property is only applicable to the "dots" type and custom shapes.

Usage of the template field

The template field can be used as an HTML string, a function that returns a template, or as a name of a built-in template.

As an HTML string

You can pass any HTML string as a value for template (e.g. define it as an image):

$$("diagram1").addShape("laptop", {
  template: `<img class="custom-image" src="svg/laptop.svg"></img>`,
  // other data
});

Related sample:  Diagram Editor: Extra Shapes

As a function

Template as a function can be useful when you need to calculate shape size depending on outer size (item size). The function accepts the only parameter:

  • obj (object) - item data (contains block and shape data).
$$("diagram1").addShape("myshape", {
  template: function(obj) {
    const rx = obj.width / 2;
    const ry = obj.height / 2;
    const d = (obj.lineWidth || 1) / 2;
    return `
      <svg 
        width='100%' 
        height='100%'>
        <ellipse cx='${rx}' cy='${ry}' rx='${rx -d}' ry='${ry - d}' ></ellipse>
      </svg>`;
  },
  //...
});

Related sample:  Diagram Editor: Template as a Function

As a name of a predefined shape

This option can be useful when you want to use one template for multiple shapes that may have different colors or sizes. For example, "rrect" template (rounded rectangle) can be used as "join" shape with small width/height and as "action" shape with standard size:

shapes:[
 {
  id: "action",
  template: "rrect",
  backgroundColor: "#b5d461",
  lineColor: "#b5d461",
 },
 {
  id: "join",
  template: "rrect",
  height: 80,
  width: 10,
  backgroundColor: "#ffb955",
  lineColor: "#ffb955",
 },
 // ...
]

Related sample:  Diagram Editor: Styled Shapes

See also
Back to top