diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 856f58d0c..63fffdd35 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -4,7 +4,7 @@
body {
/* background: rgb(221, 208, 208); */
- /* background: #333; */
+ /* background:#333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 {
color: grey;
}
- .mermaid {
- border: 1px solid #ddd;
- margin: 10px;
- }
.mermaid2 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
- /* background-color: #efefef; */
- /* background-color: #333; */
- /* background-image: radial-gradient(#333 51%, transparent 91%), */
- radial-gradient(#333 51%, transparent 91%);
+
+ background-color: #efefef;
+ background-image: radial-gradient(#fff 51%, transparent 91%),
+ radial-gradient(#fff 51%, transparent 91%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-repeat: repeat;
- border: 2px solid rgb(131, 142, 205);
}
.malware {
position: fixed;
@@ -73,8 +68,8 @@
font-size: 72px;
}
/* tspan {
- font-size: 6px !important;
- } */
+ font-size: 6px !important;
+ } */
@@ -165,9 +160,10 @@ flowchart
flowchart RL
- subgraph "`one`"
- id
- end
+ subgraph "`one`"
+ a1 -- l1 --> a2
+ a1 -- l2 --> a2
+ end
flowchart RL
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index f600f4ecb..b33dfa1ef 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -45,6 +45,7 @@ import {
PARENT_ID,
NOTE,
PARENT,
+ CSS_EDGE_NOTE_EDGE,
} from './stateCommon.js';
import { node } from 'stylis';
@@ -704,7 +705,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
//add parent id to groupData
groupData.id = parentNodeId;
//add parent id to noteData
- noteData.parentId = parentId;
+ noteData.parentId = parentNodeId;
//insert groupData
insertOrUpdateNode(nodes, groupData);
@@ -754,6 +755,9 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
* @param nodeData
*/
function insertOrUpdateNode(nodes, nodeData) {
+ if (!nodeData.id || nodeData.id === '') {
+ return;
+ }
const existingNodeData = nodes.find((node) => node.id === nodeData.id);
if (existingNodeData) {
//update the existing nodeData
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 008c650c3..4072d717d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -4,6 +4,7 @@ import { stateStart } from './shapes/stateStart.ts';
import { stateEnd } from './shapes/stateEnd.ts';
import { forkJoin } from './shapes/forkJoin.ts';
import { choice } from './shapes/choice.ts';
+import {note} from './shapes/note.ts';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
const formatClass = (str) => {
@@ -20,6 +21,7 @@ const shapes = {
fork: forkJoin,
join: forkJoin,
choice,
+ note,
};
let nodeElems = {};
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
new file mode 100644
index 000000000..5acc86c86
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -0,0 +1,37 @@
+import { log } from '$root/logger.js';
+import { labelHelper, updateNodeBounds } from './util.js';
+import intersect from '../intersect/index.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+
+export const note = async (parent: SVGAElement, node: Node) => {
+ const useHtmlLabels = node.useHtmlLabels ;
+ if (!useHtmlLabels) {
+ node.centerLabel = true;
+ }
+ const { shapeSvg, bbox, halfPadding } = await labelHelper(
+ parent,
+ node,
+ 'node ' + node.classes,
+ true
+ );
+
+ log.info('Classes = ', node.classes);
+ // add the rect
+ const rect = shapeSvg.insert('rect', ':first-child');
+
+ rect
+ .attr('rx', node.rx)
+ .attr('ry', node.ry)
+ .attr('x', -bbox.width / 2 - halfPadding)
+ .attr('y', -bbox.height / 2 - halfPadding)
+ .attr('width', bbox.width + node.padding)
+ .attr('height', bbox.height + node.padding);
+
+ updateNodeBounds(node, rect);
+
+ node.intersect = function (point) {
+ return intersect.rect(node, point);
+ };
+
+ return shapeSvg;
+};
diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts
index 156936845..4d10498fe 100644
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -13,13 +13,15 @@ interface Node {
label?: string;
parentId?: string;
position?: string;
- styles?: string;
- classes?: string;
+ styles?: string; // Pick one, don't need both `styles` & `style`, or have (nodeStyle + labelStyle)
+ style?: string;
+ classes?: string; // Pick one `classes` vs `class`
+ class?: string;
// Flowchart specific properties
- labelType?: string;
+ labelType?: string; // Always use markdown string?
domId: string;
// Rendering specific properties for both Flowchart and State Diagram nodes
- dir?: string;
+ dir?: string; // Only relevant for isGroup true, i.e. a sub-graph or composite state.
haveCallback?: boolean;
labelStyle?: string;
labelText?: string;
@@ -31,16 +33,17 @@ interface Node {
ry?: number;
shape?: string;
tooltip?: string;
- type: string;
+ type: string; // replace with isGroup: boolean, default false
width?: number;
height?: number;
// Specific properties for State Diagram nodes TODO remove and use generic properties
intersect?: (point: any) => any;
- style?: string;
- class?: string;
- borders?: string;
+
+ borders?: string; //Maybe have it similar to nodeStyle, labelStyle, have it as borderStyle (check the usage)
useRough?: boolean;
+ useHtmlLabels?: boolean;
+ centerLabel?: boolean;
}
// Common properties for any edge in the system