diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 5eaadffc49..49fe075c32 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,6 +58,15 @@
+stateDiagram-v2
+ [*] --> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+
flowchart RL
subgraph "`one`"
a1 -- l1 --> a2
@@ -65,14 +74,13 @@
end
- %%{init: {"flowchart": {"htmlLabels":false}} }%%
flowchart RL
subgraph "`one`"
a1 -- l1 --> a2
a1 -- l2 --> a2
end
-
+
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`"]
@@ -90,10 +98,17 @@
way`"]
-
+
classDiagram-v2
note "I love this diagram!\nDo you love it?"
-
+
+ stateDiagram-v2
+ State1: The state with a note with minus - and plus + in it
+ note left of State1
+ Important information! You can write
+ notes with . and in them.
+ end note
mindmap
@@ -187,7 +202,7 @@
rtc{{rtc}}
-
+
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
@@ -244,7 +259,7 @@
>
-
+
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
@@ -300,7 +315,7 @@
>
-
+
flowchart LR
B1 --be be--x B2
B1 --bo bo--o B3
@@ -391,10 +406,10 @@
flowchart: {
// defaultRenderer: 'elk',
useMaxWidth: false,
+ // htmlLabels: false,
htmlLabels: true,
- // htmlLabels: true,
},
- // htmlLabels: true,
+ // htmlLabels: false,
gantt: {
useMaxWidth: false,
},
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/note.js b/packages/mermaid/src/dagre-wrapper/shapes/note.js
index c7ebb6c223..a39450d547 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/note.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/note.js
@@ -1,8 +1,13 @@
import { updateNodeBounds, labelHelper } from './util';
import { log } from '../../logger';
+import { getConfig } from '../../config';
import intersect from '../intersect/index.js';
const note = (parent, node) => {
+ const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
+ if (!useHtmlLabels) {
+ node.centerLabel = true;
+ }
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
log.info('Classes = ', node.classes);
@@ -12,7 +17,7 @@ const note = (parent, node) => {
rect
.attr('rx', node.rx)
.attr('ry', node.ry)
- .attr('x', -halfPadding)
+ .attr('x', -bbox.width / 2 - halfPadding)
.attr('y', -bbox.height / 2 - halfPadding)
.attr('width', bbox.width + node.padding)
.attr('height', bbox.height + node.padding);
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index b5de2bd6b4..1eeeebb723 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -6,6 +6,7 @@ import { select } from 'd3';
import { evaluate, sanitizeText } from '../../diagrams/common/common';
export const labelHelper = (parent, node, _classes, isNode) => {
let classes;
+ const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
if (!_classes) {
classes = 'node default';
} else {
@@ -33,7 +34,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
if (node.labelType === 'markdown') {
// text = textNode;
text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
- useHtmlLabels: getConfig().flowchart.htmlLabels,
+ useHtmlLabels,
width: node.width || getConfig().flowchart.wrappingWidth,
classes: 'markdown-node-label',
});
@@ -62,11 +63,14 @@ export const labelHelper = (parent, node, _classes, isNode) => {
const halfPadding = node.padding / 2;
// Center the label
- if (getConfig().flowchart.htmlLabels) {
+ if (useHtmlLabels) {
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
} else {
label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
}
+ if (node.centerLabel) {
+ label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+ }
label.insert('rect', ':first-child');
return { shapeSvg, bbox, halfPadding, label };
};
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 8629f74db4..c2b1a9b6d7 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -232,6 +232,9 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
type: newNode.type,
padding: 15, //getConfig().flowchart.padding
};
+ // if (useHtmlLabels) {
+ nodeData.centerLabel = true;
+ // }
if (parsedItem.note) {
// Todo: set random id
@@ -240,6 +243,7 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
shape: SHAPE_NOTE,
labelText: parsedItem.note.text,
classes: CSS_DIAGRAM_NOTE,
+ // useHtmlLabels: false,
style: '', // styles.style,
id: itemId + NOTE_ID + '-' + graphItemCount,
domId: stateDomId(itemId, graphItemCount, NOTE),