如何在Mermaid甘特图中为指定节点设置颜色？

要给Mermaid甘特图中的指定任务节点着色，你可以通过自定义类+内联样式的方式实现，具体步骤如下：

实现方法 #

1. 给目标任务添加自定义类标识，放在任务名称和时长参数之间；
2. 使用class指令定义该类的填充色、边框色等样式。

修改后的可运行代码如下：

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        Color this node to green    :greenTask, 24d
    class greenTask fill:#2ecc71,stroke:#27ae60,stroke-width:2px

代码说明 #

• greenTask是给目标任务自定义的类名，可根据需求修改；
• fill:#2ecc71设置任务条的填充色（示例为柔和绿色，可替换为任意十六进制颜色值）；
• stroke:#27ae60设置任务条的边框颜色；
• stroke-width:2px设置边框宽度，无需边框可省略此参数。

补充：外部CSS方式 #

如果你的渲染环境支持引入外部CSS（比如HTML页面），也可以通过全局样式控制：

.mermaid .greenTask .bar {
    fill: #2ecc71 !important;
    stroke: #27ae60 !important;
}

这种方式在GitHub、GitLab、大多数Markdown编辑器等支持Mermaid的环境中都能正常生效。

内容的提问来源于stack exchange，提问作者Quinten