marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-01 14:46:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

#5342 Handing of wide section texts

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-10-28 11:43:56 +01:00
parent 742ad7c130
commit 948ec4d1ce
4 changed files with 69 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
docs/syntax/kanban.md
View File

@@ -69,7 +69,7 @@ You can include additional metadata for each task using the @{ ... } syntax. Met
``` ```
• assigned: Specifies who is responsible for the task. • assigned: Specifies who is responsible for the task.
• ticket: Links the task to a ticket or issue number. • 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 ```mermaid-example
@@ -109,21 +109,23 @@ config:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#' ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
--- ---
kanban kanban
id1[Todo] Todo
docs[Create Documentation] [Create Documentation]
blog[Write Blog Post About New Diagram] docs[Create Blog about the new diagram]
id7[In Progress] [In progress]
renderer[Develop Universal Renderer] 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.]
grammar[Design Grammar]@{ assigned: 'knsv' } id9[Ready for deploy]
id9[Ready for Deploy] id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for Test] 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] id11[Done]
getData[Define getData Function] id5[define getData]
longTitle[Handle Long Diagram Titles]@{ ticket: MC-2036, priority: 'Very High' } id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
dbUpdate[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' } id3[Update DB 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]
id12[Can't Reproduce] id3[Weird flickering in Firefox]
``` ```
```mermaid ```mermaid
@@ -133,21 +135,23 @@ config:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#' ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
--- ---
kanban kanban
id1[Todo] Todo
docs[Create Documentation] [Create Documentation]
blog[Write Blog Post About New Diagram] docs[Create Blog about the new diagram]
id7[In Progress] [In progress]
renderer[Develop Universal Renderer] 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.]
grammar[Design Grammar]@{ assigned: 'knsv' } id9[Ready for deploy]
id9[Ready for Deploy] id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for Test] 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] id11[Done]
getData[Define getData Function] id5[define getData]
longTitle[Handle Long Diagram Titles]@{ ticket: MC-2036, priority: 'Very High' } id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
dbUpdate[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' } id3[Update DB 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]
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. 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.

25
packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts
View File

@@ -9,7 +9,7 @@ import { insertCluster } from '../../rendering-util/rendering-elements/clusters.
import { insertNode, positionNode } from '../../rendering-util/rendering-elements/nodes.js'; import { insertNode, positionNode } from '../../rendering-util/rendering-elements/nodes.js';
export const draw: DrawDefinition = async (text, id, _version, diagObj) => { 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 db = diagObj.db as KanbanDB;
const data4Layout = db.getData(); const data4Layout = db.getData();
@@ -31,10 +31,12 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
// TODO set padding // TODO set padding
const padding = 10; const padding = 10;
const sectionObjects = [];
let maxLabelHeight = 25;
for (const section of sections) { for (const section of sections) {
const WIDTH = conf?.kanban?.sectionWidth || 200; const WIDTH = conf?.kanban?.sectionWidth || 200;
const top = (-WIDTH * 3) / 2 + 25; // const top = (-WIDTH * 3) / 2 + 25;
let y = top; // let y = top;
cnt = cnt + 1; cnt = cnt + 1;
section.x = WIDTH * cnt + ((cnt - 1) * padding) / 2; section.x = WIDTH * cnt + ((cnt - 1) * padding) / 2;
section.width = WIDTH; section.width = WIDTH;
@@ -46,8 +48,17 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
// Todo, use theme variable THEME_COLOR_LIMIT instead of 10 // Todo, use theme variable THEME_COLOR_LIMIT instead of 10
section.cssClasses = section.cssClasses + ' section-' + cnt; section.cssClasses = section.cssClasses + ' section-' + cnt;
const sectionObj = await insertCluster(sectionsElem, section); 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); const sectionItems = data4Layout.nodes.filter((node) => node.parentId === section.id);
for (const item of sectionItems) { for (const item of sectionItems) {
item.x = section.x; item.x = section.x;
item.width = WIDTH - 1.5 * padding; item.width = WIDTH - 1.5 * padding;
@@ -58,7 +69,7 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
y = item.y + bbox.height / 2 + padding / 2; y = item.y + bbox.height / 2 + padding / 2;
} }
const rect = sectionObj.cluster.select('rect'); 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); rect.attr('height', height);
} }
@@ -66,8 +77,8 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
setupGraphViewbox( setupGraphViewbox(
undefined, undefined,
svg, svg,
conf.mindmap?.padding ?? defaultConfig.mindmap.padding, conf.mindmap?.padding ?? defaultConfig.kanban.padding,
conf.mindmap?.useMaxWidth ?? defaultConfig.mindmap.useMaxWidth conf.mindmap?.useMaxWidth ?? defaultConfig.kanban.useMaxWidth
); );
}; };

32
packages/mermaid/src/docs/syntax/kanban.md
View File

@@ -54,7 +54,7 @@ You can include additional metadata for each task using the @{ ... } syntax. Met
• assigned: Specifies who is responsible for the task. • assigned: Specifies who is responsible for the task.
• ticket: Links the task to a ticket or issue number. • 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 ```mermaid-example
kanban kanban
@@ -87,21 +87,23 @@ config:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#' ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
--- ---
kanban kanban
id1[Todo] Todo
docs[Create Documentation] [Create Documentation]
blog[Write Blog Post About New Diagram] docs[Create Blog about the new diagram]
id7[In Progress] [In progress]
renderer[Develop Universal Renderer] 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.]
grammar[Design Grammar]@{ assigned: 'knsv' } id9[Ready for deploy]
id9[Ready for Deploy] id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for Test] 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] id11[Done]
getData[Define getData Function] id5[define getData]
longTitle[Handle Long Diagram Titles]@{ ticket: MC-2036, priority: 'Very High' } id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
dbUpdate[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' } id3[Update DB 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]
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. 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.

1
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@@ -304,6 +304,7 @@ const kanbanSection = async (parent, node) => {
style: node.labelStyle, style: node.labelStyle,
useHtmlLabels, useHtmlLabels,
isNode: true, isNode: true,
width: node.width,
}); });
// Get the size of the label // Get the size of the label