甘特图

¥Gantt diagrams

甘特图是一种柱状图，最初由 Karol Adamiecki 于 1896 年开发，并由 Henry Gantt 在 1910 年代独立开发，它说明了项目进度表以及任何一个项目完成所需的时间。甘特图显示了项目的终端元素和摘要元素的开始日期和完成日期之间的天数。
¥A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.

给用户的注意事项

¥A note to users

甘特图将每一项计划任务记录为从左向右延伸的一个连续条。x 轴代表时间，y 轴记录不同的任务及其完成的顺序。

¥Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.

请务必记住，当特定于任务的日期、日期或日期集合为 "excluded" 时，甘特图将通过向右延长相同天数来适应这些更改，而不是在任务内创建间隙。如图所示

¥It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task. As shown here

但是，如果排除的日期位于设置为连续开始的两个任务之间，则将以图形方式跳过排除的日期并留空，并且将在排除的日期结束后开始下一个任务。如图所示

¥However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates. As shown here

甘特图对于跟踪项目完成之前所需的时间很有用，但它也可以用于以图形方式表示 "非工作日"，只需进行一些调整。

¥A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.

Mermaid 可以将甘特图渲染为 SVG、PNG 或可粘贴到文档中的 MarkDown 链接。

¥Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.

语法

¥Syntax

任务默认是连续的。任务开始日期默认为前一任务的结束日期。

¥Tasks are by default sequential. A task start date defaults to the end date of the preceding task.

冒号 : 将任务标题与其元数据分隔开。元数据项由逗号 , 分隔。有效标签为 active、done、crit 和 milestone。标签是可选的，但如果使用，则必须首先指定它们。处理完标签后，剩余的元数据项解释如下：

¥A colon, :, separates the task title from its metadata. Metadata items are separated by a comma, ,. Valid tags are active, done, crit, and milestone. Tags are optional, but if used, they must be specified first. After processing the tags, the remaining metadata items are interpreted as follows:

如果指定单个项目，它将确定任务何时结束。它可以是特定的日期/时间或持续时间。如果指定了持续时间，则会将其添加到任务的开始日期以确定任务的结束日期，同时考虑所有排除情况。
¥If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
如果指定了两项，则最后一项的解释与前一种情况相同。第一项可以指定明确的开始日期/时间（以 dateFormat 指定的格式）或使用 after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] 引用另一个任务。在后一种情况下，任务的开始日期将根据任何引用任务的最晚结束日期进行设置。
¥If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by dateFormat) or reference another task using after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
如果指定了三个项目，则最后两个项目将按照前一种情况进行解释。第一项表示任务的 ID，可以使用 later <taskID> 语法引用。
¥If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the later <taskID> syntax.

元数据语法	开始日期	结束日期	ID
`<taskID>, <startDate>, <endDate>`	使用 `dateformat` 解释的 `startdate`	使用 `dateformat` 解释的 `endDate`	`taskID`
`<taskID>, <startDate>, <length>`	使用 `dateformat` 解释的 `startdate`	开始日期 + `length`	`taskID`
`<taskID>, after <otherTaskId>, <endDate>`	先前指定任务的结束日期 `otherTaskID`	使用 `dateformat` 解释的 `endDate`	`taskID`
`<taskID>, after <otherTaskId>, <length>`	先前指定任务的结束日期 `otherTaskID`	开始日期 + `length`	`taskID`
`<taskID>, <startDate>, until <otherTaskId>`	使用 `dateformat` 解释的 `startdate`	先前指定的任务 `otherTaskID` 的开始日期	`taskID`
`<taskID>, after <otherTaskId>, until <otherTaskId>`	先前指定任务的结束日期 `otherTaskID`	先前指定的任务 `otherTaskID` 的开始日期	`taskID`
`<startDate>, <endDate>`	使用 `dateformat` 解释的 `startdate`	使用 `dateformat` 解释的 `enddate`	n/a
`<startDate>, <length>`	使用 `dateformat` 解释的 `startdate`	开始日期 + `length`	n/a
`after <otherTaskID>, <endDate>`	先前指定任务的结束日期 `otherTaskID`	使用 `dateformat` 解释的 `enddate`	n/a
`after <otherTaskID>, <length>`	先前指定任务的结束日期 `otherTaskID`	开始日期 + `length`	n/a
`<startDate>, until <otherTaskId>`	使用 `dateformat` 解释的 `startdate`	先前指定的任务 `otherTaskID` 的开始日期	n/a
`after <otherTaskId>, until <otherTaskId>`	先前指定任务的结束日期 `otherTaskID`	先前指定的任务 `otherTaskID` 的开始日期	n/a
`<endDate>`	上一任务的结束日期	使用 `dateformat` 解释的 `enddate`	n/a
`<length>`	上一任务的结束日期	开始日期 + `length`	n/a
`until <otherTaskId>`	上一任务的结束日期	先前指定的任务 `otherTaskID` 的开始日期	n/a

