企业官网建设流程全解析

思源笔记 Mermaid 甘特图：3 步画出能带上会议的项目排期（实操指南）

【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间，让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan

周会上被问“v2.0 进度到哪了”，你只能边翻项目表边口头描述，对方听得迷糊；贴一张时间线截图吧，图糊，日期一改又得重画。SiYuan（思源笔记，开源、隐私优先、自托管的知识工作空间）让你用几行 Mermaid 甘特图文本就能在笔记里实时渲染出项目排期图，不装插件、不写代码。本文带你用 6 行文字画出一张排期，十分钟就能上手。

为什么选 Mermaid 画排期

• 文字即排期，改起来不心疼。每个任务就是一行文字，改开始日期、加一个任务，编辑一行字，图立刻跟着变。排期从此不是扔完就扔的图，而是可版本管理的笔记，手滑删了还能靠数据历史找回来。
• 渲染由内核兜底。SiYuan 内置 Mermaid 11.x 引擎，针对甘特图在渲染配置里单独设置了左右留白（leftPadding: 75、rightPadding: 20），日期列和任务条不会打架；深色模式下图表自动切深色配色，逻辑见 mermaidRender.ts。
• 图和知识库在同一张平面上。甘特图就是一个普通内容块，能像其他块一样被引用、被反向链接、被搜索。排期放进周报笔记，里程碑一改，处处生效。
• 不存在锁定。图源就是纯文本，拷到任何支持 Mermaid 的环境都能直接渲染。

最小可运行示例：三步插入第一张甘特图

第 1 步：用 / 菜单触发 Mermaid 块

编辑器空白行敲/，命令菜单弹出后输入mermaid或「图表」，回车即可插入 Mermaid 代码块；也可以直接手写三个反引号加mermaid回车，效果一样。菜单选项在 extend.ts 里维护，Mermaid 项的筛选词里就有tubiao。

第 2 步：写入 6 行最小甘特图

把下面这段贴进代码块：dateFormat声明日期格式，section给任务分列，之后每行都是「任务名 : 任务id, 开始日期, 时长」：

第 3 步：停手一拍，看渲染

不渲染才叫意外——停手一拍，页面自动画出「接口联调」「自测」两条横条，按日期轴排布，「自测」紧跟在联调结束处，after a1替你算好了日期。切到阅读模式是干净的 SVG 矢量图，切深色模式配色自动跟随：

核心规则一句话：「排期在笔记里，图只是它的快照」——每行甘特图都是「任务名 : id, 日期, 时长」，写日期就能出条，用after串顺序。

从最小示例到真实项目排期

掌握最小写法后，还有两个进阶语法值得知道：

• 给关键路径加标记。在任务 id 前写crit，这条横条会被高亮。评审会上问哪个环节最容易拖期，指着粗的那条说就行。
• 关键节点用里程碑。milestone画的是菱形标记而不是长条，适合「发版日」「验收日」这种一天内完成的事。

下面是一份完整的 v2.0 发版排期，三个 phase 分列、依赖全靠after、关键路径和发版节点一并标出：

这张图的组织思路是「图的结构就是项目的结构」：先想清楚分几个 phase（section），再在列内和列间用after把顺序串起来——画图的过程，其实是把项目重新想了一遍。

常见问题排查：甘特图不渲染怎么办

为什么整张图不渲染？Mermaid 对语法非常直率：日期必须是YYYY-MM-DD，任务名后面的冒号必须半角，逗号后要空一格。报错时图不渲染、只显示红色错误信息，按提示定位到行去改，别盲目删。

为什么任务名或日期列被截断？内核已经给甘特图配了左右留白，但甘特图没有自动换行，中文名太长，条上的标签就会被截。把任务名写短一点，细节留在笔记正文里。

它能替代 Excel 或项目管理工具吗？坦率说，不能。它画的是「给团队看的可读排期」，不能拖条改日期，也没有实际进度跟踪。正式基线还是用项目工具管，这张图放进周报和交接文档，两者不冲突。

画完之后有三条出路：选中渲染结果复制图像，直接贴进周报；右键笔记导出 HTML / PDF，图表以矢量形式保留（导出逻辑见 export 模块）；或者直接把甘特图文本复制给团队，在任何 Mermaid 工具里复用。

现在合上这页，打开 SiYuan，在任意空白笔记里敲/，用 6 行文字画出你的第一张项目甘特图。

参考资料

• 官方使用文档：README.zh-CN.md
• 甘特图渲染实现（版本、留白与主题配置）：app/src/protyle/render/mermaidRender.ts
• 斜杠菜单选项定义：app/src/protyle/hint/extend.ts

【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间，让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan