Creating Flowcharts for the Web

December 11, 2003 1:51 AM

Does anyone have any experience with creating flowcharts for the web? I have been kicking around a number of ways to implement one and none of them are very optimal. I'd be happy with any solution that doesn't require .pdfs, huge bandwidth-sucking graphics, or crazymaking nested tables for layout, but darned if I can come up with one for myself. Thoughts? Suggestions? Sympathies and commiserations?
posted by Dreama to computers & internet (8 comments total)

One option if you don't want to just use one big graphic, would be Flash. The vector based nature of it means that if you stick to lines, boxes and text, file sizes would be very low, and very easy to draw.

Either that or use CSS and DIV layers, along with a few arrow graphics in GIF format.
posted by derbs at 3:50 AM on December 11, 2003

Got illustrator? Try SVG.
posted by cheaily at 4:01 AM on December 11, 2003

It's not perfect, but I've used Visio on Windows to create flowcharts and then exported them to serve as the basis of a traditional <MAP>. OmniGraffle does essentially the same thing, but has the benefit (at least, for me...) of being a native Mac OS X application. It seems to me that most of the more popular flowcharting products must have this capability by now.
posted by JollyWanker at 6:07 AM on December 11, 2003

Funny, I was also going to suggest CSS. Of course, you'd probably need to hire Eric Meyer to write the CSS for you, because it would be impossibly complex for all but the most trivial flowcharts...

The idea of creating and presenting a CSS-based flowchart is actually an interesting one. CSS3 (which no current browsers really support) would make this easier becaue it makes different border types a lot easier (so you could, I think, have diamonds, circles, boxes, etc). But from an HTML markup standpoint, the interesting question is how you handle branches--conditional statements. A flowchart with no branches can be thought of as an ordered list. Pretty dull. Branch statements can be thought of as a list item in that list that contains an unordered list; each of the items on that list represents a branch option, and each item can in turn contain an ordered list.

This gives a logical framework to hang the flowchart on. That gets you a little closer to writing CSS that doesn't have every text box manually positioned, but it would still be hard to figure out, and would no doubt involve a lot of FLOATs.
posted by adamrice at 7:16 AM on December 11, 2003

Illustrator is a good bet. For lowest possible file size with a decent resolution:

1. Draw the chart in illustrator.

2. Save the chart as a .eps (I'd go for illustrator 6 dependencies because I've found it less conflicting for non-adobe apps).

3. Open the .eps in Fireworks

4. Save as .png. Good resolution, good file size.
posted by Mayor Curley at 7:37 AM on December 11, 2003

Open Office 1.1 does a pretty nice job of handling flow charts. You can create them in either their "draw" application or, in the presentation application. Circles, boxes, connectors, etc... Once you get it created, you can then export as HTML, asp, perl, or flash (.SWF files) or, even .PDF (not to mention other microsoft-type formats). Try it out, I think you'll be impressed.

As far as a groupware project management implementation of flowcharting for the web, I've not found anything good... so far.
posted by Dean_Paxton at 7:47 AM on December 11, 2003

You might like Inspiration or, on Mac, Nova Mind. They're both good but Inspiration is better. Unfortunately, it's mostly aimed at kids so it doesn't look as slick as Nova Mind. These will just let you make gifs or pdfs though--but I've never found the size of the files prohibitive. Guess it depends on the length of your flowchart.

Even if you're not someone who thinks they need to flowchart something, both of these programs are phenomenal for quick brainstorming. I used them to map out web sites and plot stories/screenplays.
posted by dobbs at 8:15 AM on December 11, 2003

inspiration looks really cool...thanks for that dobbs!
posted by dejah420 at 3:50 PM on December 12, 2003