Colouring Your Arrow / Link with `linkStyle` in Mermaid Markdown

Welcome back to Technically Speaking, your sanctuary for diving deep into the labyrinthine wonders of technology. Today, we turn the spotlight onto Mermaid, a marvelous tool that's become my go-to for diagramming and documentation. Specifically, we're going to add some splashes of colour to the arrows or links in our Mermaid Markdown flowcharts. Let's get to it!

Setting the Stage

First things first, we need a basic flowchart or graph to work with. Here's a snippet from my upcoming post on steganography, showcasing a flowchart that I built using Mermaid Markdown:

graph TB
    Decode([Decode])
    End([End])
    ULhbCover[/"Unmerged Left-half
    bits Cover Image"/]
    CULhbHidden[/"Cover Image-sized Unmerged Left-half
    bits Hidden Image"/]
    ULhbHidden[/"Unmerged Left-half
    bits Hidden Image"/]
    Merged[/Merged Image/]
    Lhb[LHB Mapping]
    Rhb[RHB Mapping]

    Decode --> Merged
    Merged --> Lhb & Rhb
    Lhb --> ULhbCover
    Rhb --> CULhbHidden
    CULhbHidden --"pass on hidden image
    position in merged image"--> ULhbHidden
    ULhbCover & ULhbHidden --> End

The Art of Styling Links

When I first stumbled upon the Mermaid documentation on styling links, it seemed simple enough. Just use this one-liner:

linkStyle default stroke:green;

The default parameter applies the styling to all links or arrows in your chart. However, there was one hiccup: the documentation didn't specify where to put this mysterious one-liner. Initially, I faced errors that had me scratching my head. Then, eureka! It occurred to me to place the styling directive after all the link syntax, like so:

graph TB
    Decode([Decode])
    End([End])
    ULhbCover[/"Unmerged Left-half
    bits Cover Image"/]
    CULhbHidden[/"Cover Image-sized Unmerged Left-half
    bits Hidden Image"/]
    ULhbHidden[/"Unmerged Left-half
    bits Hidden Image"/]
    Merged[/Merged Image/]
    Lhb[LHB Mapping]
    Rhb[RHB Mapping]

    Decode --> Merged
    Merged --> Lhb & Rhb
    Lhb --> ULhbCover
    Rhb --> CULhbHidden
    CULhbHidden --"pass on hidden image
    position in merged image"--> ULhbHidden
    ULhbCover & ULhbHidden --> End

    linkStyle default stroke:green;

And just like that, it worked! Behold the green strokes in all their glory:

Uncharted Waters

There are still a couple of nuances that have eluded me. One is colouring the arrowhead itself; I did ask BingChat for a solution, but it involved intricate CSS—a no-go for this Markdown-centric endeavor. Secondly, I'm on a perpetual quest for a contrasting background. Dark mode is my jam, and unfortunately, Mermaid's PNG output doesn't play well with it. I tried to set a solid background colour, but so far, no dice. You could try it live yourself here.

So there we have it—your links now boast eye-catching strokes, although the quest for perfect styling remains ever ongoing. If you've got insights on the elusive arrowhead colouring or background contrast, do share! Until then, keep exploring, keep questioning, and most importantly, keep Technically Speaking.

Happy diagramming! 📊✨