Kanban Flow

Kanban Flow is a lightweight Kanban board for Visual Studio Code that stores your tasks in plain Markdown.

Create, organize, filter, and edit tasks in a visual drag-and-drop board while keeping the source of truth as a readable *.kanban.md file. Your board stays portable, version-control friendly, and easy to review in pull requests.

Why Kanban Flow?

• Markdown-first: tasks are saved as a normal Markdown table.
• Visual workflow: open your board as an interactive Kanban editor.
• Git-friendly: track task changes directly in your repository.
• Shareable images: attach images via Cloudinary — stored as public URLs, accessible to anyone.
• Built for developers: manage project work without leaving VS Code.

Features

• Custom Kanban editor for Kanban.md and *.kanban.md files.
• Activity Bar integration with a dedicated Kanban Flow sidebar.
• Workspace board discovery for existing Kanban Markdown files.
• Drag and drop tasks between columns.
• Inline task editing for title, description, tags, due date, priority, blocker, progress, and image.
• Image attachments — upload from your machine and host on Cloudinary; stored as a public URL in the Markdown.
• Stable task IDs stored in Markdown for reliable syncing.
• Search, filtering, and sorting to quickly find tasks.
• Priority labels including Low, Medium, High, and Critical.
• Progress indicator with a visual arc badge and colour-coded tiers.
• Due date indicators for upcoming and overdue work.
• Tag chips and suggestions based on existing board tags.
• Blocker suggestions based on existing task blockers.
• Task preview modal — click the eye icon on any card to view full details.
• Command Palette commands for common board actions.
• Status bar summary for active Kanban files.
• Diagnostics for invalid statuses, priorities, dates, and duplicate IDs.

Getting Started

Create a new board

Open the Command Palette:

Ctrl+Shift+P

Run:

Kanban: New Kanban Board

Kanban Flow creates a Kanban.md file in your workspace and opens it with the visual board editor.

Open an existing board

Create or open a file named:

Kanban.md

or:

project.kanban.md

Then open it with the Kanban Flow editor.

You can also click the Kanban Flow icon in the Activity Bar to find boards in your workspace.

Markdown Format

Kanban Flow uses a stable ID-based table schema:

# Kanban Board

| ID            | Title                  | Status      | Description                                | Tags            | Due Date   | Priority | Blocker | Progress | Image                                     |
| ------------- | ---------------------- | ----------- | ------------------------------------------ | --------------- | ---------- | -------- | ------- | -------- | ----------------------------------------- |
| task-sample-1 | Design markdown schema | Done        | Define the table columns used by the board | markdown,schema | 2026-05-19 | High     |         | 100      |                                           |
| task-sample-2 | Build React board      | On Progress | Create drag-and-drop board UI              | react,vscode    | 2026-05-20 | High     |         | 60       | https://res.cloudinary.com/demo/image/... |
| task-sample-3 | Package extension      | TODO        | Prepare extension packaging and docs       | vscode          | 2026-05-21 | Medium   |         | 20       |                                           |

The ID column is required. It keeps task identity stable when tasks are edited, sorted, filtered, or moved between columns.

Commands

Kanban Flow contributes the following commands:

Image Attachments

Kanban Flow can upload images to Cloudinary and store the public URL in the Image column of your board file. Because the URL is public, the image is visible to anyone you share the file with.

Setup

1. Create a free Cloudinary account at https://cloudinary.com.
2. In the Cloudinary dashboard go to Settings → Upload → Upload presets.
3. Create a new preset and set Signing mode to Unsigned. Note the preset name.
4. Your cloud name is shown on the dashboard homepage (top-left).
5. Add both values to your VS Code settings.json:

"kanban.cloudinaryCloudName": "your-cloud-name",
"kanban.cloudinaryUploadPreset": "your-unsigned-preset"

Uploading an image

1. Double-click a task card to open the edit form.
2. Click 📎 Upload image.
3. Select an image file (PNG, JPG, JPEG, GIF, or WEBP).
4. The image is uploaded to Cloudinary and a thumbnail appears immediately in the edit form.
5. Save the card — the public URL is written to the Image column in your Markdown file.

The card view shows a cover thumbnail. Click it or the eye icon to open the full detail modal with the full-size image.

Settings

You can configure Kanban Flow from VS Code settings:

Recommended File Names

Kanban Flow automatically recognizes:

• Kanban.md
• *.kanban.md

Examples:

• Kanban.md
• project.kanban.md
• release-plan.kanban.md

Local Installation

If you have a packaged .vsix file:

code --install-extension kanban-flow-0.1.0.vsix

Or in VS Code:

1. Open the Command Palette.
2. Run Extensions: Install from VSIX....
3. Select the kanban-flow-0.1.0.vsix file.

Development

Install dependencies:

npm install

Run tests:

npm test

Build the extension:

npm run build

Package the extension:

vsce package

Launch the extension locally by pressing F5 in VS Code.

Notes

• Kanban Flow uses an ID-based Markdown schema. Legacy tables without the ID column are not supported.
• Keep all table columns intact so the visual editor can parse and sync your board correctly.
• Image URLs are stored as plain text in the Markdown file. Deleting the URL from the file removes the image from the card (the Cloudinary copy remains).
• Image uploads require curl to be available on your PATH (pre-installed on macOS and most Linux distributions).

License

MIT