以下是一个 **网站建设项目甘特图示例**，包含多阶段并行任务和关键节点： ```mermaid gantt title 企业官网建设项目计划 dateFormat YYYY-MM-DD axisFormat %Y-%m-%d todayMarker off tickInterval 7day section 需求分析 客户需求访谈 :req1, 2024-06-03, 5d, #FFD700 需求文档定稿 :req2, after req1, 3d, #FFD700 section 设计阶段 UI初稿设计 :design1, 2024-06-10, 7d, #9370DB 原型交互设计 :design2, parallel design1, 5d, #9370DB 设计确认会议 :milestone_design, after design1 design2, 1d section 开发阶段 前端开发 :dev1, after milestone_design, 15d, #4682B4 后端API开发 :dev2, after milestone_design, 10d, #87CEEB 数据库搭建 :dev3, after dev2, 5d, #00BFFF section 测试阶段 内部功能测试 :test1, after dev1 dev3, 7d, #32CD32 用户验收测试 :test2, after test1, 5d, #90EE90 section 上线准备 域名备案 :pre1, 2024-07-01, 20d, #FF6347 服务器部署 :pre2, after test2 pre1, 3d, #FF4500 正式上线 :milestone_launch, after pre2, 0d ``` --- ### 关键特性说明： 1. **时间轴控制** - `tickInterval 7day`：每周显示刻度线 - `todayMarker off`：隐藏今日指示线 - `axisFormat %Y-%m-%d`：显示完整日期 2. **复杂依赖关系** ```mermaid design2, parallel design1 → 与design1并行执行 milestone_design, after design1 design2 → 需两个设计任务都完成 test1, after dev1 dev3 → 需前后端都完成 ``` 3. **颜色编码** - 金色 (#FFD700)：需求分析阶段 - 紫色 (#9370DB)：设计阶段 - 蓝色系：开发阶段 - 绿色系：测试阶段 - 红色系：上线准备 4. **特殊标记** - `milestone_launch, after pre2, 0d`：用0天持续时间创建里程碑标记 - 所有里程碑自动显示为◆符号 --- ### 扩展技巧： 1. **添加进度百分比** ```mermaid dev1, after milestone_design, 15d, #4682B4, active ``` 在任务后添加`, active`可显示进度条（需搭配JS交互） 2. **设置任务状态** ```mermaid test2, after test1, 5d, #90EE90, done ``` 使用`, done`/`, crit`/`, active`显示不同状态 3. **时间偏移语法** ```mermaid pre1, 2024-07-01, 20d → 固定日期开始 pre2, after test2 pre1, 3d → 依赖项中取最晚结束时间 ``` 需要可视化效果可直接将代码粘贴至 [Mermaid Live Editor](https://mermaid.live) 查看交互式图表。