以下是一个使用 **Mermaid** 语法编写的甘特图（Gantt Chart）示例，展示一个简单项目的时间安排： ### **HTML + Mermaid 甘特图代码** ```html

``` ### **效果说明** 1. **标题**：`title 项目开发甘特图` 2. **日期格式**：`dateFormat YYYY-MM-DD`（支持 `%d-%m` 等自定义格式） 3. **分区**：`section` 划分不同阶段（需求、开发、测试） 4. **任务**： - `任务名称 : 标签, 开始日期, 持续时间` - 支持依赖关系（如 `after a1` 表示在 `a1` 任务之后执行） ### **如何运行？** - 直接保存为 `.html` 文件并用浏览器打开 - 需要联网加载 Mermaid.js（CDN 引入） ### **Mermaid 更多语法** - **里程碑**：`里程碑 : milestone, 2023-11-20, 0d` - **进度百分比**：`任务 : done, 30%` - **自定义颜色**：`任务 :crit, active, 2023-10-01, 5d`（关键路径红色高亮） 效果示例（静态描述）： ``` 需求阶段 |█████████ | 开发阶段 | ████████████ | 测试阶段 | ███████| ``` （实际渲染是动态可交互的） 如果需要更复杂的逻辑（如动态数据加载），可以结合 JavaScript 生成 Mermaid 代码。