Add flowcharts to your moodle course using Flowchart Moodle Filter

AI in Education Leaderboard Post Page
Ai In Education Square Post Page

--- Advertisement ---

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:

Leave a Reply

Your email address will not be published. Required fields are marked *

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

The Latest

The eLearn Podcast

--- Advertisement ---

Subscribe to our newsletter

Education technology has the power to change lives. 

To get the latest news, information and resources about online learning from around the world by clicking on the button below.