Diagram Shapes and Connectors

In this article you will find the full lists of available Diagram shapes and connectors types. Besides, you will learn how to create a new type of shapes and add the Org Chart shapes into Diagram.

Shapes Configuration

All possible shapes types that you can use to build your diagram are presented below:


Use the name of the necessary shape as a value of the type attribute inside the shape object, while preparing a data set for loading into the diagram.

var data = [
    // shapes
    { "id": "1", "x": 100, "y": 40,  "text": "Start", "type": "start", "height": 50 },
    { "id": "2", "x": 100, "y": 170, "text": "Operation 1", "type": "output" },
    { "id": "3", "x": 100, "y": 300, "text": "Operation 2", "type": "input" },
    { "id": "4", "x": 20,  "y": 430, "text": "End 1", "type": "end", "height": 50 },
    { "id": "5", "x": 280, "y": 250, "text": "Extra Step", "type": "process" },
    { "id": "6", "x": 350, "y": 60,  "text": "End 2", "type": "end", "height": 50 }
];

Related sample:  Flow-Chart Shapes - DHTMLX Diagram

Besides, you can create a new type of shapes for Diagram. But it doesn't work for Diagram Editor. For more information see the Diagram Shapes and Connectors article.

Properties of a shape object

A shape object possesses a set of properties. Here is the list:

  • id - (string/number) the unique id of a shape;
  • type - (string) the type of the shape. See the full list of shapes types in the related sample:
    Related sample:  Flow-Chart Shapes - DHTMLX Diagram
  • x - (number) the x coordinate of the shape position;
  • y - (number) the y coordinate of the shape position;
  • angle - (number) the angle of shape rotation;
  • text - (string) the text to be rendered in a shape;
  • height - (number) the height of a shape, 90 by default;
  • width - (number) the width of a shape, 140 by default;
  • hidden - (boolean) defines, whether a shape will be hidden;
  • css - (string) the name of the CSS class that should be applied to the shape;
  • fill - (string) the color of the shape, "#DEDEDE" by default;
  • stroke - (string) the color of the shape outline, "#DEDEDE" by default;
  • strokeWidth - (number) the width of the shape outline, 1 by default;
  • strokeType - (string) the type of the stroke outline, "line" (default), "dash" for a dashed line;
  • strokeDash - (string) the pattern of dashes and spaces for a dashed outline;
  • fontColor - (string) the color of the text font, "#4C4C4C" by default;
  • fontStyle - (string) the style of the text font, can be "normal" (default), "italic" or "oblique";
  • fontWeight - (string) the text font weight, possible values are: "normal" (default), "bold", "bolder", "lighter", values "100"-"900", where "400" is the same as normal, and "600"+ is the boldest font;
  • fontSize - (number) - the size of the font in pixels, 14 by default;
  • textAlign - (string) - the alignment of text in a shape:"left","center"(default),"right";
  • textVerticalAlign - (string) - the vertical alignment of text in a shape:"top","center"(default),"bottom";
  • lineHeight - (number) the height of a line, 14 by default.
var data = [
    // shapes
    { "id": "1", "x": 100, "y": 40,  "text": "Start", "type": "start", "height": 50 },
    { "id": "2", "x": 100, "y": 170, "text": "Operation 1", "type": "output" },
    { "id": "3", "x": 100, "y": 300, "text": "Operation 2", "type": "input" },
    { "id": "4", "x": 20,  "y": 430, "text": "End 1", "type": "end", "height": 50 },
    { "id": "5", "x": 280, "y": 250, "text": "Extra Step", "type": "process" },
    { "id": "6", "x": 350, "y": 60,  "text": "End 2", "type": "end", "height": 50 }
];

Setting the default shape type

You can set a common type for all the shapes of a diagram via the defaultShapeType property of the diagram config object:

var diagram = new dhx.Diagram("diagram_container", { 
    defaultShapeType: "rectangle" });

This value is applied, if the shape config doesn't contain the "type" property.

Setting type for a separate shape

Use the name of the necessary type as a value of the type attribute inside the shape object, while preparing a data set for loading into the diagram.

