ngFlowchart is an easy and customizable way to draw flowchart graphs using AngularJS. Its main features are:
- Native AngularJS support
- An easy way to customize the look of nodes, by writing your own template
- Automatically adjusts size to its graph
![Live Demo](liveDemo.gif)
Install ngFlowchart via bower with bower install ngFlowchart
Run gulp
in the ngFlowchart directory to start an interactive demo.
Add stylesheet:
<link rel="stylesheet" href="bower_components/ngFlowchart/dist/flowchart.css" type="text/css">
Include script:
<script src="bower_components/ngFlowchart/dist/ngFlowchart.js"></script>
Use the fc-canvas
directive to display the graph:
<fc-canvas model="model" selected-objects="flowchartselected" edge-style="line"></fc-canvas>
Add model
and selectedObjects
to your scope:
model = {
nodes: [
{
id: 1,
x: 10,
y: 10,
name: "My first node",
connectors: [
{
id: 1,
type: bottomConnector
}
]
},
{
id: 2,
x: 50,
y: 50,
name: "My seconde node",
connectors: [
{
id: 2,
type: topConnector
}
]
}
],
edges: [
{
source: 1,
destination: 2,
active: false
}
]
};
flowchartselected = [];
Your site should now show your first flowchart with two connected nodes.
{
nodes: [Node],
edges: [Edge]
}
{
id: integer,
name: string,
x: integer, // x-coordinate of the node relative to the canvas.
y: integer, // y-coordinate of the node relative to the canvas.
connectors: [Connector]
}
{
id: integer,
type: string
}
{
source: Connector.id
destination: Connector.id
active: boolean
}
model
The model.selected-objects
The selected nodes and edges as objects. Example:[{id: 1, name: "First node", {...}}, {source: 1, destination: 2}]
edge-style
"line" or "curved".automatic-resize
Iftrue
the canvas will adjust its size while node dragging and allow "endless" dragging.drag-animation
Eitherrepaint
(default) orshadow
whererepaint
repaints the whole flowchart including edges according to new position whileshadow
show the new position only by showing a shadow of the node at the new position and repaints the edges only at the end of dragging.callbacks
Object with callbacks.edgeAdded
will be called if an edge is added by ngFlowchart.edgeDoubleClick(event, edge)
will be called when an edge is doubleclicked.edgeMouseOver(event, edge)
will be called if the mouse hovers an edge.isValidEdge(sourceConnector, destinationConnector)
will be called, when the user tries to connect to edges. Returnstrue
if this is an valid edge in your application orfalse
otherwise.edgeRemoved(edge)
will be called if an edge has been removednodeRemoved(node)
will be called if a node has been removednodeCallbacks
an object which will be available in the scope of the node template. This is usefull, to register a doubleclick handler on a node or similiar things. Every method that is handed into thenodeCallbacks
will be available in the node template via thecallbacks
attribute.
Easily change the look and feel of the graph by writing your own node template. This is a simple AngularJS template registered with our NodeTemplatePath
provider:
angular.module('yourApp', ['flowchart'])
.config(function(NodeTemplatePathProvider) {
NodeTemplatePathProvider.setTemplatePath("path/to/your/template/node.html");
})
The $scope in this template includes following variables:
node
The node object from the model.modelservice
The modelservice instance of this canvas.underMouse
true
when the mouse hovers this node,false
otherwise.selected
true
if this node is selected,false
otherwise.mouseOverConnector
The connector object from the model witch is hovered by the mouse ornull
.draggedNode
The node object from the model witch is dragged.nodeCallbacks
The object you assigned tonodeCallbacks
on thecallbacks
attribute offc-canvas
.
Our Modelfactory
could contain some interesting functions for you to use.
Instantiate it with Modelfactory(model, selectedObjects)
with model and selectedObjects as references to the same objects you gave the canvas.
ngFlowchart supports Chrome, Firefox, Opera and IE10+. Safari is not supported. PRs to expand support are welcome.
Right now it is only possible to have one canvas per site, this may changes in future.
###Sponsors Thanks to BrowserStack for kindly helping us improve cross browser support.