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

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

mermaid


Solution 1:[1]

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

Solution 2:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kofifus
Solution 2 Justin Greywolf

Related Questions