ngFlowchart is an easy and customizable way to draw flowchart graphs using AngularJS. Its main features are:
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="https://github.com/DaHaiz/ngFlowchart/blob/master/bower_components/ngFlowchart/dist/flowchart.css" type="text/css">
Include script:
<script src="https://github.com/DaHaiz/ngFlowchart/raw/master/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
If true
the canvas will adjust its size while node dragging and allow "endless" dragging.drag-animation
Either repaint
(default) or shadow
where repaint
repaints the whole flowchart including edges according to new position while shadow
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. Returns true
if this is an valid edge in your application or false
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 the nodeCallbacks
will be available in the node template via the callbacks
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 or null
.draggedNode
The node object from the model witch is dragged.nodeCallbacks
The object you assigned to nodeCallbacks
on the callbacks
attribute of fc-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.
Thanks to BrowserStack for kindly helping us improve cross browser support.