Extension:Flex Diagrams

From mediawiki.org
Jump to navigation Jump to search
MediaWiki extensions manual
OOjs UI icon advanced.svg
Flex Diagrams
Release status: beta
Implementation Special page
Description An extension that allows for creating and modifying diagrams in various formats using graphical editors.
Author(s) Yaron Koren <yaron57@gmail.com> and Sahaj Khandelwal
Latest version 0.1 (July 2020)
Compatibility policy master
MediaWiki 1.29+
License GNU General Public License 2.0 or later
Download See Extension:Flex Diagrams#Download
  • $wgFlexDiagramsEnabledFormats
Check usage and version matrix.

Flex Diagrams is an extension that lets you create, and display, diagrams using three different JavaScript libraries: bpmn-js (for BPMN diagrams), DHTMLX Gantt (for Gantt charts), and Mermaid (for various kinds of diagrams, using the Mermaid JavaScript library). Each of these three gets its own namespace.

Any such diagram page will get, in addition to the standard "Edit" tab, an "Edit diagram" tab that allows for editing these diagrams in a graphical way. Thus, any diagram can be edited either as text, or graphically. (Although the Mermaid editor is unfortunately not a true graphical editor, but simply a text editor that includes a preview element.)


You can download the Flex Diagrams code, in .zip format, here: https://github.com/wikimedia/mediawiki-extensions-FlexDiagrams/archive/0.1.zip

You can also download the code directly via Git from the MediaWiki source code repository (see available tags). From a command line, call the following:

git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/FlexDiagrams.git


Once you have obtained a "FlexDiagrams" directory and placed it in your /extensions directory, add the following to LocalSettings.php:

wfLoadExtension( 'FlexDiagrams' );


Creating diagrams[edit]

A BPMN, Gantt, or Mermaid diagram can be created by creating a page in the appropriate namespace (BPMN:, Gantt:, or Mermaid: respectively), for example:

BPMN:Approval process

Once the page is created (or while editing in either "Source" or "Visual Editor") a new edit tab called "Edit diagram" (or "Create diagram" if the page has not been saved yet) will be shown, clicking on this editor launches an interactive diagram editor as shown below.

Displaying diagrams[edit]

Any diagram can be displayed on any page by using the #display_diagram function. This function takes in a single argument, a page name, and displays the diagram defined on that page. An example would be:

{{#display_diagram:BPMN:Approval process}}


Version history[edit]

  • 0.1 - July 22, 2020 - Initial version