 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.9 (July 2025) |
| Compatibility policy | Master maintains backward compatibility. |
| MediaWiki | 1.41+ |
| |
| License | GNU General Public License 2.0 or later |
| Download | SeeExtension:Flex Diagrams#Download |
| Translate the Flex Diagrams extension if it is available at translatewiki.net | |
| Issues | Open tasks ·Report a bug |
Flex Diagrams is an extension that lets you create, and display, five different types of diagrams:
Each of these diagram types 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 editors for DOT and Mermaid are unfortunately not true graphical editors, but simply text editors that include a preview element.)
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 (seeavailable tags). From a command line, call the following:
gitclonehttps://gerrit.wikimedia.org/r/mediawiki/extensions/FlexDiagrams.git
You can view the code online, including version history for each file, on eitherGerrit orPhabricator.
Once you have obtained a "FlexDiagrams" directory and placed it in your /extensions directory, add the following to LocalSettings.php:
wfLoadExtension('FlexDiagrams');
A BPMN, DOT, Drawio/diagrams.net, Gantt, or Mermaid diagram can be created by creating a page in the appropriate namespace (BPMN:,DOT:,Drawio:,Gantt:, orMermaid: 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 shownbelow. 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.
Drawio/diagrams.net can be saved on the page in SVG format, instead of their native format, by adding the following to LocalSettings.php:
$wgFlexDiagramsDrawioUseSVG=true;
In addition, regardless of how such diagrams are stored, they can bedisplayed using SVG, both on their own pages and elsewhere, by adding the following to LocalSettings.php:
$wgFlexDiagramsDrawioRenderSVG=true;
Using SVG for the display allows the text in the diagram to be searachable, and displays better in dark mode.
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}}
 | This extension is included in the following wiki farms/hosts and/or packages: |