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.
import { RSGraph } from 'flowchart-core';
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.forEach(node => {
    const { title, desc } = node;
    const body = document.querySelector('body');
    const div = document.createElement('div');
    div.setAttribute('data-rsgraph-id', node.id);
    div.setAttribute('class', 'item');
    div.innerHTML = `<div class="desc">${desc}</div><div class="title">${title}</div>`;
    body.appendChild(div);
});

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 = new RSGraph('#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 -->
<svg id="svg-container"></svg>

import { Core, Node } from 'flowchart-core';
// initial Core.
const core = new 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 = new Node({
    position: {
        x: 100,
        y: 50,
    },
    style: {
        width,
        height,
        strokeWidth: 2,
        stroke: 'black',
        cursor: 'grab',
        rx: 10,
    },
});

// zoom graph
core.zoom();

// add node to container
core.addNode(node);

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 radius 0

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: 2,
        fill: '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: 100,
        y: 150,
    },
    style: {
        width: 140,
        height: 70,
    },
    html: {
        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: nodes,
    zoom: true,
    direction: '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: none
        },
        mode: '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 = new Core('#svg-container', { ... });
const edgeInstance = new Edge({ ... });
coreInstance.addEdge(edgeInstance, {
    source: sourceNode.id,
    target: targetNode.id,
    dotLink: 'bottom',
    dotEndLink: 'top'
});

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 = new Core('#svg-container', { ... });
const nodeInstance = new Node({ ... });
nodeInstance.changePosition({
    x: 130,
    y: 100,
});

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 inside
style	`stylesheet`	node style

Usage:

// eg. how to make a node instance visible or hidden.
const coreInstance = new Core('#svg-container', { ... });
const nodeInstance = new Node({
    position: {
        x: 100,
        y: 100,
    },
    style: {
        width,
        height,
    },
});
const operatorType = 'node';
// hidden.
coreInstance.hiddenSvgElement(nodeInstance, operatorType);
// visible.
coreInstance.showSvgElement(nodeInstance, operatorType);

`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 svg
const coreInstance = new Core('#svg-container', { ... })
const edgeInstance = new Edge({
    style: {
        stroke: 'deepskyblue',
    },
});
// key step.
coreInstance.addEdge(edgeInstance, {
    source: sourceNode.id,
    target: targetNode.id,
    dotLink: 'bottom',
    dotEndLink: 'top'
});

Example

Recommand to check more example (`how to embed self define div node`)

self define html embed node

flowchart config.

Author

TimRChen

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

prop	type	desc
r	radius	<circle> attr `r` radius
fill	fill color	color
stroke	stroke color	color
strokeWidth	stroke width	px
display	css display	display value

prop	type	desc	must
x	`x axis`	MouseEvent.clientX	1
y	`y axis`	MouseEvent.clientY	1

Files

README.md

Latest commit

History

README.md

File metadata and controls

flowchart-core

Advantage

Install

NPM

Yarn

Layout

Topology

Check Demo | Get Usage

Flowchart

Check Demo

Mount

mount with global

API Reference

new Core(selectors, options)

coreOptions

Type: { style: {}, line: {}, linkDot: {}, mode: 'render-mode' }

Arguments:

lineObject

linkDotObject

arrowObject

Usage:

new Node(config)

nodeConfig

Type: { style: {}, position: { x, y }, html: { meta } }

Arguments:

positionObject

htmlObject

Usage:

new Edge(config)

edgeConfig

Type: { style: {} }

Arguments:

Usage:

new RSGraph(selectors, config)

rsGraphConfig

Type: { data: [], zoom: true, coreOptions: {} }

Arguments:

Usage:

Methods

Core Methods

Usage:

Node Methods

Usage:

Class Attributes

Core

Arguments:

Node

Arguments:

Usage:

Edge

Arguments:

Usage:

Example

Recommand to check more example (how to embed self define div node)

Author

`Core`

`Node`

`Edge`

Recommand to check more example (`how to embed self define div node`)