March 7, 2011

Online Diagram Creator

Along with the release of v6.0 of the IAN Symbol Libraries (see the blog announcement), IAN has developed a free online diagram creator. This tool allows users to create conceptual diagrams in their web browser without the need for expensive software.

The diagrammer connects directly to our symbol library database so that users can search for symbols by keywords, browse the albums, select from an IAN project symbol set, or work from their lightbox collection.

While it doesn’t have all the functionality of programs like Adobe Illustrator, it has all the vector editing tools necessary for creating publication quality conceptual diagrams.

Online diagram creator

IAN Online Diagram Creator showing its vector node editing capabilities.

List of key features:

  • Direct access to the IAN Symbol Libraries
  • Works on all platforms (PC, Mac, Linux) and all modern browsers
  • Save to hard drive (SVG) for further editing in diagrammer or desktop software
  • Save in SVG (vector) or export to PNG (raster) for publication

Despite not being as powerful as desktop software (yet), we believe it has some advantages:

  • Simpler interface is less intimidating for first time vector users
  • No download necessary so the diagrammer and symbol libraries are always up to date
  • Larger thumbnails makes browsing easier
  • Ability to find symbols through keyword searching is a big advantage for users. The lack of this functionality in Illustrator has long been a frustration for users.
Diagrammer search

Search results from the IAN Symbol Libraries in the Online Diagrammer.

Why are our libraries and diagrammer vector?

Vector is arguably the best format for illustrations, but it can be a difficult shift in thinking for users more familiar with raster drawing using Photoshop, or even Microsoft Paint. Initially it can seem quite confusing, with the need to close paths, and order layers of various overlapping shapes to create the desired image, but once you get the hang of it the advantages quickly become apparent. The ability to scale images infinitely without any loss of quality is a key feature, but the ease of editing and coloring shapes, and swapping of layers really defines vector drawing. Other advantages include smaller file size and the ability to easily convert to raster if needed – raster to vector is much more difficult.

vector vs raster diagram

Example showing the effects of scaling a vector vs a raster image.

We have prepared a video demo of the diagrammer in action. It certainly doesn’t cover all of its functionality, but should get you started on your way to making effective conceptual diagrams with the IAN Symbol Libraries.


Please note:
the online diagrammer is still in early beta, so you will find some bugs and inconsistencies between browsers. Firefox currently gives the best all around experience. Please leave a comment letting us know how it worked for you.

Print Friendly
Related Projects

About the author
Dr Adrian Jones is a Science Integrator and web developer for the Integration and Application Network. He has a background in ecosystem health monitoring. He develops novel ways to communicate environmental issues through interactive data driven websites.
Website: http://ian.umces.edu/people/Adrian_Jones/
Email the author | See all posts by


12 Comments »

  1. […] symbol set, or work from their lightbox collection. For more details on the diagrammer, see the announcement blog post. Creating a conceptual diagram with our online diagram […]

    Pingback by IAN Symbol Libraries reach 2500 symbols « IAN/EcoCheck Blog — March 7, 2011 @ 3:03 am

  2. This software is great. We’ve been searching for easier methods to create scientific designs. I’ll let you know if we find any kinks.

    Thanks

    Comment by Will — June 26, 2011 @ 3:32 pm

  3. Despite not being as powerful as desktop software, this is still a seriously nifty piece of kit.
    I recently changed hardware, going from a Windows based laptop to a shiny new Mac Book and unlike so many other programs, integrated without any hassle.
    So simple to use, don’t go changing what isn’t broken!

    Comment by jordybhill — July 13, 2011 @ 1:55 pm

  4. I’m a new user, and I find the program quite user friendly thus far. I do have a question, however. How can I add a node to an existing shape? I tried playing around with the “clone node” button, but I couldn’t get it to do anything. Thanks.

    Comment by Trevor Durbin — July 13, 2011 @ 6:53 pm

  5. Hi Trevor – thanks for the feedback. The clone node button is what you need, but to make it work you need to select an existing node first. Once you are in node selection mode, another single click on a node will select it and highlight it along with the line to the adjacent node. Once selected, the clone node button will add a new node midway along that line.

    Let me know if you still have trouble and I’ll try to explain further.

    Comment by IAN — July 13, 2011 @ 9:32 pm

  6. Thanks for this software development. My son draws a lot of pictures using MS paint. I will let him know about this gem to try.

    Comment by btrao2010 — August 5, 2011 @ 2:33 pm

  7. I’ve been searching for easier methods to create scientific designs.

    I have to do illustrations and diagrams about Panama Canal, when it allows ships pass between the Atlantic Ocean and Pacific Ocean, this will be great!

    Comment by Carlos Ramos — August 20, 2011 @ 11:58 pm

  8. I will definitely use this software…thanks

    Comment by Dr Anthony — August 24, 2011 @ 2:42 am

  9. Great software indeed ..thanks

    Comment by deyu — September 4, 2011 @ 9:36 am

  10. What a fantastic tool. Love the interface! Sometimes you just want do one off drawings so this definatly beats purchasing more expensive software.

    Comment by Julia Serafina — October 11, 2011 @ 11:55 pm

  11. This is a great software tool. I have been searching for something easier and I found it.

    Comment by allstarventures — November 19, 2012 @ 8:28 pm

  12. This utility is perfect for our classroom. Can’t wait to dive in and really get into it. Thanks a lot Dr. Jones

    Comment by Dubstep Maker — November 19, 2012 @ 9:49 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment