gistfile1.js

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();
    },