Flowchart editor UI

Alexey Boyko - Jun 21 '22 - - Dev Community

Designing an interface is interesting. It is like a puzzle. Here’s what happens for Dgrm.net.

Dgrm.net is a flowchart editor

  • works on PC, tablets and mobile
  • no extra buttons
  • quick
  • free

The editor opens diagrams from pictures

Fig 1. Dgrm.net opens flowcharts pictures
Fig 1. Dgrm.net opens flowcharts pictures

No need to store the source, the picture is the source.

For example: we send the scheme by mail. A month later, the letter is returned — we immediately correct the picture from the letter, we do not look for the source code.

Connecting lines are pulled out, not added as a separate shape

Fig 2. To connect the shapes, pull out the arrows
Fig 2. To connect the shapes, pull out the arrows

Entry points are highlighted in advance when approaching a figure

Figure 3 shows hidden contours.

Fig 3. Entry points are highlighted in advance when approaching a figure
Fig 3. Entry points are highlighted in advance when approaching a figure

Shapes automatically adjust to text length

No need to manually resize.

The figures do not increase smoothly, but in steps. So that the diagram does not ripple from different sizes.

Fig 4. Shapes automatically resize based on text
Fig 4. Shapes automatically resize based on text

Minimum controls

The possibilities of the editor are deliberately limited.

  • Only 4 shapes;
  • The menu has 5 items. No choice of save format.

Large controls

On phones, the controls are getting even bigger.

Fig 5. Large controls on phones
Fig 5. Large controls on phones

Future plans

  • Group dragging shapes. Right now, only one shape can be dragged.
  • Change the color of shapes.
  • Zoom in/zoom out.
  • Short links to diagrams.
  • “Save as” dialog. Now saves in “Downloads” without the ability to specify a file name.
  • Copying a diagram from the editor to Word.
  • Dragging a diagram from the editor into Word.

Other articles about dgrm.net

Dgrm.net | GitHub

. . . . . . . . . . . . . . . . . . . . . . . . . . .