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:

Post Pages - Post Inline - WIRIS


\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:


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.