在Azure DevOps Server中绘制甘特图gantt

Contents

• 1. 概述
• 2. 绘制甘特图
• 3. Mermaid语法

1. 概述

甘特图是一种条形图，由Karol Adamiecki于1896年首次开发，由Henry Gantt于1910年代独立开发，用于展现项目进度和完成项目所需的时间。甘特图显示了项目的所有任务的开始日期和完成日期，以视图的方式直观的展现出项目的进度状况，是用于跟踪项目进度的常见工具。

在Azure DevOps Server中Wiki模块中，我们可以插入Mermaid图表，并使用Mermaid的简单语法，快速绘制一个项目管理的甘特图。
由于Mermaid图表具备语法简洁、可读性高的特点，用户可以很快上手；再配合Azure DevOps Server中Wiki的丰富功能，可以为软件开发团队提供高效的项目跟踪能力。

下面我们使用示例的方式，为大家展示如何绘制一个甘特图，用于跟踪迭代计划和进度。

2. 绘制甘特图

• 首先，在Azure DevOps Server的团队项目中新建一篇用于保存迭代计划的wiki;
• 然后，在wiki文档的编辑页面中，插入Mermaid图表，如下图：
  
• 参考下面的示例绘制甘特图

::: mermaid

gantt

    title D1.2.13.0 迭代计划

    todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5

    dateFormat  YYYY-MM-DD

    section 需求分析

        A02-需求活动    :a1, 2024-08-01,1d

        C02-测试分析 :a1, 2024-08-01, 1d

    section 需求分析评审

        需求分析评审     :a2, 2024-08-01, 1d

        测试分析评审 :a2, 2024-08-01,1d

    section 详细设计/用例设计

        A04-设计活动    :b1, 2024-08-02, 3d  

        C05-测试用例 :b1, 2024-08-02, 3d

    section 需求分设计评审

        需求设计评审    :b1, 2024-08-02,3d

        测试用例分析评审:b1, 2024-08-02, 3d

    section 编码/自测/代码走查

        A06-编码       :crit,c1, 2024-08-05, 264h

        A08-编码自测   :crit,c2,2024-08-05, 264h

        A07-代码走查   :c3, after c2, 6h

    section 代码走查评审

        代码走查评审   :d1,after c3,6h

    section 集成测试

        C06集成测试       :e1, 2024-08-06, 240h

    section 系统测试

        C07-系统测试       :f1, 2024-08-16, 24h

    

:::

编辑过程中的所见即所得截图：

完成编辑后的成品截图：

3. Mermaid语法

甘特图将把每个计划任务记录为一个从左向右延伸的连续条。x轴表示时间，y轴记录不同的任务及其完成顺序。
当特定任务的日期、日期或日期集合被“排除”时，甘特图将通过向右延长相等的天数来适应这些变化。

下面介绍一下在Mermaid图表中，绘制甘特图需要注意的语法。

• 任务
  默认情况下，任务是按顺序执行的。任务开始日期默认为前一个任务的结束日期。
• 图表标题
  关键字title后面连接的字符，就是甘特图的标题
• 任务
  • 冒号：
    使用冒号将任务标题与其元数据分隔开。
  • 标签
    多个元数据项用逗号分隔。
    第一个元数据是标签tags, 目前可用的包括active、done、crit和milestone；标签是可选的，但如果使用，必须先指定。
  • 元数据
    处理标签后，Mermaid将处理剩余的元数据项；元数据的主要功能是定义任务的时间、长度等信息；例如这条任务（“A06-编码 :crit,c1, 2024-08-05, 264h”）中，crit标识关键任务、c1是一个别名、日期表示任务的开始时间，264h表示任务持续时长；

Meimaid甘特图具有丰富的展示功能，如果需要了解详细的语法内容，可以查询它的官方文库（https://mermaid.js.org/syntax/gantt.html）

https://www.cnblogs.com/danzhang
Azure DevOps MVP 张洪君