CSS for flowcharts

Introduction

It's quite common to give user instructions in a form of a straightforward list. 'Do this then that' and so on. We don't recommend this style of CSS for that. If you need branching for user documentation then you should have properly drawn pictures.

However for technically minded readers, a 'computer program' style of instructions or specification is compact and ideal. In the main there are three basic processing steps:

In plain text these can get confusing and graphics are 'expensive' and fiddly to annotate.

This is the problem the flowchart.css style framework addresses.

Download css with embedded images

Download complete package including this reference

See below for user guide

User guide

Get started

There are two versions of the css. flowchart-min.css has all the the graphics embedded. so there are no other files to be copied to wherever you keep your styles. Alternatively, if you want to tweak the graphics or do major editing then you'll want flowchart.css and the graphic files to be in the same directory. Download the whole package for that.

Code basics

  • Everything is structured with uls containing lis. These may be nested as much as you like.
  • All you have to do is add the appropriate class to these elements and that's it!
ulflowchart, loop, test, pass, fail, case
libreak, call, continue, error, return
Otheru inside li.call

Follow along with the code

  • Title is first li
  • Normal lines are just lis
  • li.callCall some function or subroutine or goto a label.Use <u>some label</u> to highlight the target.
  • The next li has a content of <ul class=loop>
    • The first li of the ul.loop is the loop control
    • Plain lines are just lis
    • li.continue adds the glyph to indicate skip rest of loop then return to top.
    • li.break Breaks out of the loop
    • The last li automatically gets the back-to-top glyph.
    • The first li of the ul.test describes the test. ul.test will typically have just two li children.
      • This has passed the test. We're in a bunch of lis now
      • in a ul.pass block.
      • This has failed the test. Again we're rattling-off lis under a ul but this time with fail class.
    • Sometimes tests are case by case. (Often called a switch statement.)
      • Foo
      • The first li has the match value, in this case "Foo".
      • The remaining lis are normal.
      • Bar
      • Do this in the case of "bar".
      • Oh no! An li.error detected or thrown
      • All others
      • You often want a default case to finish
  • Finally we can li.return.
Here is the code to give the result on the left. (Tidied-up for clarity.)
<ul class=flowchart> <li>Title is first li <li>Normal lines are just lis <li class=call>li.call to call some <u>function</u> or subroutine or goto a label. <li>The next li has a content of <ul class=loop>; <li><ul class=loop> <li>The first li of the ul.loop is the loop control <li>Plain lines are just lis <li class=continue>li.continue adds the glyph to indicate skip rest of loop then return to top. <li class=break>li.break breaks out of the loop <li>The last li automatically gets the back-to-top glyph. </ul> <li><ul class=test> <li>The first li of the ul.test describes the test. <li><ul class=pass> <li>This has passed the test. We're in a bunch of lis now <li>in a ul.pass block. </ul> <li><ul class=fail> <li>This has failed the test. Again we're rattling-off lis under a ul but this time with fail class. </ul> </ul> <li><ul class=test> <li>Sometimes tests are case by case. (Often called a switch statement.) <li><ul class=case> <li>Foo <li>The first li has the match value, in this case "Foo". <li>The remaining lis are normal. </ul> <li><ul class=case> <li>Bar <li>Do this in the case of "bar". <li class=error>Oh no! An li.error detected or thrown </ul> <li><ul class=case> <li>All others <li>You often want a default case to finish </ul> </ul> <li class=return>Finally we can li.return. </ul>