Browse Courses

Kanban Board

July 9, 2025 6 min read Docs

The Kanban board is a visual tool that helps teams manage their workflow and visualize tasks. It consists of columns representing different stages of the workflow, with cards representing individual tasks. Teams can move cards between columns as work progresses, providing a clear overview of the project's status.

On this page

Template Usage Guide

Template Usage Guide

VS Code Extension Setup

This template is designed to work with the Markdown Kanban VS Code extension by holooooo.

Installation & Setup:

  1. Install Extension: Search for “Markdown Kanban” in VS Code Extensions marketplace
  2. Open Command: Use Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
  3. Activate Board: Type “Kanban: Open Board” and select your markdown file
  4. View Modes: Toggle between markdown source and visual Kanban board

Key Features:

  • ✅ Visual Kanban Board: Interactive drag-and-drop interface
  • ✅ Live Sync: Changes in markdown reflect instantly in board view
  • ✅ Task Management: Rich task properties (priority, tags, due dates)
  • ✅ Progress Tracking: Checkbox steps and completion status
  • ✅ Custom Columns: Flexible workflow adaptation
  • ✅ Export Options: Markdown source remains version-controllable

Extension Commands:

1# Open Kanban board view
2Kanban: Open Board
3
4# Refresh board view
5Kanban: Refresh Board
6
7# Toggle between source and board view
8Kanban: Toggle View

Keyboard Shortcuts:

  • Tab: Navigate between cards
  • Enter: Edit card title
  • Escape: Exit edit mode
  • Space: Toggle card expansion

Board Navigation & Interaction

Visual Board Features:

  • Drag & Drop: Move cards between columns
  • Card Expansion: Click cards to expand/collapse details
  • Quick Edit: Double-click titles for inline editing
  • Filtering: Use tags for filtering and organization
  • Search: Find specific cards quickly

Priority Levels (with visual indicators)

  • critical - 🔴🔴 Must be done immediately
  • high - 🔴 Important and urgent
  • medium - 🟡 Moderate priority
  • low - 🟢 Nice to have

Workload Levels (effort estimation)

  • Easy - 🟢 1-2 days, minimal complexity
  • Normal - 🟡 3-5 days, moderate complexity
  • Hard - 🔴 1-2 weeks, significant complexity
  • Extreme - 🔴🔴 2+ weeks, major undertaking

Tag Categories (for filtering)

  • Technology: [frontend, backend, api, database]
  • Type: [feature, bug, enhancement, refactor]
  • Phase: [planning, development, testing, deployment]
  • Area: [ui, ux, performance, security]
  • Status: [blocked, urgent, review, approved]

Step Format (task breakdown)

1- steps:
2  - [x] Completed step
3  - [ ] Pending step
4  - [ ] Future step

Date Format

  • due: YYYY-MM-DD for deadlines
  • completed: YYYY-MM-DD for finished items

Code Block Format (detailed descriptions)

1```md
2Detailed description with:
3
4- Structured information
5- Lists and bullet points
6- Technical specifications
7- Clear acceptance criteria
8```

Expansion Control

  • Add defaultExpanded: true for tasks that should show details by default
  • Useful for current sprint items or critical tasks

