Filters: flowchart

Maintained by Picture of Сергей РогановСергей Роганов
Render svg flowcharts using flowcharts.js by Adriano Raiano (, MIT license), which use raphael.js (MIT licence either)
13 sites
13 fans
Current versions available: 1

Flowchart Moodle Filter

LMS Moodle filter to render/display flowcharts It uses flowchart.js by Adriano Raiano (, MIT license) that uses Raphaël js (, MIT license)


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


Syntax of content of the command see in flowchart.js project (

There could be any options in the command. Name them like options from example on the flowchart.js project page to make effect. Both :and = could be name-value separator.

There are four extra options:

  • background-color : <html/css color>
  • align : <html/css align>
  • vertical-align : <html/css vertical-align> // will effect onli for inline flowchart
  • display : <css display prperty>

Last three are not nessessery for manual operating. Background-color will affect div container. Displaying inline could be set up via singleinline.


as zip


  • clone this repo
  • name the folder by filter name (flowchart)
  • copy this folder into moodle's filter folder on server

How it works

It parses text to find all commands. Actually, standart 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 nessessery 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.


  • more standart options to settings


Screenshot #0


Picture of Сергей Роганов
Сергей Роганов (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Picture of Tomasz Muras
    Mon, Apr 13, 2015, 2:50 AM
    Hi Sergey, thank you for your contribution. I'll be reviewing your plugin over the next week.

  • Anthony Borrow
    Mon, Apr 13, 2015, 1:31 PM
    So just a couple of things to fixup before we can consider approving this plugin. First, let's address the validation warnings:

    Warning Maturity information ($plugin->maturity) not found in version.php
    Warning Release name ($plugin->release) not found in version.php
    Warning Moodle requirements ($plugin->requires) not found in version.php

    Second, I noticed that this is listed as being for Moodle 2.5. Has there been any testing on later versions of Moodle? Version 2.5 is no longer supported so it would be good if there were a version of the plugin available for a supported version of Moodle. Peace - Anthony
  • Picture of Сергей Роганов
    Tue, Apr 14, 2015, 12:50 AM
    Thank you for response!
    Warnings are fixed in 0.7 version (already merged in master).
    I do belive plugin will work in all modern moodle versions, because js do the work, php part is almost dev wiki example.
    But I'll try to set up moodle 2.8 to see how it works.
    ps: if were allow install pugins it already would be tested 2.5 is what in ubuntu repo by default☺
  • Picture of Tomasz Muras
    Wed, Apr 15, 2015, 4:45 AM
    I didn't get it to run, I get:
    Error: ReferenceError: initFlowcharts is not defined
    in Moodle 2.8.
    I'll try to figure out why is this happening, for some reason flowchart-wrapper.js is not included in the page.
  • Picture of Tomasz Muras
    Wed, Apr 15, 2015, 4:51 AM
    OK, this is because of the 2nd argument you're passing to js :
    $page->requires->js(new moodle_url('/filter/flowchart/js/flowchart-wrapper.js'), array(
    'delayStartupUntil' => 'onload',
    'showProcessingMessages' => 'false',
    'messageStyle' => 'none'
  • Picture of Сергей Роганов
    Thu, Apr 16, 2015, 11:06 AM
    OK, moodle 2.8 has been installed and last version (0.71) works for me.
  • Picture of Tomasz Muras
    Wed, Apr 22, 2015, 3:49 AM
    Hi Sergey,

    Works well now!
    Couple of minor things:
    1. You're storing settings in mdl_config and not in mdl_config_plugins, see "Settings storage" point on .
    2. flowchart-wrapper.js could be loaded and written using "Moodle JS way" - by using YUI loader and M namespace. I'm not sure how critical that is, I'll ask someone else to have a quick look at JS code.
    3. Since you're including 3-rd party library, you could create thirdpartylibs.xml file.

    I don't think any of the above is a deal breaker, your plugin looks good besides that!
  • Picture of David Mudrák
    Wed, Apr 22, 2015, 4:24 AM

    Thanks Tomek for the review.

    1. The settings storage is best to have done correctly since the very start. This is one of those things that are annoying to process during the upgrade. Sergey, please consider fixing this yet before we approve the plugin.
    2. I would not suggest any massive refactoring of JS at the moment. The Moodle core itself is slowly moving away from YUI and there are new ways of handling JS under research. On the other hand, there are certain patterns that always work in JS, regardless the actual framework - such as namespacing / wrapping the code to avoid pollution and collisions in the global scope.

    Marking this as needing more work yet so that Sergey has a chance to eventually fix the setting storage. Looking forward to approve this soon!

  • Picture of Сергей Роганов
    Thu, Apr 23, 2015, 9:27 PM
    Settings storage issue is fixed.
    New version was tested with moodle 2.8
    Previous versions are hided now (and will be deleted in future)
    Thank you for your work and patience to novice.
  • Picture of Tomasz Muras
    Fri, May 1, 2015, 3:57 AM
    Hi Sergey,

    Notation like this: $CFG->filter_flowchart/yes_text is parsed by PHP as
    $CFG->filter_flowchart (division) yes_text

    and hence causes warnings:
    Notice: Undefined property: stdClass::$filter_flowchart in /var/www/html/vanilla/m283/filter/flowchart/filter.php on line 44
    Notice: Use of undefined constant no_text - assumed 'no_text' in /var/www/html/vanilla/m283/filter/flowchart/filter.php on line 44
    Warning: Division by zero in /var/www/html/vanilla/m283/filter/flowchart/filter.php on line 44

    You can use this instead to fetch config values:
    get_config('filter_flowchart', 'yes_text');
  • Picture of Сергей Роганов
    Sat, May 9, 2015, 11:59 PM
    Sorry for this stupid error.
    I had turn on error messages for moodle to see if something is wrong.
    In last uploaded version it seems that it's OK.
    At least I hav not any error messages and warnings.
    Some more options are added to filter settings.
    Thank you.
  • Picture of Tomasz Muras
    Wed, May 20, 2015, 4:11 AM
    Hi Sergey,

    Sorry for the delay, I finally had a time to check your latest version. Looks good, my +1 to approve it.
  • Picture of john watson
    Sat, Apr 14, 2018, 3:33 PM
    A flowchart is a visual portrayal of the succession of steps and choices expected to play out a procedure. Each progression in the succession is noted inside an outline shape. Steps are connected by associating lines and directional bolts. This enables anybody to see the flowchart and intelligently take after the procedure from start to finish. do my assignment
  • Picture of Keenan Simpson
    Wed, May 9, 2018, 9:51 PM
    Good day,
    I have came across the plugin for filter_flowchart and installed it on moodle V3.4.
    Is it possible to give me a breakdown on how the function works/ trigger the option in the site.

    Not sure how to activate this function and for use? I might be missing something.

    I done the following:
    - Site administration
    - Plugins > select plugin and installed
    - done

  • Picture of King Lozano
    Wed, Jan 27, 2021, 10:55 AM
    Good day!

    Is there an update with this plugin for Moodle 3.10?

    Thank you in advance!
1 2
Please login to post comments