// data to load
var data = [
    // shapes
    { "id": "1", "x": 100, "y": 40, "text": "Start", "type": "start", "height": 50 },
    { "id": "2", "x": 100, "y": 170, "text": "Operation 1", "type": "output" },
    { "id": "3", "x": 100, "y": 300, "text": "Operation 2", "type": "input" },
    // more shape objects
 
    // connectors
    { "from": "1", "to": "2" },
    { "from": "2", "to": "3" },
    // more connector objects
]
 
// initializing a diagram
var diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

Templates for Shapes

There is a possibility to create your own types of shapes with the help of SVG or HTML templates.

Using HTML templates in Internet Explorer is not available. In this case you have to create SVG templates only.

Related sample:  HTML Template - DHTMLX Diagram

Related sample:  SVG Template - DHTMLX Diagram

To create a new type of a shape you need to create a new template and set it for a shape using the type attribute in the configuration object of the shape.

To do this, you need to take the following steps:

  • initialize dhtmlxDiagram
var diagram = new dhx.Diagram("diagram");
  • create a new template (customShape, for example), which must be assigned to a new key of the flowShapes diagram object. Set as a value of diagram.flowShapes.customShape a function that takes one parameter:

    • config - (object) an object with configuration of a shape

Do not use default types names of the dhtmlxDiagram library as names for your own templates.

// creating SVG template
diagram.flowShapes.customShape = function(config) {     var svg = '<svg width="'+ config.width +'" height="'+ config.height +
                            '" viewBox="0 0 '+ config.width +' '+ config.height +
                            '" fill="none" xmlns="http://www.w3.org/2000/svg">';
        svg += '<rect width="'+ config.width +'" height="'+ config.height +
                            '" fill="'+ config.fill +'"/>';
        svg += '</svg>';
    return svg;
};

The function will return SVG template.

or

// creating HTML template
diagram.flowShapes.customShape = function(config) {
    return `
        <section style="width:${config.width}px; 
            height:${config.height}px; background: ${config.fill}">
        <span style="font-size:${config.fontSize}px; 
            color:${config.fontColor}">${config.text}</span>
        </section>
    `
};

The function will return HTML template.

  • set the new template for a shape via the type attribute of the configuration object of the shape while preparing a data set for loading into Diagram
var flowShapeData = [
    {
        "id": "shape",
        "type": "customShape",         "text": { 
            title: { text: "Shape", "fontSize": 16, width: 45, 
                        lineHeight: 18, paddingTop: 12 },
            firstLine: "draw ()",
            secondLine: "resize ()",
            thridLine: "rotate ()"
        },
        "x": 200,
        "y": 0,
        "fill": "#ceefe1",
        "stroke": "#B8C6D6",
        "extraLinesStroke": "#0AB169",
        "width": 140,
        "height": 140,
        "strokeWidth": 2,
        "fontColor": "#4D4D4D",
        "fontSize": 14,
        "textAlign": "center",
        "lineHeight": 20,
        "fontStyle": "normal",
        "textVerticalAlign": "center",
        "angle": 0,
        "strokeType": "line"
    },
    {
        "id": "triangle",
        "type": "customShape",         "text": { 
            title: { text: "Triangle", "fontSize": 16, width: 57, paddingTop: 12 },
            firstLine: "draw ()"
        },
        "x": 200,
        "y": 220,
        "fill": "#ceefe1",
        "stroke": "#B8C6D6",
        "extraLinesStroke": "#0AB169",
        "width": 140,
        "height": 90,
        "strokeWidth": 2,
        "fontColor": "#4D4D4D",
        "fontSize": 14,
        "textAlign": "center",
        "lineHeight": 18,
        "fontStyle": "normal",
        "textVerticalAlign": "center",
        "angle": 0,
        "strokeType": "line"
    },
    {
        "id": "rectangle",
        "type": "customShape",         "text": {
            title: { text: "Rectangle", "fontSize": 16, width: 70, 
                        lineHeight: 18, paddingTop: 12 },
            firstLine: "draw ()",
            secondLine: "get/set width",
            thridLine: "get/set height"
        },
        "x": 400,
        "y": 220,
        "fill": "#ceefe1",
        "stroke": "#B8C6D6",
        "extraLinesStroke": "#0AB169",
        "width": 140,
        "height": 156,
        "strokeWidth": 2,
        "fontColor": "#4D4D4D",
        "fontSize": 14,
        "textAlign": "center",
        "lineHeight": 20,
        "fontStyle": "normal",
        "textVerticalAlign": "center",
        "angle": 0,
        "strokeType": "line"
    }
];

