How would you architect an application which is largely a collection of flowcharts?

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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;

• https://stackoverflow.com/questions/7034/graph-visualization-code-in-javascript
• http://jgraph.github.com/mxgraph/javascript/examples/swimlanes.html
• http://philogb.github.com/jit/demos.html

Answer 5

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.