Mermaid js flow chart - Full list of available options to style a node

Question

Is there some documentation of the full list of options available in the mermaid statements documents here: https://mermaid.js.org/syntax/flowchart.html#styling-a-node and https://mermaid.js.org/syntax/flowchart.html#styling-and-classes ?

The example given in the mermaid documntation:

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

shows fill, stroke, stroke-width etc, but it does not accept font-size, nor other css styles I have tried.

Is there a list somewhere with a complete list of what can follow style {nodeId}?

Answer 1

This paragraph from page 170-171, the official guide to mermaid.js may be helpful:

"The syntax for styling nodes starts with the style keyword and looks like style ID CSS. Here, we have the following:
style: This is the style keyword.
ID: This is the ID of the node to be styled.
CSS: This is the CSS code to be applied to the style. Remember that Mermaid generates SVG code, which means that the CSS styling should be suitble for SVG elements such as fill and stroke.

I take this as the CSS styling depends on what element your chart has, rather than a full list of parameters that you can use (technically you can, as long as you have the nodes or lines that use these parameters).

The easiest way (for me) to see what CSS are available is to check them using brower:

1. Open a sample flowchart in Mermaid Live Editor

Let's use a sample as an example.

2. Open the svg in a new tab in Chrome (or other) browser

3. Right click chart in the new tab, choose "Inspect element"

Unfold the tag, you will see all CSS parameters, including font-size, used for this svg chart:

Hope this is helpful.