Knsv/5342 kanban

[knsv]

📑 Summary

Resolves #5342

📏 Design Decisions

Mermaid Kanban Diagram Documentation

Mermaid’s Kanban diagram allows you to create visual representations of tasks moving through different stages of a workflow. This guide explains how to use the Kanban diagram syntax, based on the provided example.

Overview

A Kanban diagram in Mermaid starts with the kanban keyword, followed by the definition of columns (stages) and tasks within those columns.

kanban
  column1[Column Title]
    task1[Task Description]

Defining Columns

Columns represent the different stages in your workflow, such as “Todo,” “In Progress,” “Done,” etc. Each column is defined using a unique identifier and a title enclosed in square brackets.

Syntax:

columnId[Column Title]

• columnId: A unique identifier for the column.
• [Column Title]: The title displayed on the column header.

Like this id1[Todo]

Adding Tasks to Columns

Tasks are listed under their respective columns with an indentation. Each task also has a unique identifier and a description enclosed in square brackets.

Syntax:

taskId[Task Description]

•	taskId: A unique identifier for the task.
•	[Task Description]: The description of the task.

Example:

docs[Create Documentation]

Adding Metadata to Tasks

You can include additional metadata for each task using the @{ ... } syntax. Metadata can contain key-value pairs like assigned, ticket, priority, etc. This will be rendered added to the rendering of the node.

Supported Metadata Keys

•	assigned: Specifies who is responsible for the task.
•	ticket: Links the task to a ticket or issue number.
•	priority: Indicates the urgency of the task (e.g., ‘Very High’,‘High’, ‘Low’, ‘Very Low’).

kanban
todo[Todo]
  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }

Configuration Options

You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams tacketBaseUrl. This can be set as in the the following example:

---
config:
  kanban:
    ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
---

When the kanban item has an assigned ticket number the ticket number in the diagram will have a link to an external system where the ticket is defined. The ticketBaseUrl sets the base URL to the external system and #TICKET# is replaced with the ticket value from task metadata to create a valid link.

Full Example

Below is the full Kanban diagram based on the provided example:

---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
  Todo
    [Create Documentation]
    docs[Create Blog about the new diagram]
  [In progress]
    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: e6ea4ea

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	e6ea4ea
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/671f91b631f5d700086a3892
😎 Deploy Preview	https://deploy-preview-5999--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/mermaid-js/mermaid@5999

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@5999

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@5999

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@5999

commit: e6ea4ea

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 806 lines in your changes missing coverage. Please review.

Project coverage is 4.56%. Comparing base (e765007) to head (e6ea4ea).
Report is 20 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/kanban/kanbanDb.ts	0.00%	251 Missing ⚠️
...ering-util/rendering-elements/shapes/kanbanItem.ts	0.00%	148 Missing ⚠️
.../src/rendering-util/rendering-elements/clusters.js	0.00%	112 Missing ⚠️
packages/mermaid/src/diagrams/kanban/styles.ts	0.00%	109 Missing ⚠️
...ages/mermaid/src/diagrams/kanban/kanbanRenderer.ts	0.00%	87 Missing ⚠️
...c/rendering-util/rendering-elements/shapes/util.ts	0.00%	57 Missing ⚠️
packages/mermaid/src/diagrams/kanban/detector.ts	0.00%	23 Missing ⚠️
...s/mermaid/src/diagrams/kanban/kanban-definition.ts	0.00%	13 Missing ⚠️
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00%	2 Missing ⚠️
...id/src/rendering-util/rendering-elements/shapes.ts	0.00%	2 Missing ⚠️
... and 2 more

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5999      +/-   ##
==========================================
- Coverage     4.63%   4.56%   -0.07%     
==========================================
  Files          374     380       +6     
  Lines        52215   53015     +800     
  Branches       613     619       +6     
==========================================
  Hits          2422    2422              
- Misses       49793   50593     +800     

Flag	Coverage Δ
unit	4.56% <0.00%> (-0.07%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
.build/jsonSchema.ts	0.00% <0.00%> (ø)
packages/mermaid/src/docs/.vitepress/config.ts	0.00% <0.00%> (ø)
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00% <0.00%> (ø)
...id/src/rendering-util/rendering-elements/shapes.ts	0.00% <0.00%> (ø)
...s/mermaid/src/diagrams/kanban/kanban-definition.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/kanban/detector.ts	0.00% <0.00%> (ø)
...c/rendering-util/rendering-elements/shapes/util.ts	0.00% <0.00%> (ø)
...ages/mermaid/src/diagrams/kanban/kanbanRenderer.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/kanban/styles.ts	0.00% <0.00%> (ø)
.../src/rendering-util/rendering-elements/clusters.js	0.00% <0.00%> (ø)
... and 2 more

[ashishjain0512]

LGTM