1. 其实一点都不优雅，如果不懂mermaid语法和CSS将是一个人的汗流浃背
2. 文中比较新的Mermaid语法可能不能渲染，可以去mermaidjs在线渲染
3. 本文大面积参考/翻译mermaidjs里面的doc

Timeline 时间轴

可以用来展示关键节点。能突出什么时候达到什么效果、各阶段核心突破点是什么时候、项目的推进节奏是什么样

timeline
  title 项目A · 本年度关键节点
  2025-03 : 完成某板卡设计
  2025-06 : 完成XX软件设计
  2025-08 : 完成XX与YY的软硬件联调
  2025-11 : 实现基本功能，中期验收合格

• 可以精确到yyyyMMdd
• 同一个时间点也可以写多个事件，比如

timeline
  2025-11-08 :   日志的格式同步
    	     :   调参与炼丹

语法为：

{time period} : {event} : {event}

• 如果需要换行，现在只能使用<br>

Gannt 甘特图

语法比Timeline复杂但信息密度更高，比如官方文档中的：

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :until isadded
    Functionality added                 :milestone, isadded, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

• 每一个任务的共同点是使用了冒号:作为标题和元数据的二分隔符，元数据的分隔符为逗号,；
• 有一些任务有标签，标签是可写可不写的，其中有效标签（会让甘特图的任务横条颜色渲染的不一样）有四个：active， done， crit， milestone；
• 冒号后面的metadata有很多写法，如表所示：

个人用第一个比较多

• 有Excludes功能，可以让用户在画甘特图的时候排除掉周末
  • 默认是周六周日，也可以是周五周六

gantt
    title A Gantt Diagram Excluding Fri - Sat weekends
    dateFormat YYYY-MM-DD
    excludes weekends
    weekend friday
    section Section
        A task          :a1, 2024-01-01, 30d
        Another task    :after a1, 20d

• 也可以用Section，Section对应的是左面的几个色块
• 可以使用vert添加竖线，语法：

Vert A : vert, {dateFormat}

• 其中dateFormat也有很多，可以去day.js.org去看，基本都支持
• 如何在甘特图里面的一行中画多个任务？
  • 使用displayMode: compact，目前应该是控制不了哪些任务在一行

---
displayMode: compact
---
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :a2, 2014-01-20, 25d
    Another one      :a3, 2014-02-10, 20d