npm.devtool.tech
👏 You can access angularjs-flowchart package with using angularjsFlowchart variable in browser devtools!
AngularJS-FlowChart ===================

basic

package
Npm Version
Node Version

popularity

Star
Npm Weekly Downloads
Jsdeliver Month Downloads
Dependents Pkg
Dependents Repo

size

Code Size
Publish Size
Install Size
Minified Size
Gzip Size

quality

Open Issues
Tree Shaking Support
Type Support
Last Commit

health

Package health
Dependency Count
Outdated Dep
Vulnerablities

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!