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.
http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS
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!