You can specify the text attribute as an object while creating a shape with a custom type.

  • load the prepared data set into Diagram
diagram.data.parse(flowShapeData);

Connectors Configuration

The look and the way of connecting shapes is defined by the configuration of the connector objects. You can:

  • specify the starting and ending shapes;
  • set the type of the connector line and the arrow;
  • define particular sides of shapes that should perform as the initial/final points of the connector line.



Related sample:  Arrow Connectors - DHTMLX Diagram

Properties of a connector object

A connector object can have the following properties:

  • id - (string/number) the id of a connector;
  • from - (string/number) the id of the parent shape;
  • to - (string/number) the id of the child shape;
  • type - (string) the type of the connector line: "line" (default) or "dash";
  • forwardArrow - (string) sets a forward arrow connector and defines the type of the arrow ("filled" by default);
  • backArrow - (string) sets a back arrow connector and defines the type of the arrow ("filled" by default);
  • fromSide - (string) the side of the shape from which connection will start ("top","bottom","left","right");
  • toSide - (string) the side of the shape to which a different shape will be attached ("top","bottom","left","right");
  • cornersRadius - (number) the radius of rounding corners of a connector.
var data = [
   // connectors
    {"from":"1", "to":"2", "type":"dash", "forwardArrow":"filled"},
    {"from":"2", "to":"3", "type":"dash", "toSide":"bottom", "forwardArrow":"filled"},
    {"from":"2", "to":"7.5", "type":"dash", "fromSide":"bottom", "toSide":"top", 
        "backArrow":"filled" },
    {"from":"2", "to":"3.2", "type":"dash", "fromSide":"top", "toSide":"top"},
    {"from":"3", "to":"3.1", "type":"line", "forwardArrow":"filled"},
    {"from":"3.1", "to":"3.2", "type":"line", "forwardArrow":"filled"},
    {"from":"2", "to":"4", "type":"dash", "toSide":"top", "forwardArrow":"filled"}
]

Related sample:  Wide Flow-Chart - DHTMLX Diagram

Setting the default connector type

You can set a common type for all the connectors of the diagram via the defaultLinkType property of the diagram config object:

var diagram = new dhx.Diagram("diagram_container", { 
    defaultLinkType:"line"        });

This value is applied, if the connector config doesn't contain the "type" property.

Setting type for a separate connector

Use the name of the necessary type as a value of the type attribute inside the connector object, while preparing a data set for loading into the diagram.

// data to load
var data = [
   // connectors
   {"from":"1", "to":"2", "type":"line", "forwardArrow":"filled" },
   {"from":"2", "to":"3", "type":"dash", "toSide":"bottom", "forwardArrow":"filled" },
   {"from":"2", "to":"4", "type":"dash", "toSide":"top", "forwardArrow":"filled" }
]
 
// initializing a diagram
var diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

Creating mixed Diagram

Starting from v2.2, there is a possibility to combine Diagram with Org Chart into a single Diagram. It means that you can add the Org Chart shapes to Diagram.

Related sample:  Diagram Mixed - DHTMLX Diagram

You just need to specify individual types of shapes typical either of Diagram or Org chart via the related type attribute of the data item object.

// data to load
var data = [
    // set options specific to the Org Chart shapes
    { id: 1, x: 0, y: 100, text: "Chairman & CEO", 
        type: "img-card", img: "../common/img/avatar-1.png", title: "Henry Bennett" },  
    // set options specific to the Diagram shapes    
    { id: 2, x: 35, y: 240, text: "Manager", type: "rectangle" },
    { id: 3, x: 35, y: 400, text: "Technical Director", type: "rectangle" },
    { id: 4, x: 35, y: 560, text: "Team Lead", type: "end" },
 
    { from: 1, to: 2 },
    { from: 2, to: 3 },
    { from: 3, to: 4, forwardArrow: "filled" }
];
 
// initializing a diagram
var diagram = new dhx.Diagram("diagram");
diagram.data.parse(data);

Behavior of the Org Chart shapes will be the same as behavior of the Diagram shapes.

It is also possible to create mixed Org Chart. See the Creating mixed Org Chart article.

Back to top