flowchart-core
A tiny svg javascript lib, Ability to quickly draw flowchart and topology graph.
Advantage
Two configurable modes: link-mode and render-mode.
-
link-mode:
quickly
start flowchart config. -
render-mode:
quickly
drawing topological relationships.
Install
NPM
$ npm install flowchart-core
Yarn
$ yarn flowchart-core
Layout
Topology
Check Demo | Get Usage
// create topology graph, just use one statement.;const nodes = id: 'root' children: 'node1' 'node2' title: 'start' desc: '1' parent: null id: 'node1' children: title: 'doing' desc: '2' parent: 'root' id: 'node2' children: title: 'end' desc: '3' parent: 'root' ; // create node div dom element. this just a case.nodes; const config = data: nodes zoom: true // default is false direction: 'x-axis' // x-axis || y-axis. default value is 'y-axis' coreOptions: style: borderTop: '1px dashed #000' overflow: 'scroll' line: style: stroke: 'deepskyblue' arrow: style: fill: '#888' viewBox: '0 0 18 18' linkDot: display: 'none' // default is display: none mode: 'link-mode' // set link-mode will not work. ; const graph = '#svg-container' config;
[warning
] Add data-rsgraph-id
attribute to the DOM element of node before using it.
Flowchart
Check Demo
Mount
mount with global
<!-- html -->
;// initial Core.const core = '#svg-container' style: width: 1000 height: 600 border: '1px dashed #000' mode: 'link-mode';// define node container width & height.const width = 140;const height = 70;// initial Node.const node = position: x: 100 y: 50 style: width height strokeWidth: 2 stroke: 'black' cursor: 'grab' rx: 10 ; // zoom graphcore; // add node to containercore;
API Reference
new Core(selectors, options)
prop | type | desc | must |
---|---|---|---|
selectors | CSS selectors | Svg DOM selector name | 1 |
options | coreOptions | core config options | 1 |
coreOptions
-
#### Type: { style: {}, line: {}, linkDot: {}, mode: 'render-mode' }
-
#### Arguments:
prop type desc must style stylesheet css style 1 line lineObject link path config 0 linkDot linkDotObject link dot config 0 mode String link-mode. render-mode. 1 ##### lineObject
link line props.
prop type desc must style stylesheet css style 0 arrow arrowObject line arrow config 0 ##### linkDotObject
Only
the following table styles can be used.prop type desc must r radius <circle> attr r
radius0 fill fill color color 0 stroke stroke color color 0 strokeWidth stroke width px 0 display css display display value 0 ##### arrowObject
prop type desc must style stylesheet
css style 0 viewBox String
svg viewBox 0 -
#### Usage:
const options =style:width: '100vw'height: '100vh'border: '1px dashed #000'line:style:stroke: 'deepskyblue'arrow:style:fill: 'deepskyblue'viewBox: '0 0 18 18'd: 'M1,2 L8,6 L1,10 Z'linkDot:r: 2fill: 'deepskyblue'stroke: 'deepskyblue'strokeWidth: 2;
new Node(config)
prop | type | desc | must |
---|---|---|---|
config | nodeConfig | node config |
1 |
nodeConfig
-
#### Type: { style: {}, position: { x, y }, html: { meta } }
-
#### Arguments:
prop type desc must style stylesheet css style 1 position positionObject node position in svg 1 html htmlObject 1 1 ##### positionObject
prop type desc must x x axis
MouseEvent.clientX 1 y y axis
MouseEvent.clientY 1 ##### htmlObject
prop type desc must meta DomInstance
Dom element 1
-
#### Usage:
const config =position:// node position in svg.x: 100y: 150style:width: 140height: 70html:meta: '<div>...</div>' // html template.;
new Edge(config)
prop | type | desc | must |
---|---|---|---|
config | edgeConfig | edge config |
0 |
edgeConfig
-
#### Type: { style: {} }
-
#### Arguments:
prop type desc must style stylesheet
css style 1
-
#### Usage:
const config =style:stroke: 'deepskyblue';
new RSGraph(selectors, config)
prop | type | desc | must |
---|---|---|---|
selectors | CSS selectors | css selectors | 1 |
config | rsGraphConfig | rsgraph config | 0 |
rsGraphConfig
-
#### Type: { data: [], zoom: true, coreOptions: {} }
-
#### Arguments:
prop type desc must data Array
node relation data 1 zoom Boolean
zoom in or zoom out 0 direction String
change the direction of topological 0 coreOptions coreOptions core config options 0
-
#### Usage:
const config =data: nodeszoom: truedirection: 'x-axis' // x-axis || y-axis. default value is 'y-axis'coreOptions:style:borderTop: '1px dashed #000'overflow: 'scroll'linkDot:display: 'none' // default is display: nonemode: 'link-mode' // set link-mode will not work.;
Methods
Core Methods
prop | type | desc |
---|---|---|
addNode(node) | Function |
add node to svg container |
addEdge(edge, config) | Function |
add a path to svg container to describe the relationship between nodes, just use in render mode, config: { source, target, dotLink, dotEndLink } |
deleteNode(node) | Function |
delete node data and remove node from svg container |
deleteEdge(edge) | Function |
delete edge data and remove edge from svg container |
showSvgElement(svgElement, type) | Function |
show a svg element. enum value is 'node' or 'edge' |
hiddenSvgElement(svgElement, type) | Function |
hidden a svg element. enum value is 'node' or 'edge' |
zoom() | Function |
make graph zoom in or zoom out. drag-and-drop are not supported after called zoom() |
zoomClose() | Function |
close zoom,Core.mode value back to Core.options.mode value |
Usage:
// eg. how to appendChild a edge in core instance.const coreInstance = '#svg-container' ... ;const edgeInstance = ... ;coreInstance;
Node Methods
prop | type | desc |
---|---|---|
changePosition(position) | Function |
change node position , attribute is a positionObject |
Usage:
// eg. how to change the position attribute.const coreInstance = '#svg-container' ... ;const nodeInstance = ... ;nodeInstance;
Class Attributes
More
complex effects
can be achieved through these exposure methods.
Core
-
#### Arguments:
prop type desc container SvgElement<svg>
Svg Dom nodes Array<Object>
node dom list edges Array<Object>
edge dom list nodeG SvgElement<g>
<g> tag. nodes container edgeG SvgElement<g>
<g> tag. edges container
Node
-
#### Arguments:
prop type desc id Number
unique node id node SvgElement<g>
node container <g>. As real node to use. Accessible to all DOM attribute values on it
html String
html element embed
in node insidestyle stylesheet
node style -
#### Usage:
// eg. how to make a node instance visible or hidden.const coreInstance = '#svg-container' ... ;const nodeInstance =position:x: 100y: 100style:widthheight;const operatorType = 'node';// hidden.coreInstance;// visible.coreInstance;
Edge
-
#### Arguments:
prop type desc id Number
unique edge id edge SvgElement<g>
edge container <g> source Number
source node id target Number
target node id dotLink String
node start link dot's position: top | bottom| left | right dotEndLink String
node end link dot's position: top | bottom | left | right lineData String
link path data. <path> prop d
-
#### Usage:
// eg. create edge instance & append child on svgconst coreInstance = '#svg-container' ...const edgeInstance =style:stroke: 'deepskyblue';// key step.coreInstance;
Example
Recommand to check more example (how to embed self define div node
)
- self define html embed node
- flowchart config.