How to increase node size in MermaidJS?

Question

I want to know if there is a way to set a specific size in a node shape using mermaid flowchart

I managed to change node color using:

style D fill:#fc6b03

and tried add size this way but did not work:

style D fill:#fc6b03 size:100

Answer 1

The simplest way might be to define a class that increases your node's font-size.

D:::big
classDef big font-size:100px,fill:#fc6b03

Answer 2

The width property gets overridden by other SVG attributes so originally I settled on a workaround with &#emsp; full width spaces in the node text. You can still see the Stack Overflow history for that variant, but right after posting I found a far better workaround that nearly qualifies as a solution (only caveat is that you can't set a fixed width, the box will still vary width based on content), but it works for most cases:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js" integrity="sha256-mm3Re3y7xlvh+yCD+l/Zs1d+PU0AEad93MkWvljfm/s=" crossorigin="anonymous"></script>

<pre class="mermaid">
flowchart TD
    %% Using classes, see end of diagram:
    Source --> Proxy:::wide
    
    Proxy --> Target1
    Proxy --> Target2
    
    %% Other workaround option:
    Proxy --> Target3[.&emsp;&emsp;&emsp;Target3&emsp;&emsp;&emsp;.]
    
    classDef wide padding:100px
</pre>

It renders like this:

Which is good enough for me for now.