Diagram Customization

You can easily customize the default styling of a diagram shape or its content and change the look of connectors both via related CSS classes and by using various attributes inside the shape object.

Styling shapes via CSS

  • To change the style of the shape container, redefine the .dhx_diagram_flow_item CSS class. To modify the color of the text in a shape, use the text element selector in addition (see example below).
  • To change the style of the shape, redefine the .dhx_diagram_flow_shape CSS class.
  • To change the style of the connector container, redefine the .dhx_diagram_connector CSS class.
  • To change the style of the connector arrow, redefine the .dhx_diagram_arrow CSS class.
  • To change the style of the connector line, redefine the .dhx_diagram_line CSS class.
  • To modify the look of the connectors between shapes, you need to define a CSS class with desired attributes and set its name in the configuration object of the connector.

Please note that a shape represents an SVG element. Thus, you can only use CSS properties applied to an SVG element to define the style of a connector line.

For example, you can stylize a diagram as shown in the image below:

by redefining the corresponding CSS classes of the diagram elements:

<style>
    /*the text color*/
    .dhx_free_diagram .dhx_diagram_flow_item text{
        fill:#FFF;
    }
 
    /*the colors of a shape and its outline*/
    .dhx_free_diagram .dhx_diagram_flow_shape{
        fill:#478D99;
        stroke:none;
    }
 
    /*the color of the "decision" shape type*/
    .decision .dhx_diagram_flow_shape{
        fill:#F7D768;
    }
 
    /*the color of the "start" shape type*/
    .start .dhx_diagram_flow_shape{
        fill:#FE9998;
    }
 
    /*the color of the connector outline*/
    .dhx_free_diagram .dhx_diagram_line{
        stroke: #7D8495;
    }
 
    /*the colors of the arrow and its outline*/
    .dhx_free_diagram .dhx_diagram_arrow{
        stroke:#7D8495;
        fill:#7D8495;
    }
</style>
 
<script>
 var dataset = [
    { "id":"start", "x": 200, "y": 0, "type": "start", "text": "Start", "css":"start"},
    { "id":"1", "x": 200, "y": 120, "text": "Call Client and \n set-up Appointment", 
        "type": "process" },
    { "id":"2", "x": 200, "y": 240, "text": "", "type": "decision", css: "decision" },
    { "id":"3", "x": 20, "y": 360, "text": "Prepare \n a Conference Room", 
        "type": "process" },
    { "id":"4", "x": 380, "y": 360, "text": "Prepare a Laptop", "type": "process" },
    { "id":"5", "x": 200, "y": 480, "text": "Meet with \n the Client", 
        "type": "process" },
 
    // connectors
    { "from":"1", "to":"2", "type":"line", "forwardArrow":"filled" },
    { "from":"2", "to":"3", "type":"line", "forwardArrow":"filled", "toSide":"top" },
    { "from":"2", "to":"4", "type":"line", "forwardArrow":"filled", "toSide":"top" },
    { "from":"3", "to":"5", "type":"line", "forwardArrow":"filled" },
    { "from":"4", "to":"5", "type":"line", "forwardArrow":"filled" },
    { "from":"5", "to":"6", "type":"line", "forwardArrow":"filled" }
 ]
 
 var diagram = new dhx.Diagram("diagram_container");
 diagram.data.parse(dataset);
</script>

Related sample:  Activity Diagram

Styling shapes and connectors via object properties

A shape and connector objects provide a wide range of properties that you can use to modify the look and feel of shapes and connectors right in the diagram configuration. See the full list of shape object properties and connector object properties.

There is an example of a diagram stylized via the configuration properties of shapes and connectors objects:

And the related code is given below:

var dataset = [
  // shapes
  { "id":"start", "x":200, "y":0, "type":"start", "text":"Start", "stroke":"#f7a90e", 
        "strokeWidth":2, "fill":"#FFD700", "fontColor":"#4c4c4c", "fontSize":16,},
  { "id":1, "x":200, "y":120, "text":"Call Client and \n set-up Appointment", 
        "type": "process", "fill":"#9462C4", "fontColor":"#f9fcff"},
  { "id":2, "x":200, "y":240, "text":"", "type":"decision", "stroke":"#3a6645", 
        "fill":"#9cd6aa", "strokeDash":"10", "fontColor":"#f9fcff"},
  { "id":3, "x":20, "y":360, "text":"Prepare \n a Conference Room", "type":"process", 
        "fill":"#9462C4", "fontStyle":"italic", "fontColor":"#f9fcff" },
  { "id":4, "x":380, "y":360, "text":"Prepare a Laptop", "type":"process", 
        "fill":"#9462C4", "fontStyle":"italic", "fontColor":"#f9fcff" },
  { "id":5, "x":200, "y":480, "text":"Meet with \n the Client", "type":"process", 
        "fill":"#9462C4", "fontColor":"#f9fcff" },
 
  // connectors
  { "from": "start", "to": 1, "type": "line", "forwardArrow":"filled", 
        "stroke":"#8493a3"},
  { "from":1, "to":2, "type": "line", "forwardArrow":"filled", "stroke":"#8493a3" },
  { "from":2, "to":3, "type":"line", "forwardArrow":"filled", "toSide":"top", 
        "cornersRadius":10, "stroke":"#8493a3" },
  { "from":2, "to":4, "type":"line", "forwardArrow":"filled", "toSide":"top", 
        "cornersRadius":10, "stroke":"#8493a3" },
  { "from":3, "to":5, "type":"line", "forwardArrow":"filled", "cornersRadius":10, 
        "stroke":"#8493a3"},
  { "from":4, "to":5, "type":"line", "forwardArrow":"filled", "cornersRadius":10, 
        "stroke":"#8493a3" },
  { "from":5, "to":6, "type":"line", "forwardArrow":"filled" },
]
Back to top