draw.io 中绘制甘特图需借助模板、手动构建、csv导入、第三方扩展或svg导出五种方法：一用内置gantt chart模板快速搭建；二手动绘制时间轴实现精细控制；三通过csv数据批量生成任务条；四安装javascript扩展增强日期计算与进度渲染；五导出为带交互属性的svg嵌入网页。
如果您希望在 draw.io 中绘制项目进度甘特图，但缺乏内置模板或时间轴支持，则可能是由于 draw.io 默认未提供专用甘特图形状库与自动工期计算功能。以下是解决此问题的步骤：
一、使用内置甘特图模板创建基础图表
draw.io 提供了预设的甘特图模板，可快速搭建时间轴与任务栏结构，避免从零绘制。该方法适用于任务数量较少、时间粒度为天或周的中小型项目。
1、打开 draw.io 网页版（app.diagrams.net）或桌面客户端。
2、点击“新建空白图表”旁的“更多模板”按钮，展开模板分类。
3、在搜索框中输入 Gantt chart，从结果中选择“Gantt Chart”模板并点击“创建”。
4、模板将自动加载包含时间轴（顶部横向标尺）、任务行（左侧纵向列表）和可拖拽任务条（中间矩形）的三区布局。
5、双击任务名称列中的文本，修改为实际任务名；拖动任务条左右边界调整起止位置，对应开始与结束日期。
二、手动构建自定义甘特图时间轴
当需要精确控制日期范围、显示节假日标记或适配非标准工作日时，需手动构建时间轴。该方法通过组合矩形、线条与文本实现完全可控的视觉表达。
1、在画布左侧空白区绘制一个竖直矩形，填充浅灰色，作为任务名称栏背景。
2、在其右侧绘制一个水平长矩形，填充白色，作为时间轴主区域。
3、使用“对齐与分布”工具，在时间轴上方等距添加多个文本框，依次标注“第1周”“第2周”……或具体日期如“4/26”“5/3”等。
4、在任务栏与时间轴之间插入垂直虚线，表示每周/每日分界；右键虚线选择“样式”，设置为 dashed=1;dashPattern=1 4;。
5、为每个任务绘制一个横向矩形，置于对应行高位置，宽度按工期比例缩放，并用不同颜色区分任务类型。
三、导入CSV数据批量生成任务条
draw.io 支持通过 CSV 数据驱动图形生成，适合已有结构化任务列表（含任务名、开始日、工期）的用户，可一次性生成全部任务条并保持位置同步更新。
1、准备 CSV 文件，确保首行为字段名：task,start,duration（示例：设计UI,2026-04-26,5）。
2、在 draw.io 中点击“排列”→“插入”→“高级”→“CSV 表格”，粘贴内容或上传文件。
3、勾选“创建形状”选项，选择“矩形”作为每行数据的图形映射类型。
4、在“映射”设置中，将 task 字段绑定至标签，start 和 duration 绑定至 x/y 坐标及宽度表达式，例如：x=scale(dateDiff(start,'2026-04-26'),1,10)（以像素为单位换算）。
5、点击“应用”，系统将按 CSV 行数生成带位置与标签的任务条。
四、利用第三方扩展增强甘特功能
draw.io 社区开发了若干插件与扩展脚本，可在不更换工具的前提下补足原生缺失的日期计算、进度百分比渲染与依赖连线功能。
1、访问 GitHub 搜索关键词 drawio-gantt-extension，找到 star 数最高的开源仓库。
2、复制其中的 JavaScript 脚本代码（通常为单个 .js 文件）。
3、在 draw.io 中点击“排列”→“插入”→“高级”→“脚本”，粘贴代码并启用“运行脚本”选项。
4、脚本激活后，右键画布任意位置会出现新增菜单项，如“插入甘特任务条”“自动计算工期”等。
5、选择菜单项后，按提示输入任务参数，系统将自动生成带日期标注、进度阴影和浮动标签的任务图形。
五、导出为可交互 SVG 并嵌入项目管理页面
为便于团队协作查看，可将完成的甘特图导出为带内联 CSS 的 SVG 文件，保留颜色、悬停提示与缩放能力，直接嵌入内部 Wiki 或项目看板。
1、完成图表编辑后，点击“文件”→“导出为”→“SVG”。
2、勾选“导出背景”与“包含 CSS 样式”，取消勾选“压缩 SVG”以保留可读性。
3、在弹出的 SVG 代码窗口中，查找所有 <rect></rect> 标签，在其属性中手动添加 data-task="设计UI" data-start="2026-04-26" data-progress="60" 等自定义属性。
4、将 SVG 代码保存为 .svg 文件，或直接复制粘贴至 HTML 页面的 内。
5、配合简短 JavaScript，监听鼠标移入事件，动态显示 任务：设计UI｜进度：60%｜已延迟2天 的 tooltip 提示。
