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