[[PageOutline(2-5,Contents,pullout)]]

= Render mermaid diagrams in wiki pages 

== Description

With this macro you can render mermaid diagrams in Trac wiki pages. [https://mermaid-js.github.io/mermaid/ mermaid] is a JavaScript library that can render sequence diagrams, flowcharts and Gantt charts from text in a similar manner as markdown. The library itself is MIT licensed.

[[Image(mermaid_demo.png)]]

The current version of this macro uses mermaid version 0.6.0. An example of using this library:

{{{
{{{#!Mermaid
sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response
}}}
}}}

Note that contrary to regular [t:WikiProcessors#AvailableProcessors wiki processors], Mermaid is spelled with capital M. The code above yields the following diagram on the wiki page:

[[Image(mermaid_example.png, border=2)]]

=== Mermaid live editor

You can use Mermaid live editor by double-clicking a chart. In the live editor you can:
1. preview Mermaid notation and
1. save the result directly to the Wiki page.

[[Image(mermaidliveeditor.png, border=2)]]

=== TracLink

In flow chart diagrams, it is possible to add TracLink to a box:

{{{
{{{#!Mermaid
%% Subgraph example
graph TB

    subgraph one
        a1(This is the text in the box)-->|label 1|a2
    end

    subgraph two
        b1((B1))-->b2((B2))
    end

    subgraph three
        c1>C1]-->c2{C2}
        subgraph four
            d4-->d5
            d4-->d4
        end
    end

    c1-.->d5
    b1-->a2
    a1==>b2

    %% A link to external URL
    click a1 "https://trac-hacks.org/wiki/MermaidMacro" "Tooltip for a callback"

    %% TracLink
    click b2 trac [[TracMermaid|This is a tooltip for a (Trac) link]]
}}}
}}}

This code will result in the following image:

[[Image(mermaid_graphTB.png, border=2)]]

In it, the top left box "This is the text in the box" and the box B2 are clickable.

See also: [[ListTagged(diagram, realm=wiki, exclude=MermaidMacro)]]

== !Bugs/Feature Requests

Existing bugs and feature requests for MermaidMacro are 
[report:9?COMPONENT=MermaidMacro here].

If you have any issues, create a 
[/newticket?component=MermaidMacro new ticket].

[[TicketQuery(component=MermaidMacro&group=type,format=progress)]]

== Download

Download the zipped source from [export:mermaidmacro here].

== Source

You can check out MermaidMacro from [/svn/mermaidmacro here] using Subversion, or [source:mermaidmacro browse the source] with Trac.

== Installation

General instructions on installing Trac plugins can be found on the [TracPlugins#InstallingaTracplugin TracPlugins] page.

== Recent Changes

[[ChangeLog(mermaidmacro, 3)]]

== !Author/Contributors

**Author:** [wiki:tkob-trac] [[BR]]
**Maintainer:** [[Maintainer]] [[BR]]
**Contributors:**