start

Just as a diagram can simply explain a complex idea, a flow chart can clearly visualize the organization, workflow and other complex hierarchies. In the next series of articles, you will develop a flowchart application from 0 to 1. If it’s helpful for your work or if you’re interested in a graphic editing engine, please settle down and read this series. You’ll be pleasantly surprised.

Technology selection

When it comes to drawing capabilities, the Web has two main implementations: Canvas and SVG. Let’s see how they differ:

plan Graphics customization capability To fit the difficulty performance
Canvas Customizing graphics can be complicated higher The performance of large data volume scenarios is outstanding
SVG Based on DOM, graphics customization ability is strong The lower The performance of scenarios with large data volumes is poor

Take a look at the front-end community open source solution:

jTopo

Jtopo is a development kit for relational and topological graphical interface completely based on HTML5 Canvas. Official website: http://www.jtopo.com/ Advantages: domestic, simple documentation, superior performance disadvantages: No open source code, no update in 2015, high cost to use in modern frameworks such as Vue/React/Angular

Vis.js

Vis.js is a dynamic visualization library developed based on HTML5 Canvas. The library is designed to be easy to use and handle a large amount of dynamic data. Official website: https://visjs.org/ Advantages: open source and free, superior performance, rich functions. Disadvantages: English documents, high cost of starting, weak ability of node customization

LogicFlow

Brief introduction: front-end solution focusing on process visualization official website: http://logic-flow.org/ Advantages: it has the common functions of flow chart application, strong expansibility disadvantage: the built-in connection function is weak, it is troublesome to customize complex nodes

Jsplumb

Introduction: jsPlumb is a more powerful graphics component’s official website: https://jsplumbtoolkit.com/ advantage: rich, support a variety of custom actions Disadvantages: points paid version and community edition, and a weak function to community edition

Joint

JoinJS is an open source front-end framework, which supports drawing all kinds of flow charts and workflow diagrams. Rappid is the commercial version of Joint, which provides some stronger plugins. Official website: https://www.jointjs.com/ Advantages: Very complete, easy to use. Disadvantages: poor layout ability, mediocre node customization ability

AntV G6

Summary: G6 is a graph visualization engine. It provides the figure drawing, layout, analysis, interaction, animation and so on the basis of map visualization capabilities Website: https://g6.antv.vision/zh/ advantage: the function is complete, strong expansibility, good performance, support a large number of layout algorithm faults: node customization capability

AntV X6

Introduction: X6 is a graph editor AntV engine, provides a set of out-of-the-box interaction components and easy-to-use node customization capability, convenient we fleetly DAG diagram, ER diagram, flow chart and other application website: https://x6.antv.vision/zh advantages: Node is easy to customize, support React/Vue node, low cost to start, support a lot of layout algorithm disadvantages: SVG based, mediocre performance

The last

Graphics customization ability, low starting cost is we need to focus on the place to consider, on the other hand, the flowchart scene, do not need to render a large number of nodes, so X6 is more suitable to complete our flowchart application.

  1. Source: Portal
  2. Remember to star the X6 warehouse