Flowchart editor UI

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

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

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

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

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

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

• JavaScript SVG diagram editor 3.9 KB (open source library)
• JavaScript diagram editor that renders diagrams from PNG images (open source)
• JavaScript text editor for SVG
• Flowchart editor UI
• JavaScript: Zoom like in maps for SVG/HTML

Dgrm.net | GitHub

Comments

[Dragan]

Looks good. I like things that are easy to use.
You may be also interested in another flowchart editor I wrote. Just check this: Visual CLApp Editor

[Alexey Boyko]

Hello! Thanks for reaching out.
Glad to here you liked the app. Work on the application continues.

You do not provide link to CLApp

[Dragan]

Hi Alexey (I have a good friend with the same name ;) ).
I thought my link is present: if you click on "Visual CLApp Editor" in my first comment, I think you come up to my post where several links to videos are presented and in the video descriptions, there is a link to Github.
But otherwise, if you want to access it directly, here is my repository:
github.com/dragan-clapp-creator