Diagram Builder

• Introduction
• Basic Example
• Real World Example

Drag and drop diagram elements, create new tasks, draw connectors from node to node.

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Diagram Builder module.

YUI().use(
  'aui-diagram-builder',
  function(Y) {
    // code goes here
  }
);

Using Diagram Builder

Create an HTML element with a container element:

<div id="myDiagramContainer">
  <div id="myDiagramBuilder"></div>
</div>

Now create a new instance of Diagram Builder component by setting srcNode to our HTML element's selector and boundingBox to our HTML container. We should also populate our new Diagram fields with a Diagram field passing it a name, type, and xy location. Finally, let's render it!

YUI().use(
  'aui-diagram-builder',
  function(Y) {
    new Y.DiagramBuilder(
      {
        boundingBox: '#myDiagramContainer',
        fields: [
          {
            name: 'StartNode',
            type: 'start',
            xy: [10, 10]
          }
        ],
        srcNode: '#myDiagramBuilder'
      }
    ).render();
  }
);

Configuring Diagram Builder

There are some other optional parameters that you can pass to your Diagram Builder instance.

You can add available fields for Diagram Builder to use by passing an array of field objects to availableFields. These available fields can be dragged onto Diagram Builder, generating new diagram fields.

YUI().use(
  'aui-diagram-builder',
  function(Y) {
    var availableFields = [
      {
        iconClass: 'diagram-node-task-icon',
        label: 'Task',
        type: 'task'
      }
    ];

    new Y.DiagramBuilder(
      {
        availableFields: availableFields,
        boundingBox: '#myDiagramContainer',
        fields: [
          {
            name: 'StartNode',
            type: 'start',
            xy: [10, 10]
          }
        ],
        srcNode: '#myDiagramBuilder'
      }
    ).render();
  }
);

Using the connectAll method, you can set connections between fields. Simply pass the source parameter your source field and the target parameter your target field. Also, you can pass settings to your connector as an object with parameters.

YUI().use(
  'aui-diagram-builder',
  function(Y) {
    var diagramBuilder = new Y.DiagramBuilder(
      {
        boundingBox: '#myDiagramContainer',
        fields: [
          {
            name: 'StartNode',
            type: 'start',
            xy: [10, 10]
          },
          {
            name: 'EndNode',
            type: 'end',
            xy: [300, 400]
          }
        ],
        srcNode: '#myDiagramBuilder'
      }
    ).render();

    diagramBuilder.connectAll(
      [
        {
          connector: {
            name: 'TaskConnector'
          },
          source: 'StartNode',
          target: 'EndNode'
        }
      ]
    );
  }
);

There are many other field types you can use when constructing Diagram Builder, such as state, join, condition and more! And of course, each of these fields can be connected together afterward when you pass them to Diagram Builder's fields parameter and connect them with the connectAll method.

YUI().use(
  'aui-diagram-builder',
  function(Y) {
    var availableFields = [
      {
        iconClass: 'diagram-node-start-icon',
        label: 'Start',
        type: 'start'
      },
      {
        iconClass: 'diagram-node-task-icon',
        label: 'Task',
        type: 'task'
      },
      {
        iconClass: 'diagram-node-state-icon',
        label: 'State',
        type: 'state'
      },
      {
        iconClass: 'diagram-node-join-icon',
        label: 'Join',
        type: 'join'
      },
      {
        iconClass: 'diagram-node-fork-icon',
        label: 'Fork',
        type: 'fork'
      },
      {
        iconClass: 'diagram-node-condition-icon',
        label: 'Condition',
        type: 'condition'
      },
      {
        iconClass: 'diagram-node-end-icon',
        label: 'End',
        type: 'end'
      }
    ];

    new Y.DiagramBuilder(
      {
        availableFields: availableFields,
        boundingBox: '#myDiagramContainer',
        srcNode: '#myDiagramBuilder'
      }
    ).render();
  }
);