Diagramly – A Handy Tool For Creating Quick Flowcharts

creating flow chartsIn the age of infographics, flowcharts are a great tool for getting your point across without using too many words. If you routinely create flowcharts as part of your work, you may already be using a full-featured product such as Microsoft Visio. But if flowcharts aren’t yet a big part of your process, you may want to give Diagramly a look.

The best thing about Diagramly is how accessible it is. You just click a URL, and you’re in. There’s no download, no account registration, and you don’t even need Flash to use it. It really couldn’t be simpler to get started. The worst thing about Diagramly (I’ll just get this out of the way right now) is the utter lack of documentation. For example, check out this diagram I made for you, showing the ideal MakeUseOf reader’s workflow:

creating flow charts

Pretty easy to understand, right? It took about 45 seconds from the moment I first loaded Diagramly in my browser until I had this diagram. But did you notice how all steps use the same icons? That’s not because I think you guys are cogwheels in MakeUseOf’s giant machine – it’s because I simply couldn’t figure out how to change the icon! I clicked all over the interface, right-clicked the bubbles and did just about everything I could think of, and yet I was unable to change the icon. This is where you come in, by the way – feel free to leave a comment and tell me what I missed.

Let’s take a look at the UI:

create flow charts

I included Chrome’s address bar on purpose, so you’d see it really is a Web app. The border between web apps and desktop apps is growing ever fuzzier, and Diagramly is a good example. The interface is very snappy, too. You can drag a marquee around multiple elements to select them all (or Ctrl-click them one by one, if they’re not adjacent). You can adjust the zoom level, and select diagram components from a rich library of high-resolution icons.

Here are just a few samples I picked at random:

create flow charts

Why there is a Shield of David there, I have absolutely no idea. I think it’s just supposed to be a star, but it has six points for some reason. At any rate, you can see the icons are very detailed. I believe I’ve seen them before elsewhere. Diagramly’s creators must have obtained permission to use existing icon sets. Having such high-quality icons is very handy when you’re trying to get a visual message across quickly. You can just draw an arrow from the $ icon to the Mac icon — the message is clear.

Once you’re done crafting your masterpiece, you can save it in one of a number of formats:

creating flow charts

Saving as an SVG is very handy if you have a desktop vector editing application (such as the free and open-source Inkscape). As I’ve already mentioned, documentation isn’t exactly Diagramly’s strong suit, so I have no idea what type of XML it saves. I’ve inspected the resulting XML and it lacks a DTD declaration, but you can certainly open it back using Diagramly (I’ve tested this).

Bottom Line

Should you use Diagramly for your multi-million dollar keynote? You can probably guess the answer by now. But if you have an idea you just want to lay down on screen very quickly, and without futzing about with a software download and installation, with opening an account, or with any of the other hassles most diagramming tools present, then Diagramly is the way to go. If you make anything interesting or funny, do share in the comments!


MakeUseOf Recommends

Erez Zukerman

Erez Zukerman is a tech blogger, Web developer and nerd. Apart from writing at MakeUseOf, you can also find him at PCWorld, and at his own cubbyhole at ezuk.org. Sometimes, he tweets.

The comments were closed because the article is more than 180 days old.

If you have any questions related to stuff mentioned in the article or need help with any computer issue, just ask it on MakeUseOf Answers.

Hide 6 Comments

  • John June 10, 2011
    0 likes

    Yeah, looks pretty basic.  There are other diagramming tools (LucidChart comes to mind) that seem to have the same benefits but a more robust experience.

    | Like
  • Merlin The Great June 11, 2011
    0 likes

    You can change the images by using:
    right-click / format / image
    Then you can enter any url to a new image.
    The only thing about that I noticed is that the new image is centered and I didn’t find a way to place it on the left at first sight.

    | Like
    • Anonymous June 11, 2011
      0 likes

      Thanks Merlin!

      | Like
    • Larry_m7 June 12, 2011
      0 likes

      Right clicking didn’t do anything at all for me. I did find that you can click the icon to select it then delete it with the Del key. Then you can drag another icon into place.

      I also found a wee bit of documentationL
      http://forum.jgraph.com/tags/diagramly/

      | Like
      • Anonymous June 29, 2011
        0 likes

        Nice find, Larry! Thanks! And sorry for the belated response, notifications were broken.

        | Like
        • Larry_m7 July 15, 2011
          0 likes

          De nada.

          | Like