Modify

Opened 3 months ago

Closed 3 months ago

#13042 closed enhancement (fixed)

Add support for TracLinks in Mermaid flow chart diagrams

Reported by: Christian Boos Owned by: tkob-trac
Priority: normal Component: MermaidMacro
Severity: normal Keywords:
Cc: Trac Release:

Description

It seems this is the only type of diagram which supports adding links, in mermaid.

The patch will be on top of the patch from #13039.

In this patch, I also add a link to mermaid.css. You can obtain it from https://github.com/knsv/mermaid/raw/master/dist/mermaid.css and copy it below tracmermaid/htdocs.

Attachments (1)

0004-TH13042-Add-support-for-TracLinks-in-Mermaid-flow-ch.patch (5.9 KB) - added by Christian Boos 3 months ago.
incremental patch, on top of patch 002 in #13039 (003 was the upgrade to mermaid 6.0.0, too big and not interesting as a patch)

Download all attachments as: .zip

Change History (6)

Changed 3 months ago by Christian Boos

incremental patch, on top of patch 002 in #13039 (003 was the upgrade to mermaid 6.0.0, too big and not interesting as a patch)

comment:1 Changed 3 months ago by tkob-trac

Thank you for the enhancement patch. I would like to see how this works. Could you show me some working Mermaid text?

comment:2 Changed 3 months ago by Christian Boos

Ah, well, it's in the patch ;-)

82	            # TracLinks link (transformed to native):
83	            #   click A trac TracLinks
84	            #   click A trac r123
85	            #   click A trac [123]
86	            #   click A trac [[TracLinks|Anything that can be parsed as a link]]

i.e. I hijacked the "click" syntax from mermaid. If the click callback is named "trac", we transform the click parameters to take the resulting url.

Full example:

{{{#!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


    click a1 callback "Tooltip for a callback"
    click b2 trac [[TracMermaid|This is a tooltip for a (Trac) link]]
}}}

The "B2" node would link to the TracMermaid page.

comment:3 Changed 3 months ago by Christian Boos

Note that besides adding the mermaid.css from 6.0.0 as I suggested above, you could also upgrade mermaid.min.js itself to 6.0.0. It works fine for me.

Last edited 3 months ago by Christian Boos (previous) (diff)

comment:4 Changed 3 months ago by tkob-trac

OK, I have been puzzled by its behavior, but finally understand that the click syntax is relatively new feature of mermaid and upgrade to 0.5.2+ is prerequisite anyway. I will apply this.

comment:5 Changed 3 months ago by tkob-trac

Resolution: fixed
Status: newclosed

In 16178:

Add support for TracLinks in Mermaid flow chart diagrams

An enhancement patch by cboos, closes #13042

This commit also upgrade mermaid.js to 6.0.0.

Modify Ticket

Change Properties
Set your email in Preferences
Action
as closed The owner will remain tkob-trac.
The resolution will be deleted. Next status will be 'reopened'.

Add Comment


E-mail address and name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.