Mermaid Macro

Last modified by Michael Xin on 2026/03/02 00:01

cogGenerate Diagrams using Mermaid
TypeXAR
CategoryMacro
Developed by

Michael Xin

Active Installs7
Rating
0 Votes
LicenseApache License 2.0

Success

Installable with the Extension Manager

Description

Generate Diagrams using Mermaid.

{{mermaid}}
graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
{{/mermaid}}

{{mermaid}}
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
{{/mermaid}}

{{mermaid}}
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
{{/mermaid}}

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v1.1

- Fix conflict with prototype.js

Get Connected