扔掉Excel!用10行文字,画出让老板“一眼懂”的项目进度表

前两天，我们学会了用 Mermaid 画逻辑（流程图）和交互（时序图）。

到了第三天，我们要解决职场里两个最玄学的难题：

1. “项目到底进行到哪了？” —— 以前你得拖 Excel 的色块，拖到眼花。
2. “用户体验到底怎么样？” —— 以前全靠开会时“我觉得用户会不爽”的口头争论。

今天，我们将解锁 Mermaid 工具箱里最适合管理者的两张图表：甘特图 (Gantt Diagram) 和 用户旅程图 (User Journey Diagram)。

准备好你的 Mermaid Live Editor，我们开始今天的“时间魔法”。

📅 一、甘特图：治愈你的“排期焦虑”

如果你做过项目管理，一定被 Gantt Chart（甘特图）折磨过。专业的 Project 软件太重，用 Excel 手动填色块又太蠢——一旦项目延期三天，后面几十个色块都得手动往后挪。

Mermaid 的甘特图渲染功能，灵感来源于 Jessica Peter 的贡献 ，它的核心理念是：你只管定义任务和时长，排版交给它。

场景实战：年会筹备“生死时速”

假设你正在负责公司的年会筹备，任务多且杂。别慌，复制这段代码：

gantt    title 2024年公司年会筹备计划    dateFormat  YYYY-MM-DD    axisFormat  %m-%d    section 场地策划    选定酒店       :done,    des1, 2024-01-01, 3d    签订合同       :active,  des2, after des1, 2d    场地布置       :         des3, after des2, 5d    section 节目编排    各部门报节目   :crit, done, 2024-01-01, 7d    节目彩排       :crit, active, 5d    主持人串词     :2d    section 物料准备    伴手礼采购     :after des2, 5d    奖品打包       : 48h

🔍 代码“三层解释”：

1. 全局设定：dateFormat 定义了你习惯的日期格式。
2. 任务状态：

• done (已完成)：Mermaid 会自动把它变灰。
• active (进行中)：通常显示为高亮色。
• crit (关键路径)：加上这个标记，任务条会变红，提醒大家“这个拖了就全完蛋了”。

1. 自动排期：这是最爽的。注意看 after des1。这意味着“签订合同”必须在“选定酒店”之后。如果你修改了第一步的日期，后面的所有任务会自动顺延！

🚶‍♀️ 二、用户旅程图：把“体验”量化

产品经理和运营最怕听到“用户体验”四个字，因为太抽象。

Mermaid 的 User Journey Diagram 是一个非常年轻但好用的图表。它能把用户在每个环节的情绪（满意度）画成一条可视化的曲线。

场景实战：小白用户的“网购历险记”

怎么向团队展示用户在哪个环节最想卸载 App？画出来。

journey    title 用户网购体验情绪图    section 浏览商品      打开App: 5: 用户, 推荐算法      搜索商品: 3: 用户      查看详情: 5: 用户    section 下单支付      加入购物车: 5: 用户      强制登录: 1: 用户      忘记密码: 0: 用户    section 售后      支付成功: 5: 用户      查看物流: 4: 用户

🔍 代码拆解：

• 评分机制：代码里的数字 5, 3, 1 代表满意度（0-5分）。
• 5分：开心（笑脸）
• 3分：普通（平脸）
• 1分：崩溃（哭脸）
• 角色分配：冒号后面的 用户, 推荐算法 是参与该环节的角色。

💡 职场应用： 当你把这张图甩在 PPT 上，指着那个 1分 的“强制登录”环节说：“看，这就是我们流失率最高的地方。” 这比说一万句“体验不好”都有说服力。