Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

Time:2020-11-19

background

In Alibaba cloud, there may be abstract concepts such as “data table”, “model”, “scheduling” and so on. As the front-end of alicloud, how to materialize and visualize this abstract concept to customers or other partners is particularly important.

At the same time, the incubation speed and iteration speed of the intelligent business department of Alibaba cloud are much faster than you can imagine. To sum up, it is “less people, more tedious work”. It is often seen that one or two students start to hatch a project within two weeks. At this time, various building systems in the industry can alleviate part of the workload, but when it comes to visual “choreography” and “flow chart”“ In the scenario of “relationship diagram”, it seems that we are in short supply.

Through the inventory of such scenarios supported by different businesses, the following pain points of DAG are summarized:

  • The product business logic is complex, and the form difference is big
  • It has rich styles, complex interaction and high visual quality
  • High customization and fast development speed are required

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

Solution

      Little butterfly( https://github.com/alibaba/butterfly )Based on the actual business scenario of the data intelligence business unit of Alibaba cloud, it supports the front-end diagram component library abstracted by several brother departments while covering our business requirements. Its features are as follows:

  • “Part based development”, strong customization and low entry threshold: taking advantage of the convenience of DOM, it provides powerful style customization and complex interactive customization capabilities

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

//Inherited customization
const Node = require('butterfly-dag').Node;
class ANode extends Node {
  draw(obj) {
    //"Part type" development, return the final DOM to me
  }
  //Develop your own methods at will 
}

canvas.draw({
  nodes: [{
    id: 'xxxx',
    top: 100,
    left: 100,
    Class: anode // after setting the base class, the canvas will render according to the custom class
  }]
})
  • The canvas has a wide range of general functions:Minmap, grid system, snap line, marquee, redo / undo, canvas zoom and pan, line animation, automatic layout, etc.
  • More delicate and humanized interactionIn the future, we will focus more on Intelligent Interaction:
  • Focus on some nodes & focus on canvas

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

  • Box selection is more intelligent. Control box selection interaction: touch to select or select only when completely included; control optional elements: anchor, node, line segment

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAGAlicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAGAlicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

  • Treatment at drag edge

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

  • Group optimization

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

Performance issues

Many people once questioned us that the performance of little butterfly using DOM would not be very bad? Our little butterfly focuses on the flow chart. In order to ensure the integrity and clarity of our business, our positioning is: 10000 nodes are the performance limit, because more than 10000 nodes, the whole business process will become chaotic. At the same time, we have done a lot of performance optimization work:

  • Render Elements 。 Each layer does not affect each other, and ensures that the rendering achieves finer granularity

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

  • First screen rendering step by step。 Make sure that the first presentation of the canvas is close to the rendering speed of canvas

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

  • Local rendering。 Make sure that every change to each element is rendered with minimal granularity and does not trigger a large re rendering
  • Batch operation。 The addition, deletion, query and modification of all elements in the canvas are optimized to batch operation to ensure that DOM is operated as little as possible

Cooperation and co construction

We are often asked what does little butterfly have to do with G6? We and antv-g6 were launched at about the same time. We are both teachers and friends. We all work hard to promote the development of this field. We often communicate with @ juze. In order to reduce the duplication of construction, we have initially formulated the plan for the first stage, and we are also making efforts to promote:Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

In view of the second stage of cooperation and co construction, we have been thinking about it recently. Xiaodiesheng has better customization, but it can’t support more than 1W nodes in terms of performance. G6 rendering engine is canvas, which has excellent performance, but lacks customization. The entry threshold will be higher. Can we combine the advantages of both of them to extract the essence and remove the dross. Our idea is:

  • A kind of First floor_ : when the mouse floats above and needs to be edited, a corresponding node will appear in the DOM layer, covering the corresponding node of canvas
  • A kind of Second floor_ : canvas is the real rendering engine when no editing is needed
  • A kind of The third layer_ Background and marquee operation layer is not constant change layer

Alicloud front-end lightweight open source diagram layout and flow chart framework, pursuing the ultimate experience butterfly DAG

We have been actively investigating this issue. During this period, we found that some CSS features will be lost when HTML to canvas, but this part of features can be remedied by canvas. It is hoped that this year we can break through this difficulty and really integrate Dom and canvasMaximize performance and customizationHelp more students in need

Future planning

Thanks to Alibaba cloud design center, the brothers of datav and other contributors for their contributions in the past three years, we will make more efforts to enhance the ability of the bottom layer of small butterflies, enrich the ecology of small butterflies, and make efforts to create “zero” code graph layout.

epilogue

We have accumulated and supported 20 + services and precipitated 100 + node styles. In the near future, it will be open to small partners for use. At that time, you can combine and put together like “iconfont”, which can greatly reduce your development time.

Three years of sharpening a sword, I hope little butterfly can provide you with a helping hand. Little butterfly has been open source for three years. Your star is our driving forcehttps://github.com/alibaba/butterflyThank you! At the same time, we also welcome interested brothers to join us.

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]