How can I change font / colors in mermaid.js Gantt

Question

I recently discovered mermaid.js which is great to design graphs and Gantts. I'm using the live editor (https://mermaid-js.github.io/mermaid-live-editor/) and it's quite easy. But how can I simply change the text font and its size, colors of the tasks in the editor ? I've read that it's possible to do this changing css attributes, but that's not clear for me, I would need some more explanations. Many thanks

score 11 · Answer 1 · edited Feb 22 '22 at 04:28

11

To change the border and background color of the nodes, text font and size for flowcharts, in "Mermaid configuration" panel, set the following code:

{
  "theme": "default",
  "themeVariables": {
    "nodeBorder" : "#004990",
    "mainBkg" : "#c9d7e4",
    "nodeTextColor" : "#274059",
    "fontFamily": "arial",
    "fontSize": "18px"
 }
}

For other changes, see the mermaid theming ref page: https://mermaid-js.github.io/mermaid/#/theming

edited Feb 22 '22 at 04:28

kofifus

17,260
17
99
173

answered Oct 07 '20 at 13:24

Tomane

373
2
4
13

It doesn't work for gantt diagrams, true. It works for other diagrams. I don't think it's possible to change font size for gantt diagrams. – Tomane Dec 18 '20 at 22:57
See updated link to theming in my answer below (or above, depending on how you are sorting) – Justin Greywolf Feb 02 '21 at 17:51
1

the link is not valid. – F.Tamy Aug 14 '21 at 14:23
1

I think this was the inteneded link https://mermaid-js.github.io/mermaid/#/theming still not working for fontsize in gantt – JuanPi Nov 18 '21 at 05:34

score 2 · Answer 2 · answered Feb 02 '21 at 17:51

2

For styling Gantt charts see the Mermaid Documentation. However, since this method requires you to use a stylesheet I dont think that you can use it in the live editor.

More information on working with themes in general: Documentation

answered Feb 02 '21 at 17:51

Justin Greywolf

650
7
17

How can I change font / colors in mermaid.js Gantt

2 Answers2