Customising Mermaid diagram font and colors

In the past, I've been using Microsoft Powerpoint to draw diagrams. However, recently I've been intrigued to try out diagram-as-code as it fits well to my mode of working: I can organise my code, docs (in markdown) and diagrams together in a single repository, and be able to update them easily when I'm on Linux. I find updating Powerpoint on Linux or on mobile is difficult even with Powerpoint web version.

I've been reading up the book Creating Software with Modern Diagramming Techniques by Ashley Peacock which covers mermaid diagramming and I've grown to love the benefit that diagram-as-code provides. However, not all diagrams can be drawn easily / clearly with mermaid. Sometimes I still need to use Powerpoint. The only issue is how do I get both mermaid diagram to be consistent with my Powerpoint diagram (especially fonts as it's not mentioned in mermaid docs).

After looking at Mermaid flowchart CSS documentation and digging into the html page containing the diagram, below are the configuration that I use inside my markdown:

<style>
.nodeLabel, .flowchartTitleText
    { font-family: 'firago', 'trebuchet ms' !important; }

.GreenShape > rect, .GreenShape > g *, .GreenShape > path, .GreenShape > circle, .GreenShape > polygon
    { fill: #009245 !important; color: #fff !important; stroke: #000 !important; stroke-width: 2px !important; }

.YellowShape > rect, .YellowShape > g *, .YellowShape > path, .YellowShape > circle, .YellowShape > polygon
    { fill: #f7931e !important; color: #000 !important; stroke: #000 !important; stroke-width: 2px !important; }

.RedShape > rect, .RedShape > g *, .RedShape > path, .RedShape > circle, .RedShape > polygon
    { fill: #cb4b4f !important; color: #fff !important; stroke: #000 !important; stroke-width: 2px !important; }

.BlueShape > rect, .BlueShape > g *, .BlueShape > path, .BlueShape > circle, .BlueShape > polygon
    { fill: #0071bc !important; color: #fff !important; stroke: #000 !important; stroke-width: 2px !important; }

.PurpleShape > rect, .PurpleShape > g *, .PurpleShape > path, .PurpleShape > circle, .PurpleShape > polygon
    { fill: #9200c2 !important; color: #fff !important; stroke: #000 !important; stroke-width: 2px !important; }

.GreyShape > rect, .GreyShape > g *, .GreyShape > path, .GreyShape > circle, .GreyShape > polygon
    { fill: #eee !important; color: #000 !important; stroke: #000 !important; stroke-width: 2px !important; }

.Boundary > rect
    { fill: #fff !important; color: #000 !important; stroke: #aaa !important; stroke-width: 2px !important; stroke-dasharray: 3 3 !important; stroke-linecap: round !important; }
</style>

With the above, I can set my mermaid diagram using the classDef directive as per mermaid docs.

So far I've tried (& specified in the css):

<rect> for node with round edges
<polygon> for rhombus
<path> for cylindrical and
<circle> for circular shapes.

Another item is the directive .GreenShape > g *. It's required to set the shape's text color because the structure of each shape is as follows:

<g class="GreenShape">
    <rect ...></rect>
    <g class="label">
        <foreignObject...>
           <div ...>
               <span...>Shape label</span>
           </div>
        </foreignObject>
    </g>
</g>

Blog

Customising Mermaid diagram font and colors

Leonard Soetedjo

Join Our Newsletter. No Spam, Only the good stuff.

Related