Create a remote kanban board with draw.io
Kanban boards show the breakdown of large projects into smaller tasks that you prioritise and track as they are completed. Collaborative projects benefit from a kanban board as it helps everyone visualise workflows, the state of the project, and the current workload.
The Kanban method or system is commonly used by project and production managers, agile and system developers, designers and content marketers. Almost all areas of a business can use this method to track work, identify bottlenecks, and improve processes.
You can draw remote kanban boards in draw.io in many different ways - you don’t have to use the simple kanban template as shown above. You can use simple sticky note shapes over coloured rectangles, list elements, or entity table shapes - whichever you find most convenient.
However, the simple kanban board template in draw.io will automatically colour tasks based on the column (the swimlane or state) they are in, and update the label text accordingly.
Using the kanban board template
Insert the simple kanban template
- Select Arrange > Insert > Template from the draw.io menu to see the template library.
- In the Basic library, select the Kanban template, and click Insert.
You aren’t limited to just three columns in your kanban board. This template uses a custom shape property on the swimlane (column) to set the label text, and the swimlane’s fill colour for the tasks.
Add and move tasks
- Hover over one of the tasks in a column to see the direction arrows, then click on it. A new task will be added in that direction with a copy of the previous task label.
- Double click on the new task and edit their task name
Tip: Don’t edit the
%statustext - learn more about this placeholder in the section below.
- Drag tasks from one column to another to change their state and show where they are in your workflow.
Delete a task: Select the task, and press
Vote and prioritise on the kanban board
Teams can work remotely and collaboratively on their kanban board diagrams, add links to external sites or documents, add and link to other diagram pages, and vote on priorities.
- Hold down
Altto overlay shapes on the kanban board, such as when prioritising or voting on the next tasks to implement.
- To make your kanban board more readable, select all of the voting/pin shapes, go to the Arrange tab on the format panel, and click To Front to make sure they will be visible on top of your tasks.
Tip: Right-click on the drawing canvas and share your mouse cursor with your team in real-time with draw.io for Confluence Cloud, as well as in draw.io when storing shared diagram files in Google Drive or Microsoft OneDrive.
Add a new column to the kanban board
- Select a column (one of the swimlanes) and hover over one side to see the direction arrows.
- Click on the direction arrow to add a new column in that direction.
Delete a column: Select the column (swimlane), and press
Change the colour of the tasks in a column
Task colours are automatically set to match the swimlane’s fill colour.
- Select the column (swimlane), then in the Style tab of the format panel, click on the Fill colour button.
- Select a new colour from the palette, and click Apply.
Change the status text in the task label
As you saw in above, the status text in the simple kanban board template is a placeholder. When you select the text in one of the tasks, you’ll see the word
status surrounded by percentage characters:
The text that replaces this placeholder is set in the swimlane’s custom properties.
- Select the column (swimlane), then press
Ctrl+Mon Windows or
Cmd+Mon macOS to open the shape properties dialog.
- Change the status text, and click Apply.
Note: The title of the column is not set automatically. Select the column and start typing to replace the column’s title.
Learn more about custom properties and placeholders
Embed your kanban board
The many different draw.io integrations let you use your kanban boards with the tools you use.
Embed your kanban diagram wherever you are working: HTML pages, VSCode and GitHub projects, Google Workplace and Microsoft Office documents and slides, Atlassian Confluence, Notion pages, and more.
See the draw.io editor embedding walkthrough if you want to embed your kanban board and the draw.io editor in another application.
Kanban in a simpler diagram editor
Use the Minimal or Sketch editor theme, with the editor grid turned off to make your kanban board feel more like sticky notes on a whiteboard. Use the draw.io Board macro in Confluence to use the Sketch editor theme by default.
Open these examples in the minimal draw.io editor