Diagrams: Tools and Tutorials

Advertisement

Being a web-developer means not only being able to design web-sites or program their functionality. Sometimes it also means to be able to explain complex issues clearly and be able to present to your potential customers reasonable and convincing arguments – in order to find the best compromise between the customer’s wishes and the standards you respect. In fact, it is essential to make sure the customer understands which advantages you are actually offering and why this or that layout and markup are better for a given web-project.

Developing web-sites over the last few years, we’ve been stumbling over the same problem over and over again: how can I visualize my idea easily and quickly? Since human being is used to visualize things, trying to understand the idea behind them, recently we’ve spent hours googling for useful tools and tutorials which would help us to create images – mostly, diagrams, charts, chart-flows etc. Links checked: May/14 2008.

List of nifty tools for drawing diagrams, charts and chart-flows

List of nifty tools for drawing diagrams, charts and flow charts

Tutorials

  • Creating Graphs, Part I1 undCreating Graphs, Part II2 by Wolfgang Bartelme. Two detailed how-to-tutorials, which explain how you can create professional, visually appealing Diagrams with Adobe Illustrator.
  • Illustrator Charts3 by Veerle Pieters. A step-by-step tutorial for Adobe Illustrator, which explains how to create flexible Charts which are visually appealing.
  • Charting in Microsoft Excel4 by Jon Peltier. A detailed how-to about the use of tools, which are integrated in Microsoft Excel.
  • CSS Diagrams5 describes a way to create CSS-based Charts.
  • CSS For Bar Graphs6
    describes another approach for presenting graphs with CSS and XHTML.

Free Web-Tools

  • Gliffy7 Gliffy.com is a free web-based diagram editor. It enables you to create and share flowcharts, network diagrams, floorplans, user interface designs and other drawings online. Registration is required.
  • James MacFarlanes’ Ajaxio8 is a simple Ajax-based tool, which uses Prototype9 and script.aculo.us10.

Free Software

  • 1st Chart11 creates high-resolution diagrams with the Chart-Elements you provide. The page doesn’t have an English version yet.
  • JGraphpad12 is a powerful, easy-to-use, feature-rich and standards-compliant open source graph component available for Java. Application areas include Process diagrams, workflow and BPM visualization, flowcharts, even traffic or water flow etc.
  • yEd – Java™ Graph Editor13 is a powerful graph editor that is written entirely in the Java programming language. It can be used to quickly and effectively generate drawings and to apply automatic layouts to a range of different diagrams and networks.
  • Graphviz14 is open source graph visualization software. It has several main graph layout programs, web and interactive graphical interfaces, and auxiliary tools, libraries, and language bindings.
  • Unified Modeling Language (UML)15 is a non-proprietary, object modeling and specification language used in software engineering. With various UML-Tools16 (German version only!) once can create not only small sketches and simple organisation diagrams, but also complex systems and computer models.
  • XML/SWF Charts17 is a simple, yet powerful tool to create attractive web charts and graphs from dynamic XML data. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.). The Official tutorial18 explains exactly, how you can use XML/SWF for your personal projects.
  • DIA19 is a gtk+ based diagram creation program released under the GPL license. DIA can be used to draw entity relationship diagrams, UML diagrams, flowcharts, network diagrams, and many other diagrams. It is also possible to add support for new shapes by writing simple XML files, using a subset of SVG to draw the shape. It can load and save diagrams to a custom XML format (gzipped by default, to save space), can export diagrams to a number of formats, including EPS, SVG, XFIG, WMF and PNG.
  • JFreeChart20 is a free 100% Java chart library which creates charts such as bar charts, line charts, pie charts, time series charts, candlestick charts, high/low/open/close charts, wind plots, and meter charts.
    JFreeChart is licensed under LGPL license and requires Java 2 platform (JDK Version 1.3 and higher).

Leading commercial products:

  • OmniGraffle21: the premier diagramming application for Mac OS X creates flow charts, org charts, network diagrams, family trees, project processes, office layouts – or anything else that can be represented by symbols and lines. (“Standard”-Version costs $79.95, “Professional”-Version $149.95).
  • Microsoft Visio22: the Microsoft Office business and technical diagramming program solves every problem you could ever think about. Microsoft Visio is integrated in the Microsoft Office. The price is appropriate for the quality Microsoft Visio delivers.
  • Mindjet MindManager23 is a powerfult software-package which can be used for drawing Mindmaps, Brainstorming-Ideas or organization diagrams.
    Bloggers from Switzerland can get Mindjet for free until the 31st of August 2006 (more in German on SuperDeluxe24). All you need is to describe your weblog, provide its URL, choose the language of the Mindjet MindManager in an e-mail you have to send at blog@mindjet.ch. MindManager Basic (Mac and Win) costs 230.84 €, MindManager Pro – 346.84 €.
  • SmartDraw25 is also a powerful Software-package, which is extremely easy-to-use and includes 1000s of professional-looking business graphics that you can modify and make your own. Price: $197.

