Using ace text editor

[dvdcastro]

Hello,

Have you thought of including an optional editor?

I've been using it with Ace (Ajax.org Cloud9 Editor) and with an angular module as well.

    <div id="flow-ace-code" ng-model="flowAceCode",style="height:500px;" ui-ace="{theme:'twilight',mode:'html',onLoad: aceFlowCodeLoaded, onChange: aceFlowCodeChanged}"></div>
    <button ng-click="updateFlowChart()">Update flow chart</button>
    <div id="flowchart-div"></div>

And in an angular controller:

    var self = this;

    //- ... Your controller code

    $scope.updateFlowChart = function() {
      if($scope.flowAceCode) {
        if(self.chart) self.chart.clean();

        self.chart = flowchart.parse($scope.flowAceCode);

        self.chart.drawSVG('flowchart-div', {
          ...
        });
      } else if(self.chart)
        self.chart.clean();
    };

The power of this library relies on the fact that you can write your own syntax highlighter.

Cheers!

[adrai]

PR's are welcome ;-)