How do I change the styling of Mermaid Gantt chart?

Help
,
1

Hey guys!

I’ve been using Mermaid Gantt charts in Anytype for quick timeline visualization for a while now. However, I’m finding the text size a bit small, making it difficult to read without widening the page significantly. Is there a way to adjust the overall font size or scaling of the Gantt chart itself? I’d love to be able to customize the appearance beyond the default styling for crit, done, and active tasks. Any tips or workarounds would be greatly appreciated!

2

You can define font size within the mermaid config itself like this:

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'fontSize': '12px'
    }
  }
}%%

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

There are some limitations with the built-in interpreter, but I tested it and adjusting the fontSize will create larger text as you would like. However, if your chart is busy, increasing the text size might not help much, as the text could become too large to display properly.

3

I tried the config, but I didn’t see it affecting the gantt charts. From your example I can see it’s for flowchart instead.

4

I just checked, and it indeed does not affect the labels. The fontSize does increase the title, however, so I would say this is a design limitation with Mermaid, unfortunately.