I am working with a history teacher on a history app. He has like 200 flowcharts that he wants to put into the app (among other things). The two likeliest-looking ways to do it:

  1. HTML/CSS. The big minus here is that neither one of us is a big HTML/CSS person. Though I do know a bit about them.

  2. Adobe Illustrator. The interface makes it easy to draw stuff, and we can make vector graphics files and work from those. The drawback is that the text of a box, the graphical box, and the corresponding hyperlink would be different entities, where as if the HTML/CSS is done right, they might all be a single thing.

There are some flowchart-drawing websites out there. But the ones I have looked at have some problems:

  1. In the ones I have looked at, the HTML is big and messy. We need ours to be short and simple.

  2. Often a large amount of JavaScript is involved. We could do that, but it adds to the complexity of our mobile app, as well as the risk of failures.

We are starting on iOS but may add other platforms later.

  • 3
    One thing I've been doing recently and might a possible approach for your problem is the following: use your own easy-to-learn language to define the flowcharts and then convert that language to html using sed. I've been doing this to write little manuals for my classmates on how to do stuff in the shell and it works pretty good. This keeps you away from using html too much (once everything is set up). One downside might be that you also loose the power of 'raw' html.
    – romeovs
    Commented Feb 26, 2012 at 10:24
  • How would you architect an application which is largely a collection of flowcharts? with a flowchart maybe? ;)
    – back2dos
    Commented Feb 26, 2012 at 10:39
  • romeovs -- got any examples? Commented Feb 26, 2012 at 16:05

5 Answers 5


Make it a PDF and leave it at that?

PDF's can have internal hyperlinks if you need to go elsewhere in your document, and you can add additional scripting in form of JavaScript.

  • That's what we are doing currently. Our PDFs load very slowly if they have any kind of background. Commented Feb 26, 2012 at 16:04
  • 2
    Try optimizing the PDF
    – user1249
    Commented Feb 26, 2012 at 17:52

You could save each flowchart as an image. You can draw it on the desktop and load it to your sever, your web page can load it at run-time like any other image. It may be a bit slow if you have large charts but probably much easier to build and manage. Even if you want to present large charts, they can be cut into pieces with each piece loaded separately.

  • 2
    I would choose the svg format, it allows you to put links in it and to easy draw it. Commented Feb 26, 2012 at 10:19
  • 4
    @Sebastian Bauer Please don't link to w3schools: w3fools.com
    – Cokegod
    Commented Feb 26, 2012 at 12:55
  • @Cokegod: :D didn't noticed it till now - thanks! (+1) Commented Mar 3, 2012 at 6:34

If the flowcharts are intended to be dynamic on the server then I would do the following:

  1. Collect the data as json via ajax calls

  2. Pass the json data into javascript methods, named and organised by you in an mvc like structure which then pass the data to a plugin which draws the chart: svg, jgraph, ext-js sencha, canvas or alternative (something which has plenty of documentation, so you don't have to re-invent the wheel)

I would not do flow charts in html and css because then you have to consider browser and platform variations and you will have to make amendments multiplied by 5 for each browser edgecase. Atleast, with the plugins you can avoid most of this. I also wouldn't support legacy browsers like IE6, IE7 etc. The amount of time and cost massive corporations lose on developing for these, and messing up clean code adds to unscalable poor code, increasing maintenance.


Assuming you have knowledge of coding, instead of building them in pure HTML, PDF or drawing similar environment, I would recommend the store flowchart data in XML files and render them with a javascript based engine. You may also generate different outputs (mobile, pdf etc) later if needed.

You can find some force directed tree layout engines in javascript, with weight changes on engine I think you can get the result that you want.

Some js engines;


I would do this:

  1. Quickly get images (any web friendly format) onto 200 or so pages
  2. Start using a package such as ABC flowcharter
  3. One by One convert each image into real objects with real attributes and references within the flowcharting application
  4. Export each flowchart in a data format that is usable by others applications.
  5. Import the result into other apps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.