#1

Things I have tried

  • Adding font-size to div-mermaid
  • Searched for an option like --mermaid-font but just for font size
  • Adding %%{config: { 'fontFamily': 'JetBrains Mono', 'fontSize': 0.8rem, 'fontWeight': 100} }%% to the start of the mermaid codeblock

What I’m trying to do

I’m just trying to change the font size that the mermaid diagrams uses

#2

I use this:

%%{init: {'theme': 'base', 'themeVariables': { 'fontSize': '13px', 'fontFamily': 'Inter'}}}%%

https://mermaid-js.github.io/mermaid/#/theming

#3

Something as simple as

%%{init: {'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

Is not even working for me. It’s daft. It’s like it completely ignores the init

Got an idea from @Salamander23 and did this which is a workaround for now

:root {
    --mermaid-font: 'JetBrains Mono', 'Fira Code Medium', 'Source Code Pro', monospace;
    --mermaid-font-size: 0.8rem;
  }

div.mermaid {
    text-align: center;
}

.mermaid-large svg[id^="m"][width][height][viewBox] {
    min-width: 900px;
    max-width: 1800px;
    width: 95%;
    height: auto;
}

.mermaid-medium svg[id^="m"][width][height][viewBox] {
    min-width: 500px;
    max-width: 1000px;
    width: 95%;
    height: auto;
}

.mermaid-small svg[id^="m"][width][height][viewBox] {
    min-width: 300px;
    max-width: 750px;
    width: 95%;
    height: auto;
}

I’m open to any more ideas :blush:

#4

I’m not sure about it, but I think you need to “call” the theme. Do you try

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%

?

#5

Put the theme in now and same result. It’s strange

#6

All plugins off, base them, no snippets and I take out the init completely and see this in the console:

mermaid.min.js:25 Uncaught Error: Unsupported color format: "var(--background-primary)"
    at Object.parse (mermaid.min.js:25)
    at Object.e.default (mermaid.min.js:25)
    at e.default (mermaid.min.js:25)
    at t.value (mermaid.min.js:25)
    at t.value (mermaid.min.js:25)
    at Object.getThemeVariables (mermaid.min.js:25)
    at bt (mermaid.min.js:25)
    at Object.updateSiteConfig (mermaid.min.js:25)
    at a (app.js:1)
    at app.js:1

Perhaps this is an actual bug? - Caching issue or similar?

Update:

Removing 'primaryColor': '#ff0000' makes it work even though this is allowed by mermaid?. Think this is a bug

#7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.