信息

在 (v10.9.0+) 中添加了对关键字 until 的支持。这可用于定义正在运行的任务，直到其他特定任务或里程碑开始。

为简单起见，该表未显示使用 after 关键字列出的多个任务的使用。以下是如何使用它以及如何解释它的示例：

¥For simplicity, the table does not show the use of multiple tasks listed with the after keyword. Here is an example of how to use it and how it's interpreted:

标题

¥Title

title 是一个可选字符串，显示在甘特图的顶部，用于描述整个图表。

¥The title is an optional string to be displayed at the top of the Gantt chart to describe the chart as a whole.

不包括

¥Excludes

excludes 是可选属性，接受 YYYY-MM-DD 格式的特定日期、星期几 ("sunday") 或 "weekends"，但不接受单词 "weekdays"。这些日期将标记在图表上，并且不包括在任务的持续时间计算中。这意味着，如果任务间隔期间存在排除的日期，则将在任务末尾添加 'skipped' 天，以确保持续时间符合代码中指定的要求。

¥The excludes is an optional attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays". These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.

周末 (v\11.0.0+)

¥Weekend (v\11.0.0+)

排除周末时，可以将周末配置为周五和周六或周六和周日。默认情况下，周末是周六和周日。要定义周末开始日，可以在新行中添加一个可选属性 weekend，后跟 friday 或 saturday。

¥When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday. To define the weekend start day, there is an optional attribute weekend that can be added in a new line followed by either friday or saturday.

章节陈述

¥Section statements

你可以将图表划分为各个部分，例如将项目的不同部分（例如开发和文档）分开。

¥You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.

为此，请以 section 关键字开始一行并为其命名。（请注意，与整个图表的标题不同，此名称是必需的。

