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.

Click here to support my work

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!