Styling Mermaid Diagrams: font size etc

Share & showcase
1

I had difficulty figuring this out. There is a thread on it, but the suggestions there did not work for me (as it did not for the OP).

Turns out the issues was the dictionary nesting was off.

The following works for me:

%%{ init: {
    'flowchart': { 'curve': 'stepBefore' },
    'theme': 'base',
    'themeVariables':
        { 'fontSize': '12px', 'fontFamily': 'Inter'}
} }%%
flowchart LR;
  M[n00:?]  -- 0 -->   M0[n01: '0']
  M         -- 1 -->   M1[n02: '1']
 M0         -- 0 -->  M00[n03: '00']
 M0         -- 1 -->  M01[n04: '01']
 M1         -- 0 -->  M10[n05: '10']
 M1         -- 1 -->  M11[n06: '11']
M00         -- 0 --> M000[n07: '000']
M00         -- 1 --> M001[n08: '001']
M01         -- 0 --> M010[n09: '010']
M01         -- 1 --> M011[n10: '011']
M10         -- 0 --> M100[n11: '100']
M10         -- 1 --> M101[n12: '101']
M11         -- 0 --> M110[n13: '110']
M11         -- 1 --> M111[n14: '111']
3 Likes
2

This is an older post, I realize, but this does not work for me at all. Any help appreciated.

EDIT: To be more specific, the following works partially:

%%{init: {
	'flowchart': { 'curve': 'stepBefore'},
	'themeVariables': { 'fontSize': '20px', 'fontFamily': 'Didot'}
	}
}%%

In particular, the first line doesn’t do anything: no change in the curve style. However the second line works to change the font face and size. Incorrect formatting will kill the whole thing and the code works in the mermaid sandbox, so there’s not issue there.

Is there some issue with this as there is with the mermaid themes? Just a bug?