Creating Flowcharts for the Web
December 11, 2003 1:51 AM Subscribe
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?
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
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
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
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
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
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
posted by dejah420 at 3:50 PM on December 12, 2003
« Older Is anyone keeping an updated list of "referral... | Help me find this Bill Hicks video. Newer »
This thread is closed to new comments.
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