使用 Mermaid 创建

什么是 Mermaid

Mermaid 是一种通过文本直接生成图表的工具，无需依赖耗时的设计软件。 它采用受 Markdown 启发的纯文本语法，这种语法允许在纯文本中嵌入格式元素来描述流程逻辑。

用户只需提供结构清晰的文本描述，Mermaid 即可自动渲染出专业图表。 这一特性使其成为技术文档作者和项目经理的高效工具：无需耗费精力调整格式，能更专注于内容构建与功能实现。

本文重点介绍 Ganttable 对 Mermaid 的支持，如需深入了解 Mermaid，可参考 如何用Mermaid创建图表。

• Mermaid 官网
• Mermaid 线上预览工具

如何创建

系统支持通过 Mermaid 的 gantt 语法创建甘特图，操作步骤如下：

1. 点击输入框左侧的「创建模式」选择按钮，在弹出选项中点击「结构文本」
2. 将编写好的 Mermaid 文本粘贴至输入框内，点击确定即可创建

Mermaid 语法支持

系统仅支持核心 Mermaid 语法，非全量兼容。以下将详细说明当前支持的语法内容。

这是一个简单的例子：

gantt
    title 产品推广活动计划
    
    section 内容规划
        设计展会活动流程      :id1, 2025-02-03, 5d
        制作宣传材料          :id2, after id1, 7d
    
    section 推广执行
        启动线上推广          :id3, 2025-02-13, 2025-02-16
        实施线下宣传活动      :id4, after id3, 2025-02-24
        场地布置与设施检查    :id5, after id4, 1d

全局配置

在全局配置中，当前仅支持 title 和 section 配置：

• title: 定义项目名称
• section: 用于任务分组，以 section 开头并后跟分组名称（格式为 section 分组名）

任务语法

任务标题与属性通过冒号（:）分隔，各属性项之间以逗号分隔。任务可配置多个属性，属性项数量不同时，规则不同，其含义将按以下规则解析：

一个属性时

1. 用于确定任务结束时间，支持具体日期/持续天数

  设计展会活动流程 :2025-02-03                     （结束日期是 2025-02-03）
  设计展会活动流程 :5d                             （持续天数是5天）

两个属性时

1. 第一个可指定开始日期/持续天数，或使用 after 依赖其它任务，此时任务开始日期是所依赖任务的最晚的结束日期
2. 第二个用于确定任务结束时间，支持具体日期/持续天数

  设计展会活动流程 :2025-02-03, 2025-02-04         （开始、结束日期是 3号 到 4号）
  设计展会活动流程 :2025-02-03, 5d                 （3号开始，5天后结束）
  设计展会活动流程 :after id1, 2025-02-04          （依赖ID是 id1 的任务，结束日期是 4号）
  设计展会活动流程 :after id1 id2, 4d              （依赖ID是 id1 和 id2 的任务，4天后结束）

三个属性时

1. 第一个为任务ID
2. 第二个可指定开始日期/持续天数，或使用 after 依赖其它任务，此时任务开始日期是所依赖任务的最晚的结束日期
3. 第三个用于确定任务结束时间，支持具体日期/持续天数

  设计展会活动流程 :id1, 2025-02-03, 2025-02-04    （任务ID是 id1）
  设计展会活动流程 :id1, 2025-02-03, 5d 
  设计展会活动流程 :id1, after id1, 2025-02-04
  设计展会活动流程 :id1, after id1 id2, 4d

语法检测

系统支持创建前的语法检测，若发现语法问题，会尽可能地提示错误语法的位置。然而，由于文本内容的复杂性，可能无法准确检测所有语法问题。

若语法检测未能准确定位问题，可直接将 Mermaid 文本粘贴到「自由文本创建」功能中。该功能会自动进行格式修订，大幅提升语法错误的解决概率。