Footnotes

  1. 1 http://www.bartelme.at/journal/archive/creating_graphs
  2. 2 http://www.bartelme.at/journal/archive/creating_graphs_part_2
  3. 3 http://www.duoh.com/varia/illustrator_charts/
  4. 4 http://peltiertech.com/Excel/Charts/index.html
  5. 5 http://www.surfare.net/~toolman/temp/diagram.html
  6. 6 http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
  7. 7 http://gliffy.com/
  8. 8 http://jameslab.moveable.com/ajaxio/
  9. 9 http://prototype.conio.net/
  10. 10 http://wiki.script.aculo.us
  11. 11 http://www.delphi-soft.de/1stchart.htm
  12. 12 http://www.jgraph.com/downloads.html
  13. 13 http://www.yworks.com/en/products_yed_about.htm
  14. 14 http://graphviz.org/
  15. 15 http://en.wikipedia.org/wiki/Unified_Modeling_Language
  16. 16 http://www.jeckle.de/umltools.html
  17. 17 http://www.maani.us/xml_charts/index.php
  18. 18 http://www.maani.us/xml_charts/index.php?menu=Tutorial
  19. 19 http://www.gnome.org/projects/dia/
  20. 20 http://www.jfree.org/jfreechart/
  21. 21 http://www.omnigroup.com/applications/omnigraffle/download/
  22. 22 http://www.microsoft.com/office/visio/prodinfo/default.mspx
  23. 23 http://www.mindjet.com/us/products/mindmanager_pro6/index.php?s=1
  24. 24 http://www.superdeluxe.ch/news/585/gratis-fuer-blogger-mindjet-mindmanager
  25. 25 http://www.smartdraw.com/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops and loves solving complex problems in large companies. Get in touch.

Advertising
  1. 1

    Anyone know of a freeware tool like MacSpin from the 80s? It allowed you to enter 3d or 4d data points and then it would show you a 3D graph you could rotate or zoom in/out. It was great for visualizing data, but I can’t find anything like it for Windows or Mac today. Send a reply to clint%at%bluehatsecurity%dot%com (replace % as needed).

    0
  2. 2

    The link to 1st Chart (http://www.delphi-soft.de/1stchart.htm) is dead. This is now a parked domain (as it is to read there in german).

    You did not mentioned the pretty famous kivio[1]. Guess where the name is derived from :O).

    And jpGraph[1] brings to PHP what the above mentioned JFreeChart is for Java

    [1] http://www.koffice.org/kivio/
    [2] http://www.aditus.nu/jpgraph/

    0
  3. 3

    Check out Axure (www.axure.com), a great tool for prototyping and wireframing. Visio is still the flowchart master.

    0
  4. 4

    you are right victor FreeMind is a great tool for MindMaps.

    0
  5. 5
  6. 6

    To create business process diagrams/flowcharts and organigrams you can use free version of business process analysis tool ADONIS:Community Edition.

    0
  7. 7

    Does anyone know any good programs for drawing site maps? Am at ends trying to get something thats easy to use.
    R

    0
  8. 8

    Pen and paper or whiteboard and marker always get the job done for me. See “The Back of the Napkin” to learn some visual thinking skills.

    0
  9. 9

    Origramy flash components can also be used for data visualization:
    FlyCharts FlyCharts – for building charts and diagrams
    Origramy flash graph component Origramy flash graph component – for building graphs and flowcharts

    0
  10. 10

    Does anyone know a mac-programm for bpm-modelling? I have tested the ones mentioned above, but they are ether windows only or mindmapping or design tools. any idea?

    0
  11. 11

    Thank you for Info about Gliffy, I have been searching for diagram software, I will use them for my blog.

    Zbigniew, thank you for info about Adonis.

    0
  12. 12

    I was doing a search and came across this site. We will be reading your sites.

    0
  13. 13

    I see this article is a bit dated, but I’d like to throw MindView (www.MatchWare.com/en/products/mindview) into the list here for helpful tools. It’s a commercial tool for making diagrams, gantt charts, mind maps, etc, but very powerful and plays well with Microsoft Office apps.

    0
  14. 14

    There’s also SimpleDiagrams (www.simplediagrams.com) when you need to make a diagram quickly.

    0
  15. 15

    Another great diagramming tool is Software Ideas Modeler. It supports many diagram types and it’s very easy to use. There are also paid versions with more features, but I use the standard free version of this tool and it’s sufficient for me.

    0
  16. 16

    As many of the links are no longer available you might want to try my new Infographic Charts and Graphics HTML Tags Library. A WordPress chart and graph plugin will be also available for free in a few days. I hope you find it useful :)

    0

↑ Back to top