Creating Diagram on a Page

After installing Diagram, you can initialize in on a page and provide the desired configuration.


The minimum configuration required to start working with Diagram is the following:

  data: [
    { id:"1", value:"Managing Director"},
    { id:"1.1", value:"Base Manager"},
    { id:"1.1.1", value:"Store Manager" },
    // other blocks
  links: [
    { source:"1", target:"1.1"},
    { source:"1.1", target:"1.1.1"},
    // other links
  // ...

Related sample:  Diagram: Basic

The data property stores a flat array of block items that are to be rendered on the chart. Meanwhile the links array stores the connectors (links) between these block items.

Diagram can work with the JSON and XML formats, but keep in mind that, if the incoming data are in XML, you need to specify the datatype property passing "xml" as its value:

  datatype: "xml",   data: "remote/data.xml", 
  links: "remote/links.xml",
  // ...

Main Configuration

Below you can find main configuration properties of Diagram:

  • url (string) - a URL to load blocks from
  • data (string,array) - an array of blocks for graphing or XML string
  • links (string, array, object) - a URL to load links from or an array with link objects or a DataCollection
  • shapes (array) - stores configuration of shapes
  • autoplace (boolean) - defines whether to place blocks automatically. true by default
  • root (string, number) - ID of the root item for autoplacement
  • item (object) - defines common settings for all the blocks
  • linkItem (object) - defines common settings for all the links
  • treePadding (number) - defines padding between separate trees, if any
  • padding (number) - defines padding for all four sides of the widget. 20px by default

See the full list of available properties in the API reference.

Block Configuration

Block items are defined in the data array or loaded from the remote source specified in the url property. Each block is an object with the following fields:

  • width (number) - width of the block
  • height (number) - height of the block
  • x (number) - defines the horizontal position of the block. Applicable if autoplacement is disabled
  • y (number) - defines the vertical position of the block. Applicable if autoplacement is disabled
  • template (string, function) - template for the block content
  • type (string) - type of the block shape
  • css (string, function) - CSS class name or a template function that returns class name for blocks.

You can configure each block individually (e.g. inside the data array) or provide common settings for all blocks at once via the item property of Diagram:

  links: [/* link objects */],
  item: {           
    width: 70,     
    height: 30,
    // define commom config for all blocks
    type: "action",
    css: "myCss",

Note, that by default a block is a simple rectangle with no styling or SVG shape:

Read on how to utilize built-in shapes, style them or create custom ones in the dedicated article.

Back to top