Search This Blog

Wednesday, 26 April 2017

Online flowchart tools

Today I decided to have a look at online tools for creating flowcharts. There are loads so I am going to try a random selection out and make notes here.


I use flowcharts to detail some parts of my software code. In this case it will be for the ESP8266 driveway alarm system I am working on.

When designing my applications, in the past, I have used a combination of Microsoft Word and hand drawn flowcharts which I then scan in.

I thought that by now there must be a low cost online solution to flowcharts so I can skip the scanning stage and have them available to edit wherever I am.
I have used Microsoft Visio in the past but this is an expensive tool for the small number of uses I have for it.

I tried the Office 365 version of PowerPoint but this was limited and very awkward, making it slow to use for this purpose.

I'm after a tool that is nearly as quick or quicker to use than my hand drawn paper charts.

As usual, in no particular order:

Draw.io

Draw.io went straight to the create a document screen. No messing about, get to work immediately.

If there is any pricing I could not find it. At the moment, I am assuming it is free!

There is a banner on the screen with a link to GitHub and the open source code is all there.
https://github.com/jgraph/draw.io
I noticed it is actively being updated as the dates were today.

Draw.io uses your online storage or a local file to save your work.


I chose OneDrive and obviously it needed permission to access that.


It is very easy to use. Drag, copy, link with arrows, all works in the most obvious way. At least to me.

Big arrows appear to create the link from, little crosses appear where you can connect the link on to. I could select groups and move them all about together, I could move things to the top or bottom of a stack. If I moved shapes the linked lines followed them, as long as I had correctly made the connection. It was very quick to link an arrow if I had not already done so.

The shapes can be manually edited so I found I could change the shapes but keep the text by copying and pasting the shape code from one object to another. Easy.
There are a useful number of shape sets to choose from. I mainly used the traditional flowchart shapes but there's a whole set for UML diagrams among others.

The files are saved as HTML with something embedded that opens the chart on the draw.io web site. It works well from a file on my local machine but OneDrive treats it as a text file. Probably a sensible security feature but not ideal for editing previous drawings from the OneDrive end. If you open the draw.io web site you can quickly browse to you existing draw.io documents and open them that way.

You can also save to a selection of image formats, such as JPG and PNG.

So far I am very pleased with draw.io. Just what I was looking for.

I found some reviews, after I had used it:
http://blinklist.com/reviews/draw-io
http://uk.pcmag.com/drawio
http://uk.pcmag.com/software/88898/guide/the-best-flowchart-and-diagramming-apps-of-2017

Creately

This is $5 per month or all diagrams are public. I haven't tried it out.

GenMyModel

Free for small projects but the results are public.
Not what I was after.

Web Sequence Diagrams

I didn't get the hang of the concept. It was like coding to create the flowchart to create the program!


I could create a basic diagram with quick icons then I could probably fine tune it with manual edits. It was not what I was after so I didn't do much with it.

Draw Anywhere

30 day free trial. It required Adobe Flash Player, so that stopped there. Old technology, not worth the hassle, in my opinion.

Lucidchart

Apparently there is a free trial version but to find out the limits I would have needed to sign up. I don't like sites that don't tell you the details until after you have signed up for something.
The basic version is £5.45 per month.

SmartDraw Cloud

SmartDraw has a desktop product that I have used before. It used to be a competitor to Visio I assume it still is. The cloud version did not have any details before signing up. I decided not to try this one at the moment.

Gliffy

The free trial looked like the sort of thing I was after. Very similar style to draw.io. I ran out of time to give it a full tryout but at first glance it looked good.


What I tried worked well. It had a traditional toolbar at the top to change from, lines, to move about or add text. Speedy to use. To save documents it was necessary to sign up, which I didn't do.

While I was browsing the Draw.io source code I came across a folder for Gliffy. That would explain why the two have so many similarities.
https://github.com/jgraph/draw.io/tree/master/src/com/mxgraph/io/gliffy

Conclusion

The first product I tried, draw.io, was the best for me. I'm not sure if I will find any limitations or gotchas with extended use but I'll update this page if I do.