Create a remote kanban board with draw.io

draw.io 21 May 2021

Share:

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 template in draw.io automatically updates colours and labels when you move tasks to another column

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.

Create your kanban board in draw.io using simple shapes, lists, entity tables or the simple kanban template

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

  1. Select Arrange > Insert > Template from the draw.io menu to see the template library.
  2. In the Basic library, select the Kanban template, and click Insert.
    The kanban template in draw.io automatically updates colours and labels when you move tasks to another column

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

  1. 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.
  2. Double click on the new task and edit their task name
    Tip: Don’t edit the %status text - learn more about this placeholder in the section below.
  3. Drag tasks from one column to another to change their state and show where they are in your workflow.
    The kanban template in draw.io automatically updates colours and labels when you add tasks or move them to another column

Delete a task: Select the task, and press Delete or Backspace.

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.

Vote on tasks or set task priorities by placing pins or other simple shapes on your kanban board in draw.io

  • Hold down Alt to 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

  1. Select a column (one of the swimlanes) and hover over one side to see the direction arrows.
  2. Click on the direction arrow to add a new column in that direction.
    Add a new column to the kanban template in draw.io

Delete a column: Select the column (swimlane), and press Delete or Backspace.

Change the colour of the tasks in a column

Task colours are automatically set to match the swimlane’s fill colour.

  1. Select the column (swimlane), then in the Style tab of the format panel, click on the Fill colour button.
    Change the colour of the tasks in a column to the kanban template in draw.io
  2. 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: %status%.
Placeholders are used to set text automatically in the simple kanban template in draw.io

The text that replaces this placeholder is set in the swimlane’s custom properties.

  1. Select the column (swimlane), then press Ctrl+M on Windows or Cmd+M on macOS to open the shape properties dialog.
    Placeholders are used to set text automatically in the simple kanban template in draw.io
  2. 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.
Use the Minimal or Sketch editor themes in draw.io to make your remote kanban board feel more like a whiteboard
Open these examples in the minimal draw.io editor

Follow us on GitHub, Twitter, Facebook.

Share: