Diagrams
There are at least 6 different Diagram extensions for MediaWiki. Which is best? Which one comes with Meza? Which one addresses my needs or use case?
This article was updated in Dec. 2025 when the Graph extension (forked repo) was archived due to XSS risks in a public wiki.
Note: There is a distinction between "Graphing" data (think Excel spreadsheets and pie charts) vs. "Diagramming" which uses data in a formal grammar or notation to produce a visualization (think UML).
Kroki[edit]
Kroki may be the most expansive in terms of the types of diagrams it supports[1] - but to use it you should setup your own Kroki service endpoint (that abstracts and handles all the various diagramming frameworks).
Diagrams[edit]
The Diagrams extension created by Sam Wilson displays GraphViz, Mscgen, PlantUML, and Mermaid diagrams in a wiki. It can be configured to use a small web service to render the images.
It replaces the GraphViz, PlantUML, and Mermaid extensions in some ways, but does not (yet) support all features of all of them. The original reason for creating a new extension was to not store the rendered images as wiki files (as the GraphViz extension did). Still, it has changed to become a general diagramming extension.
Flex Diagrams[edit]
Using the Flex Diagrams extension, each diagram must be handled in it's own namespace - where it's really a custom content model. This means that no other markup is allowed. So, you can't use wikitext (e.g. Categories) at all. A somewhat useful if not confusing by-product of this is that the source code of the diagram is displayed inline with the diagram when reading the page.
While Flex Diagrams allows you to create 5 different types of diagrams - including all those available through Mermaid, the limitation that you can not combine wiki markup in the 'sandboxed' implementation of Flex Diagrams makes us prefer creating Mermaid diagrams using the Mermaid extension.
Mermaid[edit]
There is a brief, visual comparison of Mermaid vs Flex Diagrams on the Sales Cycle page. For more, see Using Mermaid in MediaWiki and the Pie chart page of examples. Rendering of the Mermaid diagrams seems particularly slow, and that is something that needs investigation.
DrawioEditor[edit]
DrawIO (diagrams.net) is popular with the business crowd - so important to any enterprise wiki. Extension:DrawioEditor is a 'cheap' solution in that it wraps the functionality in an iframe. However there are serious caveats to that approach: privacy, and unpredictability since it is not API driven.
SVG[edit]
The simplest diagramming solution starts with SVG (Scalable Vector Graphics). If users can create, upload and collaborate on SVG graphics then you've already provided a decent solution. Enabling svg file uploads is fairly easy in MediaWiki[2]. And as of REL1_41 you can enable native browser rendering. MediaWiki automatically scans svg files for HTML and JavaScript during upload.
SVGEdit[edit]
You can use the the SVGEdit extension to edit those graphics on-wiki. Unfortunately, the extension is still marked "experimental" and has not been updated in a long time despite early promise that it would be rolled out to WMF wikis back in the 2012 time-frame. It needs a new maintainer if you want to resurrect it. For instance, the wiki points to the old Google Code hosting for the underlying SVG-Edit project whereas the project has been hosted at GitHub for years. The project in phabricator is disabled for publishing to WMF wikis and there is no issue queue for even reporting bugs. The recent version of the project is available as an in-browser editor via Netlify so you can easily try it out outside of MediaWiki. Meanwhile, as of 12/2025, the MediaWiki extension version has a JavaScript error preventing it from working on this wiki[3].
XSS Mitigation[edit]
The extension loads the actual SVG-edit tool within an <iframe> element and handles communication using the postMessage interface. This allows it to run the editor in a separate JavaScript context, which reduces the attack surface from malicious SVG code. You could even use a separate domain for the SVG-edit instance to further enhance security by isolating cookies and sensitive data.[4]
Layers[edit]
An interesting new project Extension:Layers provides an industry-standard interface (in other words, similar to Figma, PhotoShop, or Canva) to annotate images non-destructively. Opposite of SVGEdit, it explicitly does not support editing SVG graphics due to the inherent XSS vector because SVG can contain JavaScript. Layers does implement a Content Security Policy[5]
Cognitive Process Designer[edit]
Cognitive Process Designer works with SemanticMediaWiki to create Business Process Model and Notation (BPMN) diagrams. BPMN has been established for 20+ years.
References[edit]
- ↑ https://docs.kroki.io/kroki/diagram-types/
- ↑ https://www.mediawiki.org/wiki/Manual:Image_administration#SVG
- ↑ https://github.com/freephile/meza-conf-public/issues/8 (The link points to a private configuration repo for this wiki. It will probably become public as time allows.)
- ↑ https://www.mediawiki.org/wiki/Extension:SVGEdit#Security
- ↑ https://github.com/slickdexic/Layers/blob/main/docs/CSP_GUIDE.md
