flowchart-core

小巧、精悍的 svg 库，可用于快速绘制多样复杂的流程配置和关系拓扑图。

特点

可配置两种模式：连接模式&渲染模式

连接模式：快速开始流程图配置

渲染模式：快速绘制拓扑关系图

Install

NPM

 $ npm install flowchart-core

Yarn

 $ yarn flowchart-core

Layout

Topology

查看 Demo | 查看示例代码

import { RSGraph } from 'flowchart-core';
const nodes = [
    {
        id: 'root',
        children: ['node1', 'node2'],
        title: '开始',
        desc: '1',
        parent: null,
    },
    {
        id: 'node1',
        children: [],
        title: '进行中',
        desc: '2',
        parent: 'root',
    },
    {
        id: 'node2',
        children: [],
        title: '结束',
        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, // 默认为 false
    direction: 'x-axis', // x-axis || y-axis 默认为 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

查看 Demo

Mount

mount with global

<!-- html -->
<svg id="svg-container"></svg>

import { Core, Node } from 'flowchart-core';
// 实例化 Core.
const core = new Core('#svg-container', {
    style: {
        width: 1000,
        height: 600,
        border: '1px dashed #000',
    },
    mode: 'link-mode',
});
// 定义 node container 宽 和 高.
const width = 140;
const height = 70;
// 实例化 Node.
const node = new Node({
    position: {
        x: 100,
        y: 50,
    },
    style: {
        width,
        height,
        strokeWidth: 2,
        stroke: 'black',
        cursor: 'grab',
        rx: 10,
    },
});

// 开启缩放
core.zoom();

// 增加节点至svg中
core.addNode(node);

API Reference

new Core(selectors, options)

属性	类型	描述	必须
selectors	CSS selectors	Svg DOM 元素选择器名称	1
options	`coreOptions`	core 配置选项	1

coreOptions

类型: { style: {}, line: {}, linkDot: {}, mode: 'render-mode' }

参数:

属性	类型	描述	必须
style	stylesheet	css 样式	1
line	lineObject	连接路径配置	0
linkDot	linkDotObject	连接点配置	0
mode	`String`	(link-mode)连接模式. (render-mode)渲染模式.	1

lineObject

连接路径对象.

属性	类型	描述	必须
style	stylesheet	css 样式	0
arrow	arrowObject	连接线箭头样式	0

linkDotObject

目前 仅 可以使用下表中的样式

属性	类型	描述
r	radius	<circle> 属性 `r` 半径值
fill	fill color	色值
stroke	stroke color	色值
strokeWidth	stroke width	像素宽
display	css display	display 值

arrowObject

属性	类型	描述	必须
style	`stylesheet`	css 样式	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)

属性	类型	描述	必须
config	nodeConfig	`节点配置`	1

nodeConfig

类型: { style: {}, position: { x, y }, html: { meta } }
参数:

属性类型描述必须

style stylesheet css 样式 1

position positionObject 节点在 Svg 容器中的位置 1

html htmlObject html 元素 1

positionObject

属性类型描述必须

x x axis MouseEvent.clientX 1

y y axis MouseEvent.clientY 1

htmlObject

属性类型描述必须

meta DomInstance html 元素 1

Usage:

const config = {
    position: {
        // 节点在Svg容器中的位置.
        x: 100,
        y: 150,
    },
    style: {
        width: 140,
        height: 70,
    },
    html: {
        meta: '<div>...</div>', // html 元素
    },
};

new Edge(config)

prop	type	desc	must
config	edgeConfig	`edge config`	0

edgeConfig

类型: { style: {} }
参数:

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 选择字符串	1
config	rsGraphConfig	rsgraph 配置项	0

rsGraphConfig

类型: { data: [], zoom: true, coreOptions: {} }

参数:

prop	type	desc	must
data	`Array`	node 间关系数据	1
zoom	`Boolean`	是否开启缩放功能	0
direction	`String`	确认拓扑方向是横向还是纵向	0
coreOptions	coreOptions	core 类配置项	0

Usage:

const config = {
    data: nodes,
    zoom: true, // 默认为 false
    direction: 'x-axis', // x-axis || y-axis 默认为 y-axis 即纵向拓扑
    coreOptions: {
        style: {
            borderTop: '1px dashed #000',
            overflow: 'scroll',
        },
        linkDot: {
            display: 'none', // 此时默认 display: none
        },
        mode: 'link-mode', // 此时设置 link-mode 将不会生效
    },
};

Methods

Core Methods

属性	类型	描述
addNode(node)	`Function`	在 Svg 容器中加入节点
addEdge(edge, config)	`Function`	在 Svg 容器中加入路径，用以描述节点之间关系。必需传路径配置项，仅在渲染模式中使用 `config: { source, target, dotLink, dotEndLink }`
deleteNode(node)	`Function`	删除节点数据并从 SVG 容器中移除节点
deleteEdge(edge)	`Function`	删除连接路径数据并从 SVG 容器中移除路径
showSvgElement(svgElement, type)	`Function`	显示 SVG 元素。枚举值为“node”或“edge”
hiddenSvgElement(svgElement, type)	`Function`	隐藏 SVG 元素。枚举值为“node”或“edge”
zoom()	`Function`	开启缩放功能，开启后 mode 自动变为 render-mode，渲染模式下不支持节点连接及节点拖拽
zoomClose()	`Function`	关闭缩放功能，关闭后 mode 自动变为 Core.options.mode 值

Usage:

// eg. 如何在core实例中插入一条线.
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`	更改 `position` 属性值，传入 `positionObject`

Usage:

// eg. 如何在创建node后，动态改变其position
const coreInstance = new Core('#svg-container', { ... });
const nodeInstance = new Node({ ... });
nodeInstance.changePosition({
    x: 130,
    y: 100,
});

Class Attributes

通过这些暴露参数可以获得更复杂的效果

`Core`

参数:

属性	类型	描述
container	`SvgElement<svg>`	Svg Dom
nodes	`Array<Object>`	node dom list
edges	`Array<Object>`	edge dom list
nodeG	`SvgElement<g>`	<g> tag. nodes 的容器
edgeG	`SvgElement<g>`	<g> tag. edges 的容器

`Node`

参数:

属性	类型	描述
id	`String`	unique node id
node	`SvgElement<g>`	节点容器 <g>. 作为 Dom 节点使用. `可访问它上的所有dom属性值`
html	`String`	`html 元素嵌入` 在节点内部
style	`css stylesheet`	节点容器样式

Usage:

// eg. 如何使得一个节点实例显示或隐藏.
const coreInstance = new Core('#svg-container', { ... });
const nodeInstance = new Node({
    position: {
        x: 100,
        y: 100,
    },
    style: {
        width,
        height,
    },
});
const operatorType = 'node';
// 隐藏.
coreInstance.hiddenSvgElement(nodeInstance, operatorType);
// 显示.
coreInstance.showSvgElement(nodeInstance, operatorType);

`Edge`

参数:

属性	类型	描述
id	`String`	unique edge id
edge	`SvgElement<g>`	edge 容器 <g>
source	`String`	连接源节点 ID
target	`String`	连接目标节点 ID
dotLink	`String`	连接点起始位置: top \| bottom\| left \| right
dotEndLink	`String`	连接点终止连接位置: top \| bottom \| left \| right
lineData	`String`	连接路径数据， <path> 属性 `d`

Usage:

// eg. 创建edge实例并添加至svg容器中
const coreInstance = new Core('#svg-container', { ... })
const edgeInstance = new Edge({
    style: {
        stroke: 'deepskyblue',
    },
});
// 关键步骤.
coreInstance.addEdge(edgeInstance, {
    source: sourceNode.id,
    target: targetNode.id,
    dotLink: 'bottom',
    dotEndLink: 'top'
});

Example

Author

TimRChen

属性	类型	描述	必须
x	`x axis`	MouseEvent.clientX	1
y	`y axis`	MouseEvent.clientY	1

Files

README_CN.md

Latest commit

History

README_CN.md

File metadata and controls

flowchart-core

特点

Install

NPM

Yarn

Layout

Topology

查看 Demo | 查看示例代码

Flowchart

查看 Demo

Mount

mount with global

API Reference

new Core(selectors, options)

coreOptions

类型: { style: {}, line: {}, linkDot: {}, mode: 'render-mode' }

参数:

lineObject

linkDotObject

目前 仅 可以使用下表中的样式

arrowObject

Usage:

new Node(config)

nodeConfig

类型: { style: {}, position: { x, y }, html: { meta } }

参数:

positionObject

htmlObject

Usage:

new Edge(config)

edgeConfig

类型: { style: {} }

参数:

Usage:

new RSGraph(selectors, config)

rsGraphConfig

类型: { data: [], zoom: true, coreOptions: {} }

参数:

Usage:

Methods

Core Methods

Usage:

Node Methods

Usage:

Class Attributes

Core

参数:

Node

参数:

Usage:

Edge

参数:

Usage:

Example

推荐查看例子 (如何在渲染模式中内嵌自定义html元素)

Author

目前 `仅` 可以使用下表中的样式

`Core`

`Node`

`Edge`

推荐查看例子 (`如何在渲染模式中内嵌自定义html元素`)