gistfile1.js

   onRender: function() {
      var graphControl = this.graphControl = new yfiles.canvas.GraphControl.ForId('graph-canvas'),
          graph = this.graph = graphControl.graph;

      var startEvent = this.createEventNode();
      var endEvent = this.createEventNode();
      endEvent.style.characteristic = demo.bpmn.EventCharacteristic.END;

      var gatewayNode = this.createGatewayNode();

      var subprocess = this.createEventNode();
      subprocess.style.characteristic = demo.bpmn.EventCharacteristic.SUB_PROCESS_NON_INTERRUPTING;

      var task221 = this.createActivityNode('Task 2.2-1');


      var task222 = this.createActivityNode('Task 2.2-2');
      var task223 = this.createActivityNode('Task 2.2-3');

      this.graph.createEdge(startEvent, task221);
      this.graph.createEdge(task221, gatewayNode);
      this.graph.createEdge(gatewayNode, subprocess);
      this.graph.createEdge(gatewayNode, task222);
      this.graph.createEdge(subprocess, task223);
      this.graph.createEdge(task223, endEvent);
      this.graph.createEdge(task222, endEvent);

      //this.onLayout();
      this.graphControl.fitGraphBounds();
    },

    onLayout: function() {
      // The BpmnLayoutConfigurator provides information about the BPMN node and edge types to the layouter.
      var /**demo.bpmn.BpmnLayoutConfigurator*/ bpmnLayoutConfigurator = new demo.bpmn.BpmnLayoutConfigurator();
      bpmnLayoutConfigurator.prepareAll(this.graphControl.graph);

      // Create a new BpmnLayouter using a Left-To-Right layout orientation
      var /**demo.bpmn.BpmnLayouter*/ bpmnLayouter = new demo.bpmn.BpmnLayouter();
      bpmnLayouter.layoutOrientation = demo.bpmn.LayoutOrientation.LEFT_TO_RIGHT;


      //We use Layout executor convenience method that already sets up the whole layout pipeline correctly
      var /**yfiles.graph.LayoutExecutor*/ layoutExecutor = new yfiles.graph.LayoutExecutor.FromControlAndLayouter(this.graphControl, bpmnLayouter);
      layoutExecutor.duration = yfiles.system.TimeSpan.fromMilliseconds(500);
      layoutExecutor.animateViewport = true;
      layoutExecutor.tableLayoutConfigurator.horizontalLayout = true;
      layoutExecutor.tableLayoutConfigurator.fromSketch = true;
      layoutExecutor.finishHandler = (function(/**Object*/ s, /**yfiles.system.EventArgs*/ a) {
        bpmnLayoutConfigurator.restoreAll(this.graphControl.graph);
      }).bind(this);

      layoutExecutor.start();
    },

    createActivityNode: function(label) {
      var node = this.graph.createNodeWithBoundsStyleAndTag(new yfiles.geometry.RectD.FromTopLeftAndSize(yfiles.geometry.PointD.ORIGIN, new yfiles.geometry.SizeD(80, 50)), new demo.bpmn.ActivityNodeStyle(), "GroupNode");
      if (label) {
        this.graph.addLabel(node, label);
      }

      return node;
    },

    createGatewayNode: function() {
      return this.graph.createNodeWithBoundsAndStyle(new yfiles.geometry.RectD.FromTopLeftAndSize(yfiles.geometry.PointD.ORIGIN, new yfiles.geometry.SizeD(50, 50)), new demo.bpmn.GatewayNodeStyle());
    },

    createEventNode: function() {
      return this.graph.createNodeWithBoundsAndStyle(new yfiles.geometry.RectD.FromTopLeftAndSize(yfiles.geometry.PointD.ORIGIN, new yfiles.geometry.SizeD(50, 50)), new demo.bpmn.EventNodeStyle());
    },