| Flex Diagrams
Release status: beta
|Description||An extension that allows for creating and modifying diagrams in various formats using graphical editors.|
|Author(s)||Yaron Koren <email@example.com> and Sahaj Khandelwal|
|Latest version||0.2 (November 2020)|
|Compatibility policy||Master maintains backward compatibility.|
|License||GNU General Public License 2.0 or later|
|Download||See Extension:Flex Diagrams#Download|
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.2.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
To view the code online, including version history for each file, go here: view Flex Diagrams code
Once you have obtained a "FlexDiagrams" directory and placed it in your /extensions directory, add the following to LocalSettings.php:
wfLoadExtension( 'FlexDiagrams' );
A BPMN, Gantt, or Mermaid diagram can be created by creating a page in the appropriate namespace (
Mermaid: respectively), for example "BPMN:Approval process".
If you go to such a page before it is created, you will see a tab there, defined by Flex Diagrams, called "Create diagram". Clicking on it will launch an interactive diagram editor as shown below. Similarly, any such page, after being created, will have a tab called "Edit diagram", which will launch the same editor.
One customization specific to the Flex Diagrams extension is that, when generating a BPMN diagram, you can make any element be a link to a different wiki page. To do this, add the name of the page you want to link to, within double square brackets, at the end of the element title - after either a space or a newline. An example would be a node called "Get approval". Let's say there's a separate page, "BPMN:Approval process", which details all the steps of the process referred to as "Get approval". We can make the "Get approval" node link to "BPMN:Approval process" by changing its label to read "Get approval [[BPMN:Approval process]]". When the diagram is displayed, the link part will not be shown on the screen; instead, the entire node will appear as blue and become a clickable link. You can see examples of how such linking gets displayed in the gallery below.
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:
- 0.1 - July 22, 2020 - Initial version
- 0.2 - November 16, 2020 - Fix handling for MW < 1.33; linking capability added to BPMN; JS fixes; disable caching for BPMN display; other fixes