甘特图生成

任务列表转可交互甘特图HTML，支持进度追踪和依赖关系

【简介】

项目管理中甘特图是最常用的可视化工具之一，但 Excel 画甘特图费时费力、MS Project 学习成本太高。很多时候只需要一个轻量、可分享、无需安装的项目进度图，能看任务依赖、识别关键路径、追踪进度就够了。

本 Skill 将任务列表（名称、起止时间、负责人、依赖关系）转化为可交互的甘特图 HTML。提供 7 种视图模式——标准甘特图、里程碑导向、资源分配、依赖关系、周视图、季度概览、敏捷冲刺看板。支持时间轴缩放、进度更新、关键路径高亮等交互。

---

Gantt Craft — 甘特图生成 Skill

将项目任务列表转化为可交互的甘特图 HTML，支持进度追踪和依赖关系展示。

作者：wuwenbin-beijing-st

使用说明

运行此 Skill 后，按以下步骤操作：

1. 输入任务数据：粘贴任务列表（名称、起止时间、负责人、进度、依赖关系）
2. 选择甘特图类型：从映射表中选择最适合的视图
3. 选择配色方案：选择进度状态配色主题
4. 生成甘特图：输出交互式单文件 HTML

任务数据输入格式

text

任务名称,开始日期,结束日期,负责人,进度,依赖
需求分析,2024-01-01,2024-01-15,张三,100%,
UI设计,2024-01-10,2024-01-25,李四,80%,需求分析
前端开发,2024-01-20,2024-02-15,王五,60%,UI设计
后端开发,2024-01-20,2024-02-10,赵六,70%,需求分析
测试,2024-02-10,2024-02-25,张三,20%,前端开发,后端开发

或使用 JSON 格式：

json

[
  {"id":"T1","name":"需求分析","start":"2024-01-01","end":"2024-01-15","owner":"张三","progress":1,"deps":[]},
  {"id":"T2","name":"UI设计","start":"2024-01-10","end":"2024-01-25","owner":"李四","progress":0.8,"deps":["T1"]}
]

场景-模式映射表

项目场景	推荐模式	特点
通用项目计划	standard（标准）	周/月时间轴，全部任务展示
关键节点跟踪	milestone（里程碑）	突出里程碑节点，弱化日常任务
人力调配	resource（资源分配）	按负责人着色，查看各人工作量
复杂项目	dependency（依赖关系）	用箭头展示任务前后依赖及关键路径
短期冲刺	compact（周视图）	单周/双周紧凑视图
年度规划	quarterly（季度概览）	季度为单位，适合高层汇报
敏捷开发	agile-sprint（敏捷冲刺）	类看板 + 时间轴混合

配色方案库

进度状态色

• 未开始：#9ca3af 灰色
• 进行中：#3b82f6 蓝色
• 已完成：#22c55e 绿色
• 延期/风险：#ef4444 红色
• 里程碑：#f59e0b 金色菱形

负责人配色（自动分配）

text

#3b82f6 #ef4444 #22c55e #f59e0b #8b5cf6 #ec4899 #14b8a6 #f97316

4 套主题配色

1. 项目蓝

text

--bg: #ffffff
--text: #1f2937
--grid: #f1f5f9
--grid-line: #e2e8f0
--weekend: #f8fafc
--today: #fef3c7
--task-border: #e2e8f0

2. 暗色仪表盘

text

--bg: #0f172a
--text: #e2e8f0
--grid: #1e293b
--grid-line: #334155
--weekend: #1e293b
--today: #422006
--task-border: #475569

3. 纸质计划书

text

--bg: #fefcf6
--text: #3a3a3a
--grid: #fafaf9
--grid-line: #e5e5e5
--weekend: #fefcf6
--today: #fef3c7
--task-border: #d4d4d4

4. 极简灰白

text

--bg: #f8f9fa
--text: #212529
--grid: #ffffff
--grid-line: #dee2e6
--weekend: #f8f9fa
--today: #fff3cd
--task-border: #ced4da

交互增强包列表

基础交互

• 时间轴缩放（日/周/月切换）
• 任务条悬停详情
• 水平滚动查看全时间轴
• 里程碑标记

高级交互

• 按负责人/状态筛选任务
• 进度滑块（在线调整进度百分比）
• 关键路径高亮（最长路径任务标红边框）
• 任务依赖箭头显示/隐藏
• 导出为 PNG 图片

限制说明

• 单文件 HTML：所有输出均为单一 HTML 文件，CSS 和 JS 全部内联
• 零外部依赖：不加载任何 CDN 资源、字体、图标库
• 绘制方式：时间轴和任务条使用纯 CSS/SVG 绘制
• 系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif
• 浏览器兼容：Chrome/Firefox/Safari/Edge 最新两版
• 响应式布局：支持横向滚动，移动端可左右拖动查看

命令定义

/gantt-craft

主入口命令。输入任务数据，选择甘特图类型后生成交互式甘特图 HTML。

/gantt-template

生成空白甘特图模板供规划使用。包含填表示例和空行，用户可在线修改任务数据后生成。

文件结构

text

skills/gantt-craft/
├── SKILL.md
├── patterns/
│   ├── standard.json        # 标准甘特图
│   ├── milestone.json       # 里程碑导向
│   ├── resource.json        # 资源分配视图
│   ├── dependency.json      # 依赖关系图
│   ├── compact.json         # 紧凑周视图
│   ├── quarterly.json       # 季度概览
│   └── agile-sprint.json    # 敏捷冲刺看板
└── templates/
    ├── base.html
    ├── standard.html
    ├── milestone.html
    ├── resource.html
    ├── dependency.html
    ├── compact.html
    ├── quarterly.html
    └── agile-sprint.html