DEV Community

Retiago Drago
Retiago Drago

Posted on

7 1

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


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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

Decode mermaid graph

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! 📊✨

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay