vnodes
Vue bare components to create svg interactive graphs, diagrams or node visual tools.
Install
Get started
Components
Vnodes components are independent and can be used only when desired. Instead of locking into a complex framework, these components are designed to be minimal and still allow to build complex applications.
Screen
Svg wrapper with zoom, panning and other features.
Node
Html wrapper for svg with additional features like, dragging and fitting contents.
Edge
Connects nodes using svg lines
Edges require node references { from: id|Object, to: String|Object }
, if nodes are refered by id(String)
an array nodes
must be passed:
Edges can take anchor information to offset their position relative to a node,
anchors format can be:
- String
'center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'cirlce', 'rect'
- Object
{ x?:Number|String, y?: Number|String, align?: String, snap?: String }
Examples of valid anchors:
Group
Surrounds a group of nodes with a rectangle, allows dragging multiple nodes.
Port
Placed inside a node, automatically offsets edges to a determined position inside the nodes html (see Ports demo).
Label
Create a label positioned relative to an edge
graph.js
Can be used to store edges and nodes.
Contains utility methods to build graphs, position nodes, remove and create nodes, edges and so on.
Styling
The simplest way to style nodes and edges is using CSS
Markers
TODO