在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

mermaid-js/mermaid

菜单

甘特图

相关源文件

Mermaid 中的甘特图提供了项目调度和时间线可视化功能，允许用户创建条形图以说明项目进度、任务依赖关系和进度跟踪。本文档涵盖了 Mermaid 生态系统中甘特图功能的实现、架构和测试。

有关其他图表类型的信息，请参阅流程图、序列图和块图。有关整体图表处理，请参阅图表检测与处理。

架构概述

甘特图遵循 Mermaid 的标准图表处理流程，同时实现了专门的解析、数据管理和渲染组件。

甘特图处理流程

来源：packages/mermaid/src/docs/syntax/gantt.md1-531 packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js1-10

解析与数据管理

甘特图系统使用专门的解析器和数据库来处理图表定义并管理任务数据、依赖关系和时间线信息。

甘特图数据流架构

ganttDb 模块作为中心数据存储库，提供以下方法：

  • 使用 addTask() 和 getTasks() 进行任务管理
  • 使用 addSection() 和 getSections() 进行分段组织
  • 使用 setDateFormat() 和 getDateFormat() 处理日期格式
  • 使用 setAxisFormat() 和 getAxisFormat() 配置时间线

来源：packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js11-25 packages/mermaid/src/docs/syntax/gantt.md17-29

核心功能和语法处理

甘特图支持全面的项目管理功能，包括任务依赖、里程碑、排除项和各种日期格式。

任务定义和依赖系统

解析器处理多种任务定义格式

  • 基本任务：Task Name : id, start-date, duration
  • 依赖关系：Task Name : id, after otherTaskId, duration
  • 直至依赖：Task Name : id, start-date, until otherTaskId
  • 里程碑：Milestone Name : milestone, id, date, 0d

来源：packages/mermaid/src/docs/syntax/gantt.md66-92 packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js120-149

配置与自定义

甘特图提供了广泛的配置选项，用于通过全局配置和图表特定设置来控制视觉外观、日期处理和布局。

配置流程

关键配置参数包括

  • barHeight：任务条高度（默认：20）
  • barGap：任务条之间的间距（默认：4）
  • dateFormat：输入日期格式（默认：YYYY-MM-DD）
  • axisFormat：输出坐标轴格式（默认：YYYY-MM-DD）
  • excludes：周末/节假日日期排除
  • todayMarker：当前日期标记样式

来源：packages/mermaid/src/docs/syntax/gantt.md387-412 cypress/integration/rendering/gantt.spec.js324-358

测试基础设施

甘特图系统包括全面的测试覆盖，涵盖解析器功能、渲染场景和配置验证。

测试架构

测试套件涵盖

  • gantt.spec.js 中带有语法规则测试的解析器验证
  • 通过 Cypress 图像快照进行视觉回归测试
  • 配置场景，包括 useMaxWidth、topAxis 和 displayMode
  • 日期格式变体和边缘情况
  • 任务依赖解析

来源：cypress/integration/rendering/gantt.spec.js1-751 packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js1-350

高级特性

甘特图支持复杂的项目管理功能，包括交互元素、样式自定义和多种显示模式。

功能集成映射

高级功能包括

  • 交互元素：带有 click taskId call callback() 或 click taskId href URL 的任务点击处理程序
  • 紧凑模式：每行多个任务，带有 displayMode: compact
  • 今日标记：可配置的当前日期指示器，具有自定义样式
  • 垂直标记：带有 vert 关键字的时间线参考点
  • 周末配置：可自定义的周末定义（周五-周六或周六-周日）

来源：packages/mermaid/src/docs/syntax/gantt.md421-466 cypress/integration/rendering/gantt.spec.js615-648 packages/mermaid/src/docs/syntax/gantt.md153-165