Frontiers: What does a flowchart designer need? One is the drawing ability of the graph, drawing various shapes of nodes (rectangles, circles, polygons) and lines based on SVG or Canvas, the other is the interaction between graphs, including drag and drop, connecting lines between nodes, etc., and the last is the convenience of the canvas panel, including: For example, the grid function in Photoshop, lines to it, step retractions, canvas retractable, shortcut buttons, etc. What open source solution does the front-end community have that will allow us to quickly develop our own flowchart designer?

1. Drawing ability

When it comes to drawing capabilities, there are two main implementations on the Web: Canvas and SVG. What are the differences

Canvas SVG
Action object Pixel-based (dynamic bitmap) Graphic Elements Based
drive Script-driven only Support for steps and CSS
Event interaction User interaction to pixel points (x,y) The user interacts with graphical elements
performance Suitable for small area, large number of application scenarios Suitable for large area, small amount of application area

Flowchart-based scenarios: not too many nodes, plus the nodes are static images, not much dynamic rendering, then SVG may be more suitable, and SVG has a high breakeven, but if you are using large amounts of data or pixel, please choose carefully, after all, the performance will be poor

🌲 Recommended reading:

  • What are the advantages of SVG or HTML5 Canvas, and which one is more promising?
  • Getting Started with SVG – How to Handwrite SVG

2. Existing flowchart designer

There are many flowchart designers out there that are suitable for common applications

  • Processon the recommended
  • Million figure
  • Microsoft Visio

However, off-the-shelf flowchart 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, pictured in LogicFlow

3. Open source process designer Web development scheme

3.1 Jsplumb

JSPLumb is a powerful drawing component that provides a way to connect elements on a Web page. In modern browsers, it uses SVG or Canvas technology
The website links

JsSplumb is one of the early drawing components. It has been open source since 7 years ago and can be used to develop flowchart designers. However, it relies on jQuery to use it because it is a library based on DOM wiring

  • Souce: source node
  • Target: The Target node
  • Anchor: Anchor point
  • The Endpoint: the Endpoint
  • Connector: connection
  • Overlays: This can be interpreted as words or arrows on wires and the like

Here is an example of how these modules are strung together

If you want to use it in Vue, that’s fine, but I won’t go into details here. See the recommended reading for those interested

🌲 Recommended reading:

  • Jsplumb Chinese Basic Tutorial
  • Use the JSPLumb Basic Tutorial in Vue

3.2. Antv G6

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

You can use Canvas or SVG to render, and Canvas is the default. In terms of visualization and interaction, G6 is more outstanding. After JSPLumb, we know that it is ANTV’s graphics visualization library in essence, which focuses on different things, and the core is visualization

🌲 Recommended reading

  • G6 is a quick starter
  • Vue G6 start demo
  • G6 finch document

BPMN 3.3 – js

A BPMN 2.0 rendering toolkit and Web modeler. It is written in JavaScript, embeds BPMN 2.0 diagrams into modern browsers, and does not require a server backend. This makes it easy to embed it in any Web application, allowing the front end to implement the flowchart designer as well
The website links

What the hell is BPMN

BPMN (Business Process Modeling Notation) is a generic and standard language for Process Modeling that is used to draw Business Process diagrams to better understand Business processes and interrelationships across departments, and is designed to facilitate communication and understanding of Business processes.

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

  • Activity: An Activity is used to refer to an Activity to be completed, which functions by being grouped together by processes.
  • Event: Used to indicate what happened during the lifecycle of the process.
  • Gateway: Used to control the flow of the process.
  • Flow: A line that connects two process nodes.

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

BPMN-js is dependent on two important libraries below 👇

  • Diagram -js: It is responsible for drawing graphs and lines, and provides a way to interact with these graphic elements
  • BPMN-moddle: Enables us to read and write BPMN 2.0 architecture compliant XML documents and access BPMN-related information behind the graphs and wires drawn on the graph.

Edit the sample diagram online

A quick mention of Activiti, an open source workflow engine that implements the BPMN 2.0 specification, can publish designed process definitions and schedule processes through APIs, but beyond the front end. After all, it is a JAVA based super fast, super stable BPMN2.0 process engine, also beyond my cognitive range 📖

🌲 Recommended reading:

  • BPMN online demo
  • Dumb: the most detailed BPMN. JS textbook – basic

3.4 LogicFLow

LogicFlow is the latest Web solution of process designer. LogicFlow is derived from the practice of Didi’s technical team in customer service business. LogicFlow is a front-end framework for process visualization developed by Didi Intelligent Middle Platform Experience Platform
The website links

LogicFlow is positioned to integrate business development capabilities and visual interaction capabilities

Different from JSPLumb mentioned in the first section, LogicFlow takes into account the tedious operation based on DOM and the relatively large resource consumption, and chooses the concept of MVVM framework to introduce Virtual DOM to solve the update efficiency in some scenarios. It also makes up for the rendering performance problems caused by “rendering graphics based on SVG” to a certain extent.

Also, LogicFlow satisfies the nodes and wires of the BPMN2.0 specification we mentioned in the previous section

LogicFlow is the latest open source solution for the process designer. GitHub has been open source for three months and has received 1000🌟. In the future, we will try some things with LogicFlow and then share it with you in the form of an article

🌲 Recommended reading:

  • logicflow vue demo

Hello, I am 🌲 tree sauce, would you like to drink a drink to remember three lian oh ~

1. Remember to hit the “like” button when you’re finished reading this book. It’s 👍

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. The article is on GitHub frontendThings thanks to Star✨