Diagram Shapes and Connectors

In this article you will find the full lists of available Diagram shapes and connectors types.

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

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;
  • 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 space between the dashes in the stroke;
  • 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);

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

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

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);
Back to top