MMMeeja

Web design is about more than typography, layout and aesthetics - it is about flow, interaction and increasingly about software design.

Coming from an object-oriented software background, I know that software diagrams can help get your thoughts in order and reveal under-designed or chaotic areas of your projects.

I don't want to advocate formalising the design process or get into arguments over agile processes, just to show you some tools that can be better than the back of an envelope.

Bubbl.us

This is probably the tool I use most often. It's a mind-mapping tool but it's free form nature means that it can be used to represent many things (at a fairly high-level).

Bubbl.us has a lot to offer. There are no onerous registration requirements and it is really intuitive. Both of which mean you can start working straight away, whilst your ideas are fresh in your mind.

It will happily save documents for registered users, export as images, XML or HTML and it has great collaboration options too.

It can be a bit limiting if you want to move beyond simple mind-map diagrams but it's a great tool within those limits.

SQL Designer

Ondřej Žára's excellent flash tool provides basic entity relationship diagramming, allowing you to model database tables, indexes and relations.

It isn't a patch on professional modelling tools (like Oracle Designer) but can really save you a lot of time. It can generate SQL/DDL for an impressive array of database platforms and can export and import XML representations of your diagrams.

The ability to maintain an agnostic copy of my database designs, then generate code for MySql and Oracle with a few mouse clicks really makes me love this free tool.

GModeler

GSkinner's GModeler application deserves a mention because it actually tries to implement proper UML class diagrams.

I must confess to not using this tool much, I find desktop applications to be far superior for modelling in the kind of detail required by UML.

I'm probably not the target audience though - one of the biggest draws for GModeler is its ability to generate Flash ActionScript code (including ActionScript 2.0).

It's good to see web developers embracing software engineering tools like UML though.

Conclusion

A picture is worth a thousand words and diagrams are incredibly useful for communicating what is happenning behind your web pages. Whether you're producing wire-frames for page transitions, object diagrams for Javascript or ERDs of database designs, give these tools a go.

Are there any other online diagramming tools you'd suggest to web designers? Let me know in a comment.