Fork me on GitHub

Diagram Builder

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="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://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();
  }
);
Note: passing an iconClass to a new available field is optional. Diagram Builder's active fields have icons automatically supplied, but available fields will need icons passed in through the iconClass parameter.

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();
  }
);
For more information about configuration, check out our API Docs.