Our experience creating web flow chart editor

To any company that deals with tools for developers, sooner or later the delegation of clients comes. With the words "no programmers, simple tasks, you need a visual editor." We have been engaged in automating telephone and video calls for many years now, to whom and why does the robot call well, we imagine it well, we love VueJS, the head does not hurt. Why not do it? Under the cat - behind the scenes and the technical side of what marketing beautifully called "Smartcalls".

Signs of a good flowchart editor

What does the visual editor look like from the user's point of view? This is a palette of elements, the ability to drag them onto a canvas and connect them with arrows. In general, nothing complicated, and there are dozens of libraries in the world of the frontend that solve a similar problem. Difficulties arise when several elements accumulate on the canvas, and the user begins to move them, freeing up space. The key point is what happens with the arrows. The simplest scenario from real life, “to call a client, offer a discount, listen to what he says,” as if hints to us that there will be a lot of squares and arrows:

And we want, when the user starts to move these squares, the result was at least readable, and not “an explosion of arrows at the pasta factory”. So, for example:

First experiments

There are now many ready-made and free libraries for drawing flowcharts in the front end. After carefully examining who uses what, we stopped at the project with the beautiful name " Storm " and its part " React Diagrams ". The stuff is popular, it develops dynamically, everything looks beautiful out of the box and works smartly. React, again, is not bad friends with VueJS.
')
Everything was fine until we collected the first demo and did not drag the small squares linked by the arrows. It turned out that the Storm cannot automatically and beautifully skirt the squares with arrows. Not that it can not at all - you can manually set the "bend points" and calculate everything yourself. And if you do not cheat, the lines will go through the squares “through” and the scheme will be similar to the scribble of a two-year-old child. Not the best interface solution for things that people from the business will collect robots for order confirmation, delivery, surveys and an invitation to be interviewed.

Selection of JointJS

Realizing what we need, we once again revised the list of candidates and chose the following victim of inhuman experiments: the JointJS library, which is used by Amazon and other large companies. Why we did not choose her right away? jQuery, Backbone and SVG. Not the most advanced technology stack with a number of innate flaws.

But with automatic routing of connections, they are fine. Of course, if you jot down a lot of elements on the canvas and start arranging them creatively, then sometimes the automatics do not cope (you can try on smartcalls.io ), but for most practical situations the lines are adequately rebuilt, skirting the elements and the resulting scheme can be easily looked at What happens for automatics when you click on the "call" button.

Library strengths and weaknesses

Let's start with jQuery. Like most solutions based on this thing, JointJS loves the global scope and expects a number of objects in it. To build a modern VueJS application with JointJS, we had to dig into the Webpack and organize the assembly correctly. If someone in your team is good at Webpack (or analogs), then this will not be a problem for you. But we didn’t find the finished instructions for “working out of the box” - maybe we’ll write a small tutorial on Habré if there is interest.

In JointJS, it is not easy to add new blocks - this is a payment for simplicity and wide possibilities for customizing the appearance of already existing blocks. But we, with our five-year experience in telephone automation, knew exactly what entities our customers got used to working with. They seek advice, show us the schemes made in various editors, sometimes we help them create scripts. And in these schemes there is much in common that we wanted to reflect in our visual editor: working with conditions, variables, external services, voice menus. To make the elements exactly the way we wanted to see them, we had to get pretty deep in the guts of JointJS.

Well, in general, the library is not simple. To figure out how everything works, what settings and how to change, what is responsible for what - it will take time. On the other hand, a visual editor is not the easiest thing, and investing time in a library that solves complex problems for us is a good idea.

The configured JointJS does its job very well: a fast SVG engine, automatic connection routing, compatibility with a large number of browsers. At the same time, the difficulties of adding your own elements are more than offset by the widest possibilities for customizing existing ones. You can customize everything: color, shape, behavior in different situations. The result is interfaces that are comfortable and pleasant to work with.