Cutting edge: What does a flowchart designer need? One is the drawing ability of graphs, drawing nodes of various shapes (rectangles, circles, polygons) and lines based on SVG or Canvas, the other is the interaction between graphs, including drag and drop, lines between nodes, etc., and the last is the convenience of canvas panels, which includes: For example, the grid function in PS, its lines, step rollback, canvas scalability, shortcut buttons, etc., what open source solution does the front-end community have to help us quickly develop a flowchart designer of our own?

1. Drawing ability

When it comes to drawing capabilities, there are two main implementations of the Web: Canvas and Svg. Let’s look at the differences between the two

Canvas SVG
Action object Pixel-based (dynamic bitmap) Based on graphic elements
drive Script-driven only Supports footsteps and CSS
Event interaction User interaction to pixels (x, Y) User interaction with graphic elements
performance Suitable for small area and large number of application scenarios Suitable for large area, small amount of application area

Flowchart based scenario: there are not too many nodes, plus the nodes are static diagrams, not too much dynamic rendering, then SVG may be more suitable, and SVG has a high cost guarantee, but please choose carefully in the case of large data or primitives, after all, the performance will be poor

🌲 Recommended reading:

  • What are the advantages of SVG and HTML5 canvas, and which is more promising?
  • Getting started with SVG – How to write SVG by hand

2. Existing flowchart designer

There are many off-the-shelf flowchart designers that are suitable for common application scenarios

  • Processon the recommended
  • Million figure
  • Microsoft Visio

However, off-the-shelf flow chart designers on the market only support common application scenarios, how to expand based on our own business product line becomes a problem?

Here’s an example: Recently involved in developing a web application data integration service, involves the panel layout module, need to configure the data conversion adapter, such as custom some nodes to do the custom data conversion, itself is a flow diagram designer, so I did some preliminary research, research the part of the process design of open source development plan, Let’s take a look at what a normal process designer looks like from logicFlow

3. Open source process designer Web development scheme

3.1 Jsplumb

Official: jsPlumb is a powerful drawing component that provides a way to connect elements primarily on a web page. In modern browsers, it uses SVG or Canvas links

JsPlumb is an early drawing component that has a long history. It has been open source for seven years and can be used to develop flowchart designers, but it relies on jquery because it is a DOM-based library with the following core modules

  • Souce: source node
  • Target: indicates the Target node
  • Anchor: Anchor point
  • The Endpoint: the Endpoint
  • Connector: connection
  • Overlays: can be interpreted as words on a connecting line or arrows or something like that

Here is an example of these modules strung together

If you want to use it in VUE, it is also available. There is no specific introduction here

🌲 Recommended reading:

  • Jsplumb Chinese Basic course
  • Basic tutorial on using JSPLumb in VUE

3.2. Antv G6

G6 is a simple, easy to use, complete graph visualization engine, it provides a series of elegant design, easy to use graph visualization solutions on the basis of high customization capability. It can help developers build their own graph visualization, graph analysis, or graph editor applications. The website links

G6 is also optional in drawing. Canvas or SVG can be used for rendering, and the default is Canvas. In terms of visualization and interaction, G6 is outstanding

🌲 Recommended reading

  • The G6 is quick to get started
  • Vue G6 hands-on demo
  • G6 language finch document

BPMN 3.3 – js

Official introduction: a BPMN 2.0 rendering toolkit and Web modeler. It is written in JavaScript, embeds BPMN 2.0 charts into modern browsers, and does not require a server back end. This makes it easy to embed it in any Web application, making it easy for the front end to link to the flowchart designer website

What is BPMN

The Business Process Modeling Notation (BPMN) is a common and standard language for Process Modeling. It is used to draw Business flow charts to facilitate the communication and understanding of Business processes and relationships between departments.

The core of BPMN 2.0 consists of the following basic modeling elements

  • Activity: Is used to refer to an Activity to be completed and is useful by grouping it together by a process.

  • Events: Used to indicate what happened during the life cycle of a process.

  • Gateway: Used to control the flow direction.

  • Flow: A line connecting two process nodes.

Let’s take a look at the following practical example of a BPMN based business flow chart (leave process)

Bpmn-js is dependent on two important libraries as follows 👇

  • Diagram -js: Responsible for drawing graphs and lines, it provides a way to interact with these graphic elements
  • Bpmn-moddle: Enables us to read and write BPMN 2.0 architecture-compatible XML documents and access BPMN-related information behind graphs drawn on graphs and wires.

Edit sample diagrams online

Activiti is an open source workflow engine that implements the BPMN 2.0 specification, publishes designed process definitions and schedules processes through apis, but goes beyond the front end. After all, it is a super fast, super stable BPMN2.0 process engine based on Java, which is also beyond my cognitive scope 📖

🌲 Recommended reading:

  • BPMN online demo

  • A silly: the most detailed bPMN. js teaching materials – basic chapter

3.4 LogicFLow

LogicFLow is the latest process designer web solution, official introduction: LogicFLow was born out of the practice of Didi technical team in customer service business, is developed by Didi intelligent experience platform a process visualization front-end framework official website link

LogicFLow is positioned to combine business development capabilities with visual interaction capabilities

Different from jSPLumb mentioned in section 1, LogicFlow takes into account the cumbersome DOM operations and large resource consumption. Instead, it chooses the concept of MVVM framework and introduces Virtual DOM to solve the update efficiency in some scenarios. It also makes up for the possible performance problems caused by “Svg based graphics rendering” to a certain extent.

LogicFlow also satisfies the nodes and wires of the BPMN2.0 specification mentioned in the previous section

LogicFLow as the latest open source process designer solution, github open source three months ago 1000🌟, we will try LogicFLow later, and then share in the form of an article

🌲 Recommended reading:

  • logicflow vue demo

Previous popular articles 📖 :

  • Developing visual Data Screens from 0 to 1 (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (Part 2)
  • Talk about daily collaboration tools for front-end development
  • Babel configuration is stupid
  • How to better manage the Api
  • The interviewer asks you about Node
  • Front-end engineering stuff
  • Did you learn BFF and Serverless
  • Front-end operations and deployment

Hello, I am 🌲 tree sauce, please drink a cup 🍵 remember three lian oh ~

1. Remember to click a thumbs-up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