GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

#5237 add support for note shape

Browse Source
This commit is contained in:
Ashish Jain 2024-05-08 11:10:05 +02:00
parent fbe13f4e9e
commit 683695bec2
5 changed files with 147 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
cypress/platform/knsv2.html
View File

@ -4,7 +4,7 @@
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/> />
<link <link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@ -32,30 +32,24 @@
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
background: #333; /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { h1 {
color: grey; color: grey;
} }
.mermaid {
border: 1px solid #ddd;
margin: 10px;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.mermaid svg { .mermaid svg {
/* font-size: 18px !important; */ /* font-size: 18px !important; */
/* background-color: #efefef; */ background-color: #efefef;
background-color: #333; background-image: radial-gradient(#fff 51%, transparent 91%),
background-image: radial-gradient(#333 51%, transparent 91%), radial-gradient(#fff 51%, transparent 91%);
radial-gradient(#333 51%, transparent 91%);
background-size: 20px 20px; background-size: 20px 20px;
background-position: 0 0, 10px 10px; background-position: 0 0, 10px 10px;
background-repeat: repeat; background-repeat: repeat;
border: 2px solid rgb(131, 142, 205);
} }
.malware { .malware {
position: fixed; position: fixed;
@ -79,198 +73,106 @@
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta stateDiagram
blockArrowId<["Label"]>(right) State1: The state with a note
blockArrowId2<["Label"]>(left) note right of State1
blockArrowId3<["Label"]>(up) Important information! You can write
blockArrowId4<["Label"]>(down) notes.
blockArrowId5<["Label"]>(x) end note
blockArrowId6<["Label"]>(y) </pre
blockArrowId6<["Label"]>(x, down) >
</pre> <pre id="diagram" class="mermaid2">
<pre id="diagram" class="mermaid"> stateDiagram-v2
block-beta [*] --> Active
block:e:4
columns 2
f
g
end
</pre> state Active {
<pre id="diagram" class="mermaid"> [*] --> NumLockOff
block-beta NumLockOff --> NumLockOn : EvNumLockPressed
block:e:4 NumLockOn --> NumLockOff : EvNumLockPressed
columns 2 --
f [*] --> CapsLockOff
g CapsLockOff --> CapsLockOn : EvCapsLockPressed
h CapsLockOn --> CapsLockOff : EvCapsLockPressed
end --
[*] --> ScrollLockOff
</pre> ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
<pre id="diagram" class="mermaid"> ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
block-beta }
columns 4 </pre
a b c d >
block:e:4 <pre id="diagram" class="mermaid2">
columns 2 stateDiagram-v2
f state ProActive {
g state Active {
h Chimp --> A
end Chimp --> B
i:4 Chimp --> C
}
}
</pre
>
<pre id="diagram" class="mermaid2">
---
handdrawn: false
---
stateDiagram-v2
state First {
second
}
</pre
>
<pre id="diagram" class="mermaid2">
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
</pre
>
<pre id="diagram" class="mermaid2">
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>> state join_state <<join>>
State2 --> join_state State2 --> join_state
State3 --> join_state State3 --> join_state
join_state --> State4 join_state --> State4
State4 --> [*] State4 --> [*]
</pre>
<pre id="diagram" class="mermaid2">
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
</pre>
<pre id="diagram" class="mermaid2">
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
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
flowchart LR stateDiagram-v2
X-- "y" -->z [*] --> Still
</pre> Still --> [*]
<pre id="diagram" class="mermaid2"> Still --> Moving
block-beta Moving --> Still
columns 5 Moving --> Crash
A space B Crash --> [*] </pre
A --x B >
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 3
a["A wide one"] b:2 c:2 d
</pre>
<pre id="diagram" class="mermaid2">
block-beta
block:e
f
end
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 3
a:3
block:e:3
f
end
g
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 3
a:3
block:e:3
f
g
end
h
i
j
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 3
a b:2
block:e:3
f
end
g h i
</pre>
<pre id="diagram" class="mermaid">
block-beta
columns 3
a b c
e:3
f g h
</pre>
<pre id="diagram" class="mermaid">
block-beta
columns 1
db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(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
</pre>
<pre id="diagram" class="mermaid">
block-beta
columns 5
A1:3
A2:1
A3
B1 B2 B3:3
</pre>
<pre id="diagram" class="mermaid2">
block-beta
block
D
E
end
db("This is the text in the box")
</pre>
<pre id="diagram" class="mermaid2">
block-beta
block
D
end
A["A: I am a wide one"]
</pre>
<pre id="diagram" class="mermaid2">
block-beta
A["square"]
B("rounded")
C(("circle"))
</pre>
<pre id="diagram" class="mermaid2">
block-beta
A>"rect_left_inv_arrow"]
B{"diamond"}
C{{"hexagon"}}
</pre>
<pre id="diagram" class="mermaid2">
block-beta
A(["stadium"])
</pre>
<pre id="diagram" class="mermaid2">
block-beta
%% A[["subroutine"]]
%% B[("cylinder")]
C>"surprise"]
</pre>
<pre id="diagram" class="mermaid2">
block-beta
A[/"lean right"/]
B[\"lean left"\]
C[/"trapezoid"\]
D[\"trapezoid"/]
</pre>
<pre id="diagram" class="mermaid2">
flowchart
B
style B fill:#f9F,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram" class="mermaid2">
flowchart LR
a1 -- apa --> b1
</pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
flowchart RL flowchart RL
subgraph "`one`" subgraph "`one`"
id a1 -- l1 --> a2
end a1 -- l2 --> a2
end
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
flowchart RL flowchart RL
@ -615,8 +517,17 @@ mindmap
// useMaxWidth: false, // useMaxWidth: false,
// }); // });
mermaid.initialize({ mermaid.initialize({
theme: 'dark', handdrawn: true,
startOnLoad: true, layout: 'elk',
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
fontFamily: 'Kalam',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
fontSize: 16,
logLevel: 0, logLevel: 0,
}); });
function callback() { function callback() {

3
packages/mermaid/src/diagrams/state/stateDb.js
View File

@ -45,6 +45,7 @@ import {
PARENT_ID, PARENT_ID,
NOTE, NOTE,
PARENT, PARENT,
CSS_EDGE_NOTE_EDGE,
} from './stateCommon.js'; } from './stateCommon.js';
import { node } from 'stylis'; import { node } from 'stylis';
@ -704,7 +705,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
//add parent id to groupData //add parent id to groupData
groupData.id = parentNodeId; groupData.id = parentNodeId;
//add parent id to noteData //add parent id to noteData
noteData.parentId = parentId; noteData.parentId = parentNodeId;
//insert groupData //insert groupData
insertOrUpdateNode(nodes, groupData); insertOrUpdateNode(nodes, groupData);

2
packages/mermaid/src/rendering-util/rendering-elements/nodes.js
View File

@ -4,6 +4,7 @@ import { stateStart } from './shapes/stateStart.ts';
import { stateEnd } from './shapes/stateEnd.ts'; import { stateEnd } from './shapes/stateEnd.ts';
import { forkJoin } from './shapes/forkJoin.ts'; import { forkJoin } from './shapes/forkJoin.ts';
import { choice } from './shapes/choice.ts'; import { choice } from './shapes/choice.ts';
import {note} from './shapes/note.ts';
import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { getConfig } from '$root/diagram-api/diagramAPI.js';
const formatClass = (str) => { const formatClass = (str) => {
@ -20,6 +21,7 @@ const shapes = {
fork: forkJoin, fork: forkJoin,
join: forkJoin, join: forkJoin,
choice, choice,
note,
}; };
let nodeElems = {}; let nodeElems = {};

37
packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts Normal file
View File

@ -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;
};

2
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@ -42,6 +42,8 @@ interface Node {
borders?: string; //Maybe have it similar to nodeStyle, labelStyle, have it as borderStyle (check the usage) borders?: string; //Maybe have it similar to nodeStyle, labelStyle, have it as borderStyle (check the usage)
useRough?: boolean; useRough?: boolean;
useHtmlLabels?: boolean;
centerLabel?: boolean;
} }
// Common properties for any edge in the system // Common properties for any edge in the system