Help:Using Mermaid together with Semantic MediaWiki

Semantic extension(s): Semantic MediaWiki · Semantic Result Formats · Mermaid
Further extension(s):  -/-
Keyword(s): graphs · gantt · flowchart · orgchart


Table of Contents

While it is not technically a results format, extension "Mermaid"Provides a parser function to generate diagrams and flowcharts with the help of the mermaid script language can be used to generate graphic output from an inline query. result format "Gantt"Outputs the result as Gantt charts. requires Mermaid as well via extension "Semantic Result Formats"Provides additional formats for semantic queries.

This might be an alternative for people who cannot install extension "GraphViz"Allows embedding Graphviz markup and generates inline images required by results formats result format "Graph"Displays the relation between pages and result format "Process"Displays process graphs because they do not have sudo/admin rights on their server that are required to install graphviz and mscgen required by that extension.

Setting up Mermaid[edit]

See Mermaid Installation

Using Mermaid[edit]

See Mermaid Usage

Using Mermaid with Semantic MediaWiki[edit]

To use Mermaid with Semantic MediaWiki, use an inline query that uses a template to generate mermaid syntax inside a mermaid tag.

Some important considerations:

  • use the result format "Plainlist"Outputs results in a comma separated list, with additional outputs shown in parentheses. The output does not provide class attributes to HTML elements (default for queries without printout statements). with import-annotation=yes (or result format "Template"Uses a specified template to format and display the results for Semantic MediaWiki < 3.0.0)
  • mermaid ids (the first parts on lines in mermaid syntax) can't have spaces, so if you are using page names, they would have to be page names without spaces; one work around is to declare a guaranteed unique property such as {{#set: OrgChartID={{PAGEID}} }}
  • several queries with different templates within the mermaid tag may be needed to get all the mermaid syntax generated
  • Mermaid will not show the graph in preview mode, you need to save it (like some other results formats)
  • do not use <br> or similar in your template - this works when the template is viewed and the output copied into a mermaid tag, but breaks when the query is in the mermaid tag
  • it may be necessary to start the template call with a blank line [1]


When I set up the example there was no Mermaid on this wiki, so please see