Extension:Flex Diagrams
![]() Release status: stable |
|
---|---|
![]() |
|
Implementation | Special page , ContentHandler |
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.5.2 (February 2024) |
Compatibility policy | Master maintains backward compatibility. |
MediaWiki | 1.33+ |
License | GNU General Public License 2.0 or later |
Download | See Extension:Flex Diagrams#Download |
Example | meza.wiki/flexdiagrams |
|
|
Issues | Open tasks · Report a bug |
Flex Diagrams is an extension that lets you create, and display, diagrams using four different JavaScript libraries: bpmn-js (for BPMN diagrams), DHTMLX Gantt (for Gantt charts), Mermaid (for various kinds of diagrams, using the Mermaid JavaScript library), and Drawio/diagrams.net. Each of these four 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.)
Download[edit]
You can download the Flex Diagrams code, in .zip format, here.
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
Installation[edit]
Once you have obtained a "FlexDiagrams" directory and placed it in your /extensions directory, add the following to LocalSettings.php:
wfLoadExtension( 'FlexDiagrams' );
Usage[edit]
Creating diagrams[edit]
A BPMN, Gantt, Mermaid or Drawio diagram can be created by creating a page in the appropriate namespace (BPMN:
, Gantt:
, Drawio:
, or 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.
Adding links to BPMN diagrams[edit]
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.
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}}
Screenshots[edit]
-
The "edit diagram" interface for a BPMN diagram
-
The display of this BPMN diagram
-
The "edit diagram" interface for a Gantt chart
-
The "edit diagram" interface for a Mermaid diagram
Version history[edit]
- 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
- 0.3 - October 4, 2021 - Removed handling for MW < 1.31; added handling for MW 1.38+; added zooming for BPMN and Gantt; changed red links to diagrams to point to "action=editdiagram"; added "Leave site?" popup to diagram edit interface; other fixes
- 0.4 - March 24, 2022 - Added Drawio/diagrams.net handling; upgraded Mermaid version; code improvements
- 0.5 - March 30, 2023 - Removed handling for MW < 1.33; improved handling for MW 1.38+; improved colors and added "weeks" option to Gantt charts
- 0.5.1 - July 12, 2023 - Improved support for MW >= 1.33; updated Mermaid to 10.2.1
- 0.5.2 - February 19, 2024 - Coding improvements
See also[edit]
- Diagram extensions
- Alternative: Extension:External_Data/Local_programs#Tag emulation mode (examples)
![]() | This extension is included in the following wiki farms/hosts and/or packages: This is not an authoritative list. Some wiki farms/hosts and/or packages may contain this extension even if they are not listed here. Always check with your wiki farms/hosts or bundle to confirm. |
- Stable extensions
- Special page extensions
- ContentHandler extensions
- GPL licensed extensions
- CanonicalNamespaces extensions
- HtmlPageLinkRendererEnd extensions
- MakeGlobalVariablesScript extensions
- ParserAfterTidy extensions
- ParserFirstCallInit extensions
- SkinTemplateNavigation::Universal extensions
- All extensions
- Extensions included in Canasta
- Extensions included in Miraheze
- Extensions included in MyWikis
- Extensions included in WikiForge
- Graph extensions
- Extensions in Wikimedia version control