addShape

adds a custom SVG-based shape to Diagram

void addShape(string id,object obj);

stringshape ID obj

objectshape data object

Example

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

Related samples

Diagram: Custom Shapes

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

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>`;
  },
  //...
});

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",
 },
 // ...
]