¥To do so, start a line with the section keyword and give it a name. (Note that unlike with the title for the entire chart, this name is required.

里程碑

¥Milestones

你可以将里程碑添加到图表中。里程碑与任务不同，因为它们代表单个时刻并由关键字 milestone 标识。以下是有关如何使用里程碑的示例。你可能会注意到，里程碑的确切位置由里程碑的初始日期和任务的 "duration" 确定，如下所示：initial date+duration/2.

¥You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword milestone. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: initial date+duration/2.

设置日期

¥Setting dates

dateFormat 定义甘特图元素的日期输入格式。这些日期如何在渲染的图表输出中表示由 axisFormat 定义。

¥dateFormat defines the format of the date input of your gantt elements. How these dates are represented in the rendered chart output are defined by axisFormat.

输入日期格式

¥Input date format

默认输入日期格式为 YYYY-MM-DD。你可以定义你的自定义 dateFormat。

¥The default input date format is YYYY-MM-DD. You can define your custom dateFormat.

markdown

dateFormat YYYY-MM-DD

支持以下格式选项：

¥The following formatting options are supported:

输入	示例	描述
`YYYY`	2014	4 位数字年份
`YY`	14	2 位数字年份
`Q`	1..4	年的季度。将月份设置为季度的第一个月。
`M MM`	1..12	月份数
`MMM MMMM`	一月..十二月	由 `dayjs.locale()` 设置的语言环境中的月份名称
`D DD`	1..31	一个月中的哪一天
`Do`	1st..31st	带序数的月份中的某一天
`DDD DDDD`	1..365	一年中的某一天
`X`	1410715640.579	Unix 时间戳
`x`	1410715640579	Unix 毫秒时间戳
`H HH`	0..23	24 小时时间
`h hh`	1..12	与 `a A` 一起使用的 12 小时时间。
`a A`	上午下午	午后或午前
`m mm`	0..59	分钟
`s ss`	0..59	秒数
`S`	0..9	十分之一秒
`SS`	0..99	一秒几百
`SSS`	0..999	千分之一秒
`Z ZZ`	+12:00	与 UTC 的偏移量为 +-HH:mm、+-HHmm 或 Z

¥More info in: https://day.nodejs.cn/docs/en/parse/string-format/

轴上的输出日期格式

¥Output date format on the axis

默认输出日期格式为 YYYY-MM-DD。你可以定义自定义 axisFormat，例如 2020 年第一季度的 2020-Q1。

¥The default output date format is YYYY-MM-DD. You can define your custom axisFormat, like 2020-Q1 for the first quarter of the year 2020.

markdown

axisFormat %Y-%m-%d

支持以下格式字符串：

¥The following formatting strings are supported:

格式	定义
%a	工作日缩写名称
%A	工作日的完整名称
%b	月份名称缩写
%B	月份全名
%c	日期和时间，如 "%a %b %e %H:%M:%S %Y"
%d	十进制数形式的月份中的零填充日期 [01,31]
%e	以空格填充的十进制数字形式的月份日期 [1,31]；相当于%_d
%H	小时（24 小时制），十进制数 [00,23]
%I	小时（12 小时制），十进制数 [01,12]
%j	一年中的第几天，十进制数 [001,366]
%m	十进制数形式的月份 [01,12]
%M	分钟为十进制数 [00,59]
%L	十进制数形式的毫秒 [000, 999]
%p	上午或下午
%S	秒为十进制数 [00,61]
%U	一年中的周数（星期日为一周的第一天），十进制数 [00,53]
%w	十进制数形式的工作日 [0(Sunday),6]
%W	一年中的周数（星期一为一周的第一天），十进制数 [00,53]
%x	日期，如 "%m/%d/%Y"
%X	时间，如 "%H:%M:%S"
%y	没有世纪的年份作为十进制数 [00,99]
%Y	年份，世纪为十进制数
%Z	时区偏移量，例如 "-0700"
%%	一个 "%" 字面字符

¥More info in: https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format

轴刻度 (v10.3.0+)

¥Axis ticks (v10.3.0+)

默认输出刻度为自动。你可以定制你的 tickInterval，例如 1day 或 1week。

¥The default output ticks are auto. You can custom your tickInterval, like 1day or 1week.

markdown

tickInterval 1day

模式是：

¥The pattern is:

javascript

/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;

¥More info in: https://github.com/d3/d3-time#interval_every

基于周的 tickInterval 默认从星期日开始一周。如果你希望指定 tickInterval 应开始的另一个工作日，请使用 weekday 选项：

¥Week-based tickIntervals start the week on sunday by default. If you wish to specify another weekday on which the tickInterval should start, use the weekday option:

警告

在 v10.3.0 中添加了 millisecond 和 second 支持

紧凑模式输出

¥Output in compact mode

紧凑模式允许你在同一行中显示多个任务。通过前面的 YAML 设置设置图形的显示模式，可以为甘特图启用紧凑模式。

¥The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.

注释

¥Comments

可以在甘特图中输入注释，解析器将忽略该注释。注释需要独占一行，并且必须以 %%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何图表语法。

¥Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with %% (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.

样式

¥Styling

甘特图的样式是通过定义许多 CSS 类来完成的。在渲染期间，这些类是从位于 src/diagrams/gantt/styles.js 的文件中提取的

¥Styling of the Gantt diagram is done by defining a number of CSS classes. During rendering, these classes are extracted from the file located at src/diagrams/gantt/styles.js

使用的类

¥Classes used

类	描述
grid.tick	网格线的样式
grid.path	网格边框的样式
.taskText	任务文本样式
.taskTextOutsideRight	超出右侧活动栏的任务文本的样式。
.taskTextOutsideLeft	超出活动栏、向左的任务文本的样式。
todayMarker	"今日标记" 的切换和样式

样式表示例

¥Sample stylesheet

css

.grid .tick {
  stroke: lightgrey;
  opacity: 0.3;
  shape-rendering: crispEdges;
}
.grid path {
  stroke-width: 0;
}

#tag {
  color: white;
  background: #fa283d;
  width: 150px;
  position: absolute;
  display: none;
  padding: 3px 6px;
  margin-left: -80px;
  font-size: 11px;
}

#tag:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 0;
  border-width: 10px;
  border-bottom-color: #fa283d;
  top: -20px;
}
.taskText {
  fill: white;
  text-anchor: middle;
}
.taskTextOutsideRight {
  fill: black;
  text-anchor: start;
}
.taskTextOutsideLeft {
  fill: black;
  text-anchor: end;
}

今日标记

¥Today marker

