Filters: flowchart

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

flowchart 0.81

Release notes

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

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

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



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


  • more standart options to settings
Moodle 2.8

Version information

Version build number
Version release name
Stable version
MD5 Sum
Supported software
Moodle 2.8
  • This is the latest release for Moodle 2.8

Version control information

Version control system (VCS)
VCS repository URL
VCS branch

Default installation instructions for plugins of the type Filters

  1. Make sure you have all the required versions.
  2. Download and unpack the filter plugin.
  3. Place the folder (eg "myfilter") in the "filter" subdirectory.
  4. Visit to finish the installation