AngularJS-FlowChart

A WebUI control for visualizing and editing flow charts.

This isn't designed to be completely general purpose, but it will be a good basis if you need an SVG flowchart and you are willing to work with AngularJS.

Code Project Article

http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

How to use it

Include the following Javascript in your HTML file:

    <script src="flowchart/svg_class.js" type="text/javascript"></script> 
    <script src="flowchart/mouse_capture_service.js" type="text/javascript"></script> 
    <script src="flowchart/dragging_service.js" type="text/javascript"></script> 
    <script src="flowchart/flowchart_viewmodel.js" type="text/javascript"></script> 
    <script src="flowchart/flowchart_directive.js" type="text/javascript"></script> 

Make a dependency on the the flowchart's AngularJS module from your application (or other module):

    angular.module('app', ['flowChart', ])

In your application (or other) controller setup a data-model for the initial flowchart (or AJAX the data-model in from a JSON resource):

    var chartDataModel = {
 
        nodes: [
            {
                name: "Example Node 1",
                id: 0,
                x: 0,
                y: 0,
                inputConnectors: [
                    {
                        name: "A",
                    },
                    {
                        name: "B",
                    },
                    {
                        name: "C",
                    },
                ],
                outputConnectors: [
                    {
                        name: "A",
                    },
                    {
                        name: "B",
                    },
                    {
                        name: "C",
                    },
                ],
            },
 
            {
                name: "Example Node 2",
                id: 1,
                x: 400,
                y: 200,
                inputConnectors: [
                    {
                        name: "A",
                    },
                    {
                        name: "B",
                    },
                    {
                        name: "C",
                    },
                ],
                outputConnectors: [
                    {
                        name: "A",
                    },
                    {
                        name: "B",
                    },
                    {
                        name: "C",
                    },
                ],
            },
 
        ],
 
        connections: [
            {
                source: {
                    nodeID: 0,
                    connectorIndex: 1,
                },
 
                dest: {
                    nodeID: 1,
                    connectorIndex: 2,
                },
            },
 
 
        ]
    };

Also in your controller, wrap the data-model in a view-model and add it to the AngularJS scope:

    $scope.chartViewModel = new flowchart.ChartViewModel(chartDataModel);

Your code is in direct control of creation of the view-model, so you can interact with it in almost anyway you want.

Finally instantiate the flowchart's AngularJS directive in your HTML:

    <flow-chart
        style="margin: 5px; width: 100%; height: 100%;"
      	chart="chartViewModel"
      	>
    </flow-chart>

Be sure to bind your view-model as the 'chart' attribute!

Have fun and please contribute!