Flowchart Moodle Filter

LMS Moodle filter to render/display flowcharts It uses flowchart.js by Adriano Raiano (http://adrai.github.io/flowchart.js, MIT license) that uses Raphaël js (http://raphaeljs.com, MIT license)

Using

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}

See more examples.

Syntax

Syntax of content of the command see in flowchart.js project (http://adrai.github.io/flowchart.js/).

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 : <css display prperty>

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

Administrating

Several options are available with admin settings. They will be applied automatically for all flowcharts, but can be overridden in each command options.

Installation

from moodle.org

• checkout https://moodle.org/plugins/view/filter_flowchart (not available now)

as zip

• download as zip (see https://bitbucket.org/belomir/moodle-filter_flowchart/downloads)
• install to moodle system via admin interface

manually

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

Todo:

• more standart options to settings