Skip to content

Commit

Permalink
#5342 Handing of wide section texts
Browse files Browse the repository at this point in the history
  • Loading branch information
@knsv
knsv committed Oct 28, 2024
1 parent 742ad7c commit 948ec4d
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 51 deletions.
62 changes: 33 additions & 29 deletions docs/syntax/kanban.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ You can include additional metadata for each task using the @{ ... } syntax. Met
```
• 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’).
• priority: Indicates the urgency of the task. Allowed values: 'Very High', 'High', 'Low' and 'Very Low'
```

```mermaid-example
Expand Down Expand Up @@ -109,21 +109,23 @@ config:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
id1[Todo]
docs[Create Documentation]
blog[Write Blog Post About New Diagram]
id7[In Progress]
renderer[Develop Universal Renderer]
grammar[Design Grammar]@{ assigned: 'knsv' }
id9[Ready for Deploy]
id10[Ready for Test]
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]
getData[Define getData Function]
longTitle[Handle Long Diagram Titles]@{ ticket: MC-2036, priority: 'Very High' }
dbUpdate[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
parsingTests[Create Parsing Tests]@{ ticket: MC-2038, assigned: 'K. Sveidqvist', priority: 'High' }
lastItem[Finalize Last Item]@{ priority: 'Very Low', assigned: 'knsv' }
id12[Can't Reproduce]
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]
```

```mermaid
Expand All @@ -133,21 +135,23 @@ config:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
id1[Todo]
docs[Create Documentation]
blog[Write Blog Post About New Diagram]
id7[In Progress]
renderer[Develop Universal Renderer]
grammar[Design Grammar]@{ assigned: 'knsv' }
id9[Ready for Deploy]
id10[Ready for Test]
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]
getData[Define getData Function]
longTitle[Handle Long Diagram Titles]@{ ticket: MC-2036, priority: 'Very High' }
dbUpdate[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
parsingTests[Create Parsing Tests]@{ ticket: MC-2038, assigned: 'K. Sveidqvist', priority: 'High' }
lastItem[Finalize Last Item]@{ priority: 'Very Low', assigned: 'knsv' }
id12[Can't Reproduce]
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]
```

In conclusion, creating a Kanban diagram in Mermaid is a straightforward process that effectively visualizes your workflow. Start by using the kanban keyword to initiate the diagram. Define your columns with unique identifiers and titles to represent different stages of your project. Under each column, list your tasks—also with unique identifiers—and provide detailed descriptions as needed. Remember that proper indentation is crucial; tasks must be indented under their parent columns to maintain the correct structure.
Expand Down
25 changes: 18 additions & 7 deletions packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { insertCluster } from '../../rendering-util/rendering-elements/clusters.
import { insertNode, positionNode } from '../../rendering-util/rendering-elements/nodes.js';

export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
log.debug('Rendering mindmap diagram\n' + text);
log.debug('Rendering kanban diagram\n' + text);

const db = diagObj.db as KanbanDB;
const data4Layout = db.getData();
Expand All @@ -31,10 +31,12 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
// TODO set padding
const padding = 10;

const sectionObjects = [];
let maxLabelHeight = 25;
for (const section of sections) {
const WIDTH = conf?.kanban?.sectionWidth || 200;
const top = (-WIDTH * 3) / 2 + 25;
let y = top;
// const top = (-WIDTH * 3) / 2 + 25;
// let y = top;
cnt = cnt + 1;
section.x = WIDTH * cnt + ((cnt - 1) * padding) / 2;
section.width = WIDTH;
Expand All @@ -46,8 +48,17 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
// Todo, use theme variable THEME_COLOR_LIMIT instead of 10
section.cssClasses = section.cssClasses + ' section-' + cnt;
const sectionObj = await insertCluster(sectionsElem, section);
maxLabelHeight = Math.max(maxLabelHeight, sectionObj?.labelBBox?.height);
sectionObjects.push(sectionObj);
}
let i = 0;
for (const section of sections) {
const sectionObj = sectionObjects[i];
i = i + 1;
const WIDTH = conf?.kanban?.sectionWidth || 200;
const top = (-WIDTH * 3) / 2 + maxLabelHeight;
let y = top;
const sectionItems = data4Layout.nodes.filter((node) => node.parentId === section.id);

for (const item of sectionItems) {
item.x = section.x;
item.width = WIDTH - 1.5 * padding;
Expand All @@ -58,16 +69,16 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
y = item.y + bbox.height / 2 + padding / 2;
}
const rect = sectionObj.cluster.select('rect');
const height = Math.max(y - top + 3 * padding, 50);
const height = Math.max(y - top + 3 * padding, 50) + (maxLabelHeight - 25);
rect.attr('height', height);
}

// Setup the view box and size of the svg element
setupGraphViewbox(
undefined,
svg,
conf.mindmap?.padding ?? defaultConfig.mindmap.padding,
conf.mindmap?.useMaxWidth ?? defaultConfig.mindmap.useMaxWidth
conf.mindmap?.padding ?? defaultConfig.kanban.padding,
conf.mindmap?.useMaxWidth ?? defaultConfig.kanban.useMaxWidth
);
};

Expand Down
32 changes: 17 additions & 15 deletions packages/mermaid/src/docs/syntax/kanban.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ You can include additional metadata for each task using the @{ ... } syntax. Met

• 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’).
• priority: Indicates the urgency of the task. Allowed values: 'Very High', 'High', 'Low' and 'Very Low'

```mermaid-example
kanban
Expand Down Expand Up @@ -87,21 +87,23 @@ config:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
id1[Todo]
docs[Create Documentation]
blog[Write Blog Post About New Diagram]
id7[In Progress]
renderer[Develop Universal Renderer]
grammar[Design Grammar]@{ assigned: 'knsv' }
id9[Ready for Deploy]
id10[Ready for Test]
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]
getData[Define getData Function]
longTitle[Handle Long Diagram Titles]@{ ticket: MC-2036, priority: 'Very High' }
dbUpdate[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
parsingTests[Create Parsing Tests]@{ ticket: MC-2038, assigned: 'K. Sveidqvist', priority: 'High' }
lastItem[Finalize Last Item]@{ priority: 'Very Low', assigned: 'knsv' }
id12[Can't Reproduce]
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]
```

In conclusion, creating a Kanban diagram in Mermaid is a straightforward process that effectively visualizes your workflow. Start by using the kanban keyword to initiate the diagram. Define your columns with unique identifiers and titles to represent different stages of your project. Under each column, list your tasks—also with unique identifiers—and provide detailed descriptions as needed. Remember that proper indentation is crucial; tasks must be indented under their parent columns to maintain the correct structure.
Expand Down
1 change: 1 addition & 0 deletions packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,7 @@ const kanbanSection = async (parent, node) => {
style: node.labelStyle,
useHtmlLabels,
isNode: true,
width: node.width,
});

// Get the size of the label
Expand Down

0 comments on commit 948ec4d

Please sign in to comment.