Markdown 看板图语法

看板图简介

看板图（Kanban）是一种可视化工作流程的工具，起源于丰田生产系统，现广泛应用于软件开发、项目管理等领域。在 Markdown 中，我们可以使用 Mermaid 的看板图语法来创建交互式看板，用于：

• 项目管理（待办、进行中、已完成）
• 任务追踪
• 工作流状态管理
• 团队协作进度可视化

基础语法结构

在 Markdown 中创建看板图，需要使用 ```mermaid 代码块包裹看板图语法：

```mermaid
kanban
  title 项目开发看板

  column 待处理
    任务1
    任务2

  column 进行中
    任务3

  column 已完成
    任务4
```

效果预览：

kanban
  title 项目开发看板

  column 待处理
    任务1
    任务2

  column 进行中
    任务3

  column 已完成
    任务4

列定义与配置

1. 基础列定义

kanban
  title 简易任务管理

  column 待办
  column 进行中
  column 审核中
  column 已完成

2. 带卡片数的列

kanban
  title 团队任务看板

  column "待处理"
    "任务 1"
    "任务 2"
    "任务 3"

  column "开发中"
    "任务 4"
    "任务 5"

  column "测试中"
    "任务 6"

  column "已发布"
    "任务 7"
    "任务 8"
    "任务 9"
    "任务 10"

3. 列宽度设置

kanban
  title 可调整列宽的看板

  column 需求池
    colwidth 200

  column 设计阶段
    colwidth 150

  column 开发阶段
    colwidth 200

  column 测试阶段
    colwidth 150

  column 已上线
    colwidth 100

4. 列标签与颜色

kanban
  title 带样式的列

  column 待办
    Add a task: 5
    color #FF6B6B

  column 进行中
    Active tasks: 3
    color #4ECDC4

  column 完成
    Completed: 8
    color #45B7D1

卡片定义与属性

1. 基础卡片

kanban
  title 卡片基础属性

  column 待处理
    用户注册功能开发
    用户登录界面设计

  column 进行中
    数据库设计
    用户认证模块

  column 已完成
    项目环境搭建
    需求文档编写

2. 卡片ID与标签

kanban
  title 带标识的卡片

  column Backlog
    用户故事1 :id1
    用户故事2 :id2

  column In Progress
    开发任务1 :id3
    开发任务2 :id4

  column Done
    完成的任务1 :id5

3. 带描述的卡片

kanban
  title 详细卡片描述

  column 待办
    重构用户模块 : 提高代码可维护性，预计2天
    优化数据库查询 : 添加索引，减少查询时间

  column 进行中
    设计API接口 : 定义RESTful规范，编写文档

  column 已完成
    搭建开发环境 : Docker配置完成

卡片状态与元数据

1. 任务状态标记

kanban
  title 任务状态看板

  column Backlog
    用户注册功能 :crit
    用户登录功能 :active

  column In Progress
    数据库设计 :crit, 3d
    前端页面开发 :active, 2d

  column Testing
    API接口测试 :3d

  column Done
    环境部署 :done, 2023-10-01, 2023-10-02

2. 时间信息

kanban
  title 带时间线的任务

  column 计划中
    功能A :2023-10-01, 2023-10-05
    功能B :2023-10-03, 2023-10-08

  column 执行中
    功能C :active, 2023-10-02, 2023-10-06
    功能D :active, 2023-10-04, 3d

  column 已完成
    功能E :done, 2023-09-25, 2023-09-30

3. 里程碑与标志

kanban
  title 项目里程碑

  column 规划阶段
    需求收集与分析 :milestone
    技术方案设计

  column 开发阶段
    核心模块开发 :crit, milestone
    辅助功能开发

  column 测试阶段
    系统集成测试

  column 上线阶段
    正式发布 :milestone

样式自定义

1. 颜色主题

kanban
  title 彩色主题看板

  column 待办
    任务1
    任务2

  column 进行中
    任务3

  column 阻塞
    任务4

  column 完成
    任务5

  %% 样式定义
  style 待办 fill:#f9f,stroke:#333,stroke-width:2px
  style 进行中 fill:#9f9,stroke:#333,stroke-width:2px
  style 阻塞 fill:#f96,stroke:#333,stroke-width:2px
  style 完成 fill:#6cf,stroke:#333,stroke-width:2px

2. 卡片样式

kanban
  title 卡片样式定制

  column 待处理
    高优先级任务 :crit
    普通任务

  column 处理中
    进行中的任务 :active

  column 已完成
    已完成的任务 :done

  %% 卡片样式
  style id1 fill:#ff9999,stroke:#cc0000,stroke-width:3px
  style id2 fill:#cccccc,stroke:#666666
  style id3 fill:#99ff99,stroke:#00cc00

3. 标签样式

kanban
  title 带标签的任务

  column backlog[Backlog]
    s1[登录页面]@{ ticket: 'id1', tags: 'design' }
    s2[用户注册接口]@{ ticket: 'id2', tags: 'api' }

  column development[Development]
    s3[首页开发]@{ ticket: 'id3', tags: 'frontend' }
    s4[数据库优化]@{ ticket: 'id4', tags: 'backend' }

  column testing[Testing]
    s5[功能测试]@{ ticket: 'id5', tags: 'test' }

  %% 标签样式
  style design fill:#ffcc00
  style api fill:#00ccff
  style frontend fill:#cc66ff
  style backend fill:#66cc66
  style test fill:#ff6666

交互功能

1. 点击事件（理论支持）

kanban
  title 可交互看板（需JavaScript支持）

  column 待处理
    任务1 :id1, click link1 "查看详情"
    任务2 :id2, click link2 "查看详情"

  column 进行中
    任务3 :id3, click link3 "查看详情"

  column 已完成
    任务4 :id4, click link4 "查看详情"

2. 动态更新标记

kanban
  title 进度追踪看板

  column 待分配
    新需求收集 :new
    紧急问题修复 :urgent

  column 已分配
    功能开发 :assigned, 张三
    代码审查 :assigned, 李四

  column 进行中
    前端页面 :active, 80%
    后端接口 :active, 60%

  column 已完成
    项目部署 :done, ✓
    文档编写 :done, ✓

完整示例

敏捷开发看板

```mermaid
kanban
  title 敏捷开发迭代看板 - 迭代#3

  %% 列定义
  column 产品待办列表（Product Backlog）
    colwidth 250
    [用户故事] 作为用户，我希望能够重置密码 :story1, 8 points
    [技术债务] 重构用户认证模块 :debt1, 5 points
    [缺陷] 登录页面在移动端显示异常 :bug1, 3 points

  column 迭代待办列表（Sprint Backlog）
    colwidth 250
    [功能] 实现用户注册功能 :id1, 13 points, 张三
    [功能] 设计用户个人中心页面 :id2, 8 points, 李四
    [功能] 开发后台管理界面 :id3, 20 points, 王五

  column 进行中（In Progress）
    colwidth 200
    [开发] 用户登录模块开发 :id4, active, 5d, 80%, 赵六
    [测试] 注册功能测试用例编写 :id5, active, 3d, 60%, 测试组

  column 代码审查（Code Review）
    colwidth 200
    [审查] 数据库迁移脚本 :id6, review, 2d, 钱七
    [审查] API接口文档更新 :id7, review, 1d, 孙八

  column 测试中（Testing）
    colwidth 200
    [测试] 用户管理功能测试 :id8, test, 3d, QA团队

  column 已完成（Done）
    colwidth 200
    [完成] 项目环境搭建 :id9, done, 2023-10-01, ✓
    [完成] 需求文档编写 :id10, done, 2023-10-03, ✓
    [完成] 技术选型确认 :id11, done, 2023-10-05, ✓

  %% 样式定义
  style story1 fill:#e1f5fe
  style debt1 fill:#fff3e0
  style bug1 fill:#ffebee
  style id1 fill:#c8e6c9
  style id2 fill:#c8e6c9
  style id3 fill:#c8e6c9
  style id4 fill:#fff9c4
  style id5 fill:#fff9c4
  style id6 fill:#e3f2fd
  style id7 fill:#e3f2fd
  style id8 fill:#f3e5f5
  style id9 fill:#f1f8e9
  style id10 fill:#f1f8e9
  style id11 fill:#f1f8e9
