Skip to main content

Diagram initialization

In this article we will discuss the stages of adding DHTMLX Diagram on a page. This process presupposes several simple steps:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="codebase/diagram.js"></script>	
    <link rel="stylesheet" href="codebase/diagram.css">
</head>

<body>
    <div id="diagram_container"></div>
    <script>
        // preparing diagram data
        const data = [ 
            { 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" },
            { from: 1, to: 2 },
            { from: 2, to: 3 }
            // more objects
        ];

        // creating DHTMLX Diagram
        const diagram = new dhx.Diagram("diagram_container", {
            // config options
        });

        // loading data into the diagram
        diagram.data.parse(data);
    </script>
</body>
</html>

Including required code files​

To create Diagram, you need to include 2 source files on your page:

  • diagram.js
  • diagram.css

Make sure that you set correct relative paths to these files:

<script type="text/javascript" src="../codebase/diagram.js"></script>	
<link rel="stylesheet" href="../codebase/diagram.css">

The structure of DHTMLX Diagram package is the following:

  • sources - the source code files of the library. The files are not minified and easy-to-read. The package is mostly intended to be used for component's debugging
note

Note that the Trial version of the Diagram library doesn't contain the sources folder.

  • samples - the code samples
  • codebase - the packed code files of the library. These files are much smaller and intended for use in production
info

In your apps you need to use files from the codebase folder

Initializing Diagram​

You can initialize a Diagram in a container, in the document body, or in a layout cell.

Initialization in a container​

To initialize a diagram in a container, use the dhx.Diagram constructor and pass the following two parameters to the constructor function:

  • a container to place a Diagram into, let's give it the "diagram_container" id:
index.html
<div id="diagram_container"></div>
  • an object with the configuration properties. If this argument is not passed to the constructor, the default settings will be applied
index.js
const diagram = new dhx.Diagram("diagram_container", {
    type: "default" // "default" | "org" | "mindmap"
});

Initialization in the document body​

It is possible to skip setting a container for Diagram and to add it right into the document's body:

const diagram = new dhx.Diagram(document.body, {
    type: "default" // "default" | "org" | "mindmap"
});

Initialization in a layout cell​

You can also initialize a diagram inside a Layout cell. In this case use null instead of a container:

const diagram = new dhx.Diagram(null, {
    type: "default" // "default" | "org" | "mindmap"
});
const layout = new dhx.Layout("layout", {
    cols: [
        {
            id: "diagram"
        }
    ]
});

layout.getCell("diagram").attach(diagram);

Configuration properties​

To change the configuration of a diagram, you can specify the desired property in the config object passed as a second parameter of the constructor function.

const diagram = new dhx.Diagram("diagram_container", {
    scale: 0.7,
    // other config options
});

See the full list of configuration properties of Diagram.

Related sample: Diagram Editor. Default mode. Wide flowchart

Alternatively, you can get access to some option and set/modify its value via the diagram config object. Don't forget to call the paint() method to re-render the diagram with a new configuration:

const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

diagram.config.scale = 0.7;
diagram.paint();

Loading data into Diagram​

Detailed information on loading data into DHTMLX Diagram is given in the Loading and Storing Data article.