## Filters: flowchart

filter_flowchart
Maintained by Сергей Роганов
Render svg flowcharts using flowcharts.js by Adriano Raiano (http://adrai.github.io/flowchart.js, MIT license), which use raphael.js (MIT licence either)
15 sites
12 fans

# 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}


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

### Installation

as zip

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

### Contributors

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

• Thu, Apr 9, 2015, 8:21 PM
If plugin is useful, please feedback even if there is no troubles with it, for statistics.
• Mon, Apr 13, 2015, 2:50 AM
Hi Sergey, thank you for your contribution. I'll be reviewing your plugin over the next week.

Tomek
• 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 • 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 demo.moodle.net were allow install pugins it already would be tested 2.5 is what in ubuntu repo by default☺ • 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. • 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(
'showProcessingMessages' => 'false',
'messageStyle' => 'none'
));
• Thu, Apr 16, 2015, 11:06 AM
OK, moodle 2.8 has been installed and last version (0.71) works for me.
• 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 https://docs.moodle.org/dev/Plugin_contribution_checklist .
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!
• 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!

• 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.
• 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');
• 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.
• 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.
• 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
• 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: