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']
1 Like