diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 835402752..837063bcb 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -4,7 +4,7 @@
- block-beta
- blockArrowId<["Label"]>(right)
- blockArrowId2<["Label"]>(left)
- blockArrowId3<["Label"]>(up)
- blockArrowId4<["Label"]>(down)
- blockArrowId5<["Label"]>(x)
- blockArrowId6<["Label"]>(y)
- blockArrowId6<["Label"]>(x, down)
-
-
-block-beta
- block:e:4
- columns 2
- f
- g
- end
+stateDiagram
+ State1: The state with a note
+ note right of State1
+ Important information! You can write
+ notes.
+ end note
+
+
+stateDiagram-v2
+ [*] --> Active
-
-
-block-beta
- block:e:4
- columns 2
- f
- g
- h
- end
-
-
-
-block-beta
- columns 4
- a b c d
- block:e:4
- columns 2
- f
- g
- h
- end
- i:4
+ state Active {
+ [*] --> NumLockOff
+ NumLockOff --> NumLockOn : EvNumLockPressed
+ NumLockOn --> NumLockOff : EvNumLockPressed
+ --
+ [*] --> CapsLockOff
+ CapsLockOff --> CapsLockOn : EvCapsLockPressed
+ CapsLockOn --> CapsLockOff : EvCapsLockPressed
+ --
+ [*] --> ScrollLockOff
+ ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+ ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+ }
+
+
+stateDiagram-v2
+ state ProActive {
+ state Active {
+ Chimp --> A
+ Chimp --> B
+ Chimp --> C
+ }
+ }
+
+
+---
+ handdrawn: false
+---
+stateDiagram-v2
+ state First {
+second
+ }
+
+
+stateDiagram-v2
+ [*] --> First
+ state First {
+ [*] --> second
+ second --> [*]
+ }
+
+
+ stateDiagram-v2
+ state fork_state <>
+ [*] --> fork_state
+ fork_state --> State2
+ fork_state --> State3
state join_state <>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
+
+
+ flowchart TB
+ A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 --> C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+
+
+flowchart
+Node1:::class1 --> Node2:::class2
+Node1:::class1 --> Node3:::class2
+Node3 --> Node4((I am a circle)):::larger
+
+classDef class1 fill:lightblue
+classDef class2 fill:pink
+classDef larger font-size:30px,fill:yellow
-flowchart LR
- X-- "y" -->z
-
-
-block-beta
-columns 5
- A space B
- A --x B
-
-
-block-beta
-columns 3
- a["A wide one"] b:2 c:2 d
-
-
-block-beta
- block:e
- f
- end
-
-
-block-beta
- columns 3
- a:3
- block:e:3
- f
- end
- g
-
-
-block-beta
- columns 3
- a:3
- block:e:3
- f
- g
- end
- h
- i
- j
-
-
-
-block-beta
-columns 3
- a b:2
- block:e:3
- f
- end
- g h i
-
-
-block-beta
-columns 3
- a b c
- e:3
- f g h
-
-
-block-beta
-columns 1
- db(("DB"))
- blockArrowId6<[" "]>(down)
- block:ID
- A
- B["A wide one in the middle"]
- C
- end
- space
- D
- ID --> D
- C --> D
- style B fill:#f9F,stroke:#333,stroke-width:4px
-
-
-block-beta
- columns 5
- A1:3
- A2:1
- A3
- B1 B2 B3:3
-
-
-block-beta
- block
- D
- E
- end
- db("This is the text in the box")
-
-
-block-beta
-
- block
- D
- end
- A["A: I am a wide one"]
-
-
-block-beta
- A["square"]
- B("rounded")
- C(("circle"))
-
-
-block-beta
- A>"rect_left_inv_arrow"]
- B{"diamond"}
- C{{"hexagon"}}
-
-
-block-beta
- A(["stadium"])
-
-
-block-beta
- %% A[["subroutine"]]
- %% B[("cylinder")]
- C>"surprise"]
-
-
-block-beta
- A[/"lean right"/]
- B[\"lean left"\]
- C[/"trapezoid"\]
- D[\"trapezoid"/]
-
-
-
-flowchart
- B
- style B fill:#f9F,stroke:#333,stroke-width:4px
-
-
-
- flowchart LR
- a1 -- apa --> b1
-
-
+stateDiagram-v2
+ [*] --> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
flowchart RL
- subgraph "`one`"
- id
- end
+ subgraph "`one`"
+ a1 -- l1 --> a2
+ a1 -- l2 --> a2
+ end
flowchart RL
@@ -615,8 +517,17 @@ mindmap
// useMaxWidth: false,
// });
mermaid.initialize({
- theme: 'dark',
- startOnLoad: true,
+ handdrawn: true,
+ layout: 'elk',
+ flowchart: { titleTopMargin: 10 },
+ // fontFamily: 'Caveat',
+ fontFamily: 'Kalam',
+ sequence: {
+ actorFontFamily: 'courier',
+ noteFontFamily: 'courier',
+ messageFontFamily: 'courier',
+ },
+ fontSize: 16,
logLevel: 0,
});
function callback() {
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index c45b488aa..85f36e6a8 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);
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 b4fda2683..4d10498fe 100644
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -42,6 +42,8 @@ interface Node {
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