如何为Mermaid甘特图添加review、devtest自定义任务状态

核心思路 #

Mermaid甘特图的任务样式通过CSS类控制，自定义新状态的本质是：给对应状态的任务元素添加自定义颜色样式，同时在Mermaid代码中直接使用自定义状态名即可。

1. 添加自定义CSS样式 #

在页面中插入自定义样式，覆盖Mermaid默认的任务样式。Mermaid会自动将你定义的状态名转为小写CSS类（如review对应.task-review，devtest对应.task-devtest），同时带crit标记的任务会额外添加.critical类。

/* 自定义review状态任务样式 */
.task-review {
  fill: #88b04b !important; /* 背景色，可自行替换 */
  stroke: #6a8a36 !important; /* 边框色，可选 */
}

/* 自定义devtest状态任务样式 */
.task-devtest {
  fill: #f7c600 !important; /* 背景色，可自行替换 */
  stroke: #d4a800 !important; /* 边框色，可选 */
}

/* 针对带crit标记的review任务加深颜色 */
.task-review.critical {
  fill: #6a8a36 !important;
}

/* 针对带crit标记的devtest任务加深颜色 */
.task-devtest.critical {
  fill: #d4a800 !important;
}

2. 编写Mermaid甘特图代码 #

直接在代码中使用review和devtest作为任务状态，语法和默认的active/done一致：

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD

    section Section
    A task            :active, a1, 2014-01-01, 3d
    another task0     :review, after a1  , 2d
    another task      :devtest, 2d
    section Another
    Task in sec       :done, 2014-01-12  , 1d
    another task1     :active,crit, 2d
    another task2     :review,crit, 3d
    another task3     :devtest,crit, 4d
    another task3     :done,crit, 2d
    another task4     :crit, 1d
    another task5     : 6d

3. 纯JavaScript环境下的集成方式 #

如果是通过CDN引入Mermaid的纯JS场景，需要确保自定义样式在渲染前加载，示例代码如下：

// 动态添加自定义样式
const customStyle = document.createElement('style');
customStyle.textContent = `
.task-review {
  fill: #88b04b !important;
  stroke: #6a8a36 !important;
}
.task-devtest {
  fill: #f7c600 !important;
  stroke: #d4a800 !important;
}
.task-review.critical {
  fill: #6a8a36 !important;
}
.task-devtest.critical {
  fill: #d4a800 !important;
}
`;
document.head.appendChild(customStyle);

// 初始化并渲染Mermaid
mermaid.initialize({ startOnLoad: true });

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