[[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://knsv.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)]]

Current version of this macro uses mermaid version 0.6.0.

=== 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
 2. save the result directly to the Wiki page.

[[Image(mermaidliveeditor.png)]]

=== TracLink

In flow chat 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]]
}}}
}}}

== !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.

== Example

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

This yields the following diagram on the page:

[[Image(mermaid_example.png)]]

== Recent Changes

[[ChangeLog(mermaidmacro, 3)]]

== !Author/Contributors

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