你可以设置当前日期标记的样式或隐藏该标记。要设置其样式，请为 todayMarker 键添加一个值。

¥You can style or hide the marker for the current date. To style it, add a value for the todayMarker key.

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

要隐藏标记，请将 todayMarker 设置为 off。

¥To hide the marker, set todayMarker to off.

todayMarker off

配置

¥Configuration

可以调整渲染甘特图的边距。

¥It is possible to adjust the margins for rendering the gantt diagram.

这是通过定义配置对象的 ganttConfig 部分来完成的。mermaidCLI 页描述了如何使用 CLI。

¥This is done by defining the ganttConfig part of the configuration object. How to use the CLI is described in the mermaidCLI page.

mermaid.ganttConfig 可以设置为带有配置参数的 JSON 字符串或相应的对象。

¥mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.

javascript

mermaid.ganttConfig = {
  titleTopMargin: 25, // Margin top for the text over the diagram
  barHeight: 20, // The height of the bars in the graph
  barGap: 4, // The margin between the different activities in the gantt diagram
  topPadding: 75, // Margin between title and gantt diagram and between axis and gantt diagram.
  rightPadding: 75, // The space allocated for the section name to the right of the activities
  leftPadding: 75, // The space allocated for the section name to the left of the activities
  gridLineStartPadding: 10, // Vertical starting position of the grid lines
  fontSize: 12, // Font size
  sectionFontSize: 24, // Font size for sections
  numberSectionStyles: 1, // The number of alternating section styles
  axisFormat: '%d/%m', // Date/time format of the axis
  tickInterval: '1 week', // Axis ticks
  topAxis: true, // When this flag is set, date labels will be added to the top of the chart
  displayMode: 'compact', // Turns compact mode on
  weekday: 'sunday', // On which day a week-based interval should start
};

可能的配置参数：

¥Possible configuration params:

参数	描述	默认值
mirrorActor	打开/关闭图表下方和上方参与者的渲染	false
底部边距调整	调整图表结束的距离。使用 css 的宽边框样式可能会产生不需要的剪裁，这就是此配置参数存在的原因。	1

相互作用

¥Interaction

可以将单击事件绑定到任务。单击可能会导致 JavaScript 回调或导致在当前浏览器选项卡中打开的链接。注意：使用 securityLevel='strict' 时禁用此功能，使用 securityLevel='loose' 时启用此功能。

¥It is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. Note: This functionality is disabled when using securityLevel='strict' and enabled when using securityLevel='loose'.

click taskId call callback(arguments)
click taskId href URL

taskId 是任务的 id
¥taskId is the id of the task
回调是在显示图表的页面上定义的 javascript 函数的名称，如果没有指定其他参数，将以 taskId 作为参数调用该函数。
¥callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.

初学者提示 — 在 html 上下文中使用交互式链接的完整示例：

¥Beginner's tip—a full example using interactive links in an html context:

html

<body>
  <pre class="mermaid">
    gantt
      dateFormat  YYYY-MM-DD

      section Clickable
      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
      Print arguments         :cl2, after cl1, 3d
      Print task              :cl3, after cl2, 3d

      click cl1 href "https://mermaidjs.github.io/"
      click cl2 call printArguments("test1", "test2", test3)
      click cl3 call printTask()
  </pre>

  <script>
    const printArguments = function (arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
    };
    const printTask = function (taskId) {
      alert('taskId: ' + taskId);
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

示例

¥Examples

柱状图（使用甘特图）

¥Bar chart (using gantt chart)

甘特图 ​

给用户的注意事项 ​

语法 ​

标题 ​

不包括 ​

周末 (v\11.0.0+) ​

章节陈述 ​

里程碑 ​

设置日期 ​

输入日期格式 ​

轴上的输出日期格式 ​

轴刻度 (v10.3.0+) ​

紧凑模式输出 ​

注释 ​

样式 ​

使用的类 ​

样式表示例 ​

今日标记 ​

配置 ​

可能的配置参数： ​

相互作用 ​

示例 ​

柱状图（使用甘特图） ​

甘特图

给用户的注意事项

语法

标题

不包括

周末 (v\11.0.0+)

章节陈述

里程碑

设置日期

输入日期格式

轴上的输出日期格式

轴刻度 (v10.3.0+)

紧凑模式输出

注释

样式

使用的类

样式表示例

今日标记

配置

可能的配置参数：

相互作用

示例

柱状图（使用甘特图）