Customising Mermaid diagram font and colors
Published: 2024-02-13 02:35:21

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](https://play.google.com/store/books/details?id=8IK0EAAAQBAJ) 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](https://mermaid.js.org/syntax/flowchart.html#css-classes) and digging into the html page containing the diagram, below are the configuration that I use inside my markdown:

```css
<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:

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