Customization Notes

  1. Column Names: Rename sections (## Product Backlog, ## Sprint Backlog, etc.) to match your workflow
  2. Sprint Naming: Use descriptive sprint names like “Sprint 1: Foundation” or “Sprint 2: Core Features”
  3. Tag System: Develop consistent tagging conventions for your project
  4. Workload Calibration: Adjust workload definitions based on your team’s capacity
  5. Due Date Strategy: Set realistic deadlines and update them as needed

This template provides a complete reference for creating rich, detailed Kanban boards using all features of the markdown-kanban VS Code extension.

Detailed Kanban Board Example

  • Project Name - Development Kanban Board

Template Purpose: This template demonstrates all features of the markdown-kanban VS Code extension. Replace this section with your project description.

Product Backlog

  • Epic: [Epic Title - Major Feature or Goal]

    • due: YYYY-MM-DD

    • tags: [epic, feature, priority-area]

    • priority: critical

    • workload: Extreme

    • defaultExpanded: true

       1Comprehensive description of the epic including:
 2
 3Main Objectives:
 4
 5- Objective 1: Clear, measurable goal
 6- Objective 2: Another key deliverable
 7- Objective 3: Final outcome expected
 8
 9Success Criteria:
10
11- Criteria 1: How to measure success
12- Criteria 2: Key performance indicators
13- Criteria 3: Acceptance standards
14
15Dependencies:
16
17- External dependency 1
18- Internal dependency 2
19- Technical prerequisite 3

  • Story: [High Priority Feature]

    • due: YYYY-MM-DD

    • tags: [frontend, backend, api]

    • priority: high

    • workload: Hard

       1Detailed user story following the format: "As a [user type], I want [functionality] so that [benefit]"
 2
 3Acceptance Criteria:
 4
 5- Given [context], when [action], then [expected result]
 6- Given [context], when [action], then [expected result]
 7- Edge case handling and error scenarios
 8
 9Technical Notes:
10
11- Implementation approach
12- Technology choices
13- Performance considerations

  • Story: [Medium Priority Enhancement]

    • due: YYYY-MM-DD

    • tags: [enhancement, ui, ux]

    • priority: medium

    • workload: Normal

       1Description of the enhancement or improvement needed.
 2
 3Current State:
 4
 5- What exists today
 6- Limitations or issues
 7
 8Desired State:
 9
10- What should be achieved
11- Expected improvements
12- User experience enhancements

  • Story: [Low Priority Nice-to-Have]

    • due: YYYY-MM-DD

    • tags: [nice-to-have, future]

    • priority: low

    • workload: Easy

       1Optional feature that would add value but is not critical.
 2
 3Benefits:
 4
 5- User benefit 1
 6- User benefit 2
 7- Business value
 8
 9Implementation Ideas:
10
11- Approach 1: Simple solution
12- Approach 2: Comprehensive solution

Sprint Backlog (Sprint N: Sprint Name)

  • Story: [Current Sprint High Priority]

    • due: YYYY-MM-DD

    • tags: [sprint-current, development, testing]

    • priority: critical

    • workload: Hard

    • defaultExpanded: true

    • steps:

      • Completed task or research
      • Another completed item
      • In-progress task
      • Planned task
      • Final task or review
       1Story committed to current sprint with detailed breakdown.
 2
 3Sprint Goals:
 4
 5- Primary goal for this story
 6- Secondary objectives
 7- Definition of done criteria
 8
 9Technical Tasks:
10
11- Development task 1
12- Development task 2
13- Testing requirements
14- Documentation needs

  • Story: [Sprint Planning Item]

    • due: YYYY-MM-DD

    • tags: [planning, architecture, design]

    • priority: high

    • workload: Normal

    • steps:

      • Research and analysis
      • Design documentation
      • Technical specification
      • Review and approval
      1Planning and design work for upcoming features.
2
3Deliverables:
4
5- Design document
6- Technical specification
7- Implementation plan
8- Risk assessment

In Progress

  • Story: [Currently Being Developed]

    • due: YYYY-MM-DD

    • tags: [in-progress, development, current]

    • priority: high

    • workload: Hard

    • defaultExpanded: true

    • steps:

      • Initial setup and configuration
      • Core functionality implementation
      • Integration with existing systems
      • Unit testing and validation
      • Documentation and code review
       1Story currently being worked on with active development.
 2
 3Current Status:
 4
 5- What has been completed
 6- Current blockers or challenges
 7- Expected completion timeline
 8
 9Next Steps:
10
11- Immediate next actions
12- Dependencies to resolve
13- Review and testing plans

  • Story: [Another Active Item]

    • due: YYYY-MM-DD

    • tags: [active, testing, integration]

    • priority: medium

    • workload: Normal

    • steps:

      • Development completed
      • Testing in progress
      • Bug fixes needed
      • Final review
      1Secondary item being worked on concurrently.
2
3Progress Update:
4
5- Development phase complete
6- Currently in testing phase
7- Issues identified and being addressed

Review/QA

  • Story: [Ready for Review]

    • due: YYYY-MM-DD

    • tags: [review, qa, testing]

    • priority: high

    • workload: Easy

    • steps:

      • Development complete
      • Unit tests passing
      • Code review scheduled
      • QA testing
      • Acceptance testing
      1Feature complete and ready for quality assurance review.
2
3Review Checklist:
4
5- Code quality and standards
6- Test coverage adequate
7- Documentation complete
8- Performance acceptable
9- Security considerations addressed

  • Story: [Awaiting Approval]

    • due: YYYY-MM-DD

    • tags: [approval, stakeholder, demo]

    • priority: medium

    • workload: Easy

       1Feature ready for stakeholder approval and final sign-off.
 2
 3Demo Points:
 4
 5- Key functionality to demonstrate
 6- User scenarios to showcase
 7- Business value delivered
 8
 9Approval Criteria:
10
11- Stakeholder satisfaction
12- Requirements met
13- Ready for production deployment

Done

  • Story: [Recently Completed Feature]

    • completed: YYYY-MM-DD

    • tags: [completed, deployed, success]

    • priority: high

    • workload: Normal

       1✅ Successfully completed and deployed feature.
 2
 3Achievements:
 4
 5- All acceptance criteria met
 6- Testing completed successfully
 7- Deployed to production
 8- User feedback positive
 9
10Lessons Learned:
11
12- What worked well
13- Challenges encountered
14- Improvements for next time
15
16Metrics:
17
18- Performance improvements
19- User adoption
20- Business impact

  • Story: [Earlier Completion]

    • completed: YYYY-MM-DD

    • tags: [milestone, release, archived]

    • priority: medium

    • workload: Easy

       1✅ Completed milestone or release.
 2
 3Release Notes:
 4
 5- Version number
 6- Key features delivered
 7- Bug fixes included
 8- Known limitations
 9
10Next Steps:
11
12- Follow-up improvements identified
13- User feedback collection plan
14- Future enhancement opportunities
Sprint Planning