Now you can add flowcharts to your Moodle course without much hassle using the Flowcharts Moodle filter which display svg flowcharts using flowcharts.js by Adriano Raiano (http://adrai.github.io/flowchart.js, MIT license), which use raphael.js (MIT licence either).
How it works:
It parses text to find all commands. Actually, standard php part of filter changes command to proper for js wrapper first. Then php part passes filter options from admin page. Plugs in to page necessary js’s. And runs main function from wrapper.
Wrapper finds all commands and parse them splitting options and content. Both are parses too. Places of commands appearing replaces with div container with proper settings. And then it calls flowchart.js function to add svg flowchart to given container with parsed text and locally override options.
Syntax:
common syntax is laTeX like:
\flowChart[<options>]{<content>}
example:
\flowChart[inline, yes-text:yup, line-width: 2]{st=>start: start
in=>inputoutput: x,y
op=>operation: z=x+y
ou=>inputoutput: z
en=>end: end
st->in->op->ou->en}
You can download the latest version of the Flowchart moodle filter from this link: https://moodle.org/plugins/view/filter_flowchart which is compatible for Moodle 2.8 version.
For more details about the flowchart moodle filter, please check out the documentation at: https://bitbucket.org/belomir/moodle-filter_flowchart/wiki/Home
