Initially I tried jekyll-mermaid plugin
but the code is old and also didn’t work

So I turn towards another solution that does not need plugin
The solution works with some tweaks:

1. My site does not make use of footer-scripts.html so have to include it in my webpage template
   i.e. {% include footer-scripts.html %}
2. $(document) causes ReferenceError: $ is Not Defined.
   This is fixed by including <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

The followings are some testing results

Testing code

int main() {
    int b = 0;
    for (int i = 0; i < 42; i++)
        b = (b ^ 42) ^ (b - 42);
    return (b & 255);
}

Testing mermaid

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;