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

Fixing issues with centering of labels for subgraphs and handling of special characters in html strings

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-04-04 12:49:14 +02:00
parent 1841346ff6
commit 1a56a18f9b
6 changed files with 127 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
cypress/platform/knsv2.html
View File

@@ -57,6 +57,25 @@
</style> </style>
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid">
flowchart RL
subgraph "`one`"
a1 -- l1 --> a2
a1 -- l2 --> a2
end
</pre>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"htmlLabels":false}} }%%
flowchart RL
subgraph "`one`"
a1 -- l1 --> a2
a1 -- l2 --> a2
end
</pre>
<pre id="diagram" class="mermaid">
flowchart
id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
flowchart LR flowchart LR
A[A text that needs to be wrapped wraps to another line] A[A text that needs to be wrapped wraps to another line]
@@ -71,13 +90,18 @@ flowchart LR
way`"] way`"]
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
classDiagram-v2
note "I love this diagram!\nDo you love it?"
</pre
>
<pre id="diagram" class="mermaid2">
mindmap mindmap
root root
Child3(A node with an icon and with a long text that wraps to keep the node size in check) Child3(A node with an icon and with a long text that wraps to keep the node size in check)
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
%%{init: {"theme": "forest"} }%% %%{init: {"theme": "forest"} }%%
mindmap mindmap
id1[**Start2**<br/>end] id1[**Start2**<br/>end]
@@ -88,16 +112,16 @@ mindmap
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
mindmap mindmap
id1[`**Start2** id1["`**Start2**
second line 😎 with long text that is wrapping to the next line`] second line 😎 with long text that is wrapping to the next line`"]
id2[`Child **with bold** text`] id2["`Child **with bold** text`"]
id3[`Children of which some id3["`Children of which some
is using *italic type of* text`] is using *italic type of* text`"]
id4[Child] id4[Child]
id5[`Child id5["`Child
Row Row
and another and another
`] `"]
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
mindmap mindmap
@@ -108,7 +132,7 @@ mindmap
शान्तिः سلام 和平 `"] शान्तिः سلام 和平 `"]
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TB flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid %% I could not figure out how to use double quotes in labels in Mermaid
@@ -124,7 +148,7 @@ flowchart TB
rom --> core2 rom --> core2
end end
subgraph amd[AMD Latte GPU] subgraph amd["`**AMD** Latte GPU`"]
mem[Memory & I/O Bridge] mem[Memory & I/O Bridge]
dram[DRAM Controller] dram[DRAM Controller]
edram[32 MB EDRAM MEM1] edram[32 MB EDRAM MEM1]
@@ -163,8 +187,64 @@ flowchart TB
rtc{{rtc}} rtc{{rtc}}
</pre </pre
> >
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
core0[IBM PowerPC Broadway Core 0]
core1[IBM PowerPC Broadway Core 1]
core2[IBM PowerPC Broadway Core 2]
rom[16 KB ROM]
core0 --- core2
rom --> core2
end
subgraph amd["`**AMD** Latte GPU`"]
mem[Memory & I/O Bridge]
dram[DRAM Controller]
edram[32 MB EDRAM MEM1]
rom[512 B SEEPROM]
sata[SATA IF]
exi[EXI]
subgraph gx[GX]
sram[3 MB 1T-SRAM]
end
radeon[AMD Radeon R7xx GX2]
mem --- gx
mem --- radeon
rom --- mem
mem --- sata
mem --- exi
dram --- sata
dram --- exi
end
ddr3[2 GB DDR3 RAM MEM2]
mem --- ddr3
dram --- ddr3
edram --- ddr3
core1 --- mem
exi --- rtc
rtc{{rtc}}
</pre
>
<br /> <br />
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
flowchart TB flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid %% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU] subgraph ibm[IBM Espresso CPU]
@@ -220,7 +300,7 @@ flowchart TB
> >
<br /> <br />
&nbsp; &nbsp;
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
flowchart LR flowchart LR
B1 --be be--x B2 B1 --be be--x B2
B1 --bo bo--o B3 B1 --bo bo--o B3
@@ -311,7 +391,7 @@ mindmap
flowchart: { flowchart: {
// defaultRenderer: 'elk', // defaultRenderer: 'elk',
useMaxWidth: false, useMaxWidth: false,
htmlLabels: false, htmlLabels: true,
// htmlLabels: true, // htmlLabels: true,
}, },
// htmlLabels: true, // htmlLabels: true,

19
packages/mermaid/src/dagre-wrapper/clusters.js
View File

@@ -63,13 +63,20 @@ const rect = (parent, node) => {
.attr('width', width) .attr('width', width)
.attr('height', node.height + padding); .attr('height', node.height + padding);
if (useHtmlLabels) {
label.attr(
'transform',
// This puts the labal on top of the box instead of inside it
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
);
} else {
label.attr(
'transform',
// This puts the labal on top of the box instead of inside it
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
);
}
// Center the label // Center the label
label.attr(
'transform',
// This puts the labal on top of the box instead of inside it
// 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
);
const rectBox = rect.node().getBBox(); const rectBox = rect.node().getBBox();
node.width = rectBox.width; node.width = rectBox.width;

2
packages/mermaid/src/dagre-wrapper/shapes/note.js
View File

@@ -12,7 +12,7 @@ const note = (parent, node) => {
rect rect
.attr('rx', node.rx) .attr('rx', node.rx)
.attr('ry', node.ry) .attr('ry', node.ry)
.attr('x', -bbox.width / 2 - halfPadding) .attr('x', -halfPadding)
.attr('y', -bbox.height / 2 - halfPadding) .attr('y', -bbox.height / 2 - halfPadding)
.attr('width', bbox.width + node.padding) .attr('width', bbox.width + node.padding)
.attr('height', bbox.height + node.padding); .attr('height', bbox.height + node.padding);

5
packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
View File

@@ -934,9 +934,12 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
.attr('width', node.width) .attr('width', node.width)
.attr('height', node.height); .attr('height', node.height);
const label = subgraphEl.insert('g').attr('class', 'label'); const label = subgraphEl.insert('g').attr('class', 'label');
const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
label.attr( label.attr(
'transform', 'transform',
`translate(${node.labels[0].x + relX + node.x}, ${node.labels[0].y + relY + node.y})` `translate(${node.labels[0].x + relX + node.x + labelCentering}, ${
node.labels[0].y + relY + node.y + 3
})`
); );
label.node().appendChild(node.labelData.labelNode); label.node().appendChild(node.labelData.labelNode);

34
packages/mermaid/src/rendering-util/createText.js
View File

@@ -152,26 +152,8 @@ function updateTextContentAndStyles(tspan, wrappedLine) {
.attr('font-style', word.type === 'em' ? 'italic' : 'normal') .attr('font-style', word.type === 'em' ? 'italic' : 'normal')
.attr('class', 'text-inner-tspan') .attr('class', 'text-inner-tspan')
.attr('font-weight', word.type === 'strong' ? 'bold' : 'normal'); .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
const special = [ const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
'<', if (index === 0) {
'>',
'&',
'"',
"'",
'.',
',',
':',
';',
'!',
'?',
'(',
')',
'[',
']',
'{',
'}',
];
if (index !== 0 && special.includes(word.content)) {
innerTspan.text(word.content); innerTspan.text(word.content);
} else { } else {
innerTspan.text(' ' + word.content); innerTspan.text(' ' + word.content);
@@ -225,7 +207,17 @@ export const createText = (
return vertexNode; return vertexNode;
} else { } else {
const structuredText = markdownToLines(text); const structuredText = markdownToLines(text);
const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
let lastWord;
structuredText.forEach((line) => {
line.forEach((word) => {
if (special.includes(word.content) && lastWord) {
lastWord.content += word.content;
word.content = '';
}
lastWord = word;
});
});
const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground); const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground);
return svgLabel; return svgLabel;
} }

2
packages/mermaid/src/rendering-util/handle-markdown-text.js
View File

@@ -38,6 +38,8 @@ export function markdownToLines(markdown) {
currentLine++; currentLine++;
lines.push([]); lines.push([]);
} }
// textLine.split(/ (?=[^!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]+)/).forEach((word) => {
textLine.split(' ').forEach((word) => { textLine.split(' ').forEach((word) => {
if (word) { if (word) {
lines[currentLine].push({ content: word, type: parentType || 'normal' }); lines[currentLine].push({ content: word, type: parentType || 'normal' });