SUBSCRIBE

Add flowcharts to your moodle course using Flowchart Moodle Filter

--- Advertisement ---

Connected 2023
Connected Conference OpenLMS

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).
 
Flowchart-filter
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

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

Connected Conference OpenLMS

--- Advertisement ---

Post Pages - Sidebar 4 - CourseMerchant

--- Advertisement ---

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