```

个人任务管理看板

kanban
  title 个人周计划看板

  column 重要紧急
    colwidth 180
    准备项目汇报材料 :crit, urgent, 今天
    修复线上紧急bug :crit, urgent, 今天

  column 重要不紧急
    colwidth 180
    学习新技术框架 :active, 本周
    优化项目文档 :计划中, 本周

  column 紧急不重要
    colwidth 180
    回复客户邮件 :今天
    团队日常会议 :今天14:00

  column 不紧急不重要
    colwidth 180
    整理电脑文件 :空闲时
    阅读技术文章 :空闲时

  style crit fill:#ffcdd2
  style urgent fill:#ffcdd2
  style active fill:#c8e6c9
  style 计划中 fill:#e3f2fd

最佳实践

1. 命名规范

kanban
  todo[待处理]
    s1[任务描述]@{ ticket: s2, status: 标识 }
    s3[实现用户登录]@{ ticket: dev-001, status: active }

  doing[进行中]
    s5[注册功能测试]@{ ticket: test-001, status: active }

  done[已完成]
    s7[编写API文档]@{ ticket: doc-001, status: done }

2. 状态流转明确

kanban
  title 清晰的状态流转
  column 待认领
    s1[任务A]
    s2[任务B]
  column 已计划
    s3[任务C]@{ due: '下周一' }
    s4[任务D]@{ due: '下周二' }
  column 执行中
    s5[任务E]@{ status: '进行中', progress: '50%' }
    s6[任务F]@{ status: '进行中', progress: '80%' }
  column 待验收
    s7[任务G]@{ status: '等待审核' }
  column 已关闭
    s8[任务H]@{ status: '已完成' }
    s9[任务I]@{ status: '已完成' }

3. 信息完整度

kanban
  s1[需求池]
    t1[用户评论功能]@{ priority: 'High', assigned: '张三' }
  s2[开发中]
    t2[文章发布功能]@{ assigned: '李四' }
  s3[测试中]
    t3[图片上传功能]@{ assigned: '王五' }

平台兼容性

支持程度

使用建议

1. 在线编辑器测试：先在 Mermaid Live Editor 测试
2. 版本检查：确认目标平台使用的 Mermaid 版本
3. 降级方案：复杂看板可考虑用表格或列表替代
4. 渐进增强：先实现核心功能，再添加高级特性

常见限制

1. 交互功能：大部分平台不支持点击事件
2. 动态更新：看板内容通常是静态的
3. 复杂样式：某些 CSS 样式可能不生效
4. 移动端显示：复杂看板在移动端可能显示异常