mermaid - 如何更改 mermaid.js 甘特图中的字体/颜色

Question

我最近发现了 mermaid.js，它非常适合设计图表和甘特图。我正在使用实时编辑器（https://mermaid-js.github.io/mermaid-live-editor/），这很容易。但是我怎样才能简单地更改文本字体及其大小，编辑器中任务的颜色？我已经读过可以更改css属性，但这对我来说并不清楚，我需要更多解释。非常感谢

Answer 1

要更改流程图节点的边框和背景颜色、文本字体和大小，在“美人鱼配置”面板中，设置以下代码：

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

有关其他更改，请参阅美人鱼主题参考页面： https ://mermaid-js.github.io/mermaid/#/theming

Answer 2

有关样式甘特图，请参阅美人鱼文档。但是，由于此方法需要您使用样式表，我认为您不能在实时编辑器中使用它。

有关使用主题的更多信息：文档