UI Nuances of marker implementation in the DGRM.net flowchart editor

The marker's task is to comment on screenshots.

*Fig 1. Highlighter for screenshots in DGRM.net.*

The interface should have as few buttons as possible

The fewer buttons, input fields and menus, the better. Everything should work “as it should” right away, without configuration.

*Fig 2. On the left is an overloaded interface. On the right is the DGRM interface without unnecessary buttons.*

The marker is always above other elements

IN DGRM no need to manage layers.

The elements are always arranged in this order:

Top marker
Below are the shapes and text
Stroke
At the very bottom of the picture

*Fig 3. Distribution of elements across layers in DGRM: marker at the top, shapes and text below, then stroke, at the very bottom of the picture.*

Elements on the same level can be swapped. To do this, click on the element.

Fig 4. Click to move the figure to the top. DGRM does not have separate layer control buttons. — *Fig 4. Click to move the figure to the top. DGRM does not have separate layer control buttons*.

The marker is purple. Purple is more visible than other colors against different backgrounds.

If you need to choose only one color for the marker, it is better to take purple. Purple can be seen on almost any background. Purple is also a neutral color, unlike red and green.

*Fig 5. The best color for a marker is purple. Purple can be seen on almost any background. Purple, unlike red and green, is a neutral color.*

The marker/highlighter should highlight the text and not interfere with reading. Therefore, it is better to use color mixing rather than transparency (mix-blend-mode).

*Figure 6. On the left, color mixing is used for the marker. On the right is transparency. Transparency is worse because the text is less readable and the marker itself is paler.*

The marker has an excellent curve smoothing algorithm

If the curve is not smoothed out, it will be ugly. DGRM uses an excellent smoothing algorithm. This is a technical point, but I will note it in the article about design. The algorithm produces a compact result. 10 times more compact than the “regular” algorithm. Less data is needed to describe the curve, which means the application runs faster.

Fig 7. An example of the curve smoothing algorithm. — *Fig 7. Example of the curve smoothing algorithm*.

M31 -7l-0.23 0q-0.23 0 -4.12 0 t-9.37 0 t-11.66 -0.23 t-10.51 -0.23 t-8.69 0 t-6.63 0 t-5.03 0.23 t-4.34 1.14 t-2.06 2.74 t2.06 4.34 t16 3.89 t20.34 1.14 t10.06 -0.23 t7.54 -0.46 t5.94 -0.69 t1.83 -1.37 t-1.83 -2.29 t-9.83 -1.83 t-16.23 -1.14 t-13.94 -0.46 t-7.54 0 t-2.97 0 l-0.91 0

Listing 1. Machine description of the curve in Fig. 7 in DGRM. Little data is needed for the description – this is good, because… the application runs faster. This is real data without reduction.

Marker lines combine into shapes

For example, to draw an arrow you need two lines. First, draw one line, then the second. DGRM will combine the lines into one shape. There are no separate “merge/split” buttons.

It is more convenient to work with a figure than with scattered lines. The entire shape can be moved, deleted or copied.