Add flowcharts to your moodle course using Flowchart Moodle Filter

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 (, 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.


common syntax is laTeX like:



\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

You can download the latest version of the Flowchart moodle filter from this link: which is compatible for Moodle 2.8 version.

For more details about the flowchart moodle filter, please check out the documentation at:

Jaswinder Singh

Jaswinder Singh, passionate about using Moodle in improving the Indian Education System and reaching the students in far flung areas where still education seems to be a impossible prospect of life. He is the author of the popular Moodle Book "How to use Moodle 2.7". In October 2016, Jaswinder was elected as the Moodle User's Association Committee member - the first to make it from India.

Related Articles