marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-16 06:49:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into Refactor/fix-styles

Browse Source
This commit is contained in:
Saurabh Gore
2025-01-21 20:10:43 +05:30
committed by GitHub
parent ee6fb83265 84b03f3a08
commit 28d7ec092c
4 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/chatty-elephants-warn.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
Fix for issue #6195 - allowing @ signs inside node labels

26
cypress/platform/knsv2.html
View File

@@ -78,9 +78,11 @@
font-family: monospace; font-family: monospace;
font-size: 72px; font-size: 72px;
} }
pre { pre {
width: 100%; width: 100%;
} }
/* tspan { /* tspan {
font-size: 6px !important; font-size: 6px !important;
} */ } */
@@ -103,16 +105,20 @@
</head> </head>
<body> <body>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
A --> B AB["apa@apa@"] --> B(("`apa@apa`"))
</pre>
<pre id="diagram4" class="mermaid">
flowchart
D(("for D"))
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
A e1@==> B A e1@==> B
e1@{ animate: true} e1@{ animate: true}
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
A e1@--> B A e1@--> B
classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
@@ -126,7 +132,7 @@ flowchart LR
class e1 animate class e1 animate
</pre> </pre>
<h2>Mermaid - edge-animation-slow</h2> <h2>Mermaid - edge-animation-slow</h2>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@--> B A e1@--> B
e1@{ animation: fast} e1@{ animation: fast}
@@ -428,7 +434,10 @@ kanban
window.callback = function () { window.callback = function () {
alert('A callback was triggered'); alert('A callback was triggered');
}; };
mermaid.initialize({ function callback() {
alert('It worked');
}
await mermaid.initialize({
// theme: 'base', // theme: 'base',
// theme: 'default', // theme: 'default',
// theme: 'forest', // theme: 'forest',
@@ -440,9 +449,11 @@ kanban
// layout: 'fixed', // layout: 'fixed',
// htmlLabels: false, // htmlLabels: false,
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
// fontFamily: 'Kalam', // fontFamily: 'Kalam',
// fontFamily: 'courier', // fontFamily: 'courier',
fontFamily: 'arial',
sequence: { sequence: {
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: 'courier', noteFontFamily: 'courier',
@@ -454,10 +465,9 @@ kanban
fontSize: 12, fontSize: 12,
logLevel: 0, logLevel: 0,
securityLevel: 'loose', securityLevel: 'loose',
callback,
}); });
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
console.error('In parse error:'); console.error('In parse error:');
console.error(err); console.error(err);

26
packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
View File

@@ -317,6 +317,32 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[3].label).toEqual('for E'); expect(data4Layout.nodes[3].label).toEqual('for E');
expect(data4Layout.nodes[4].label).toEqual('for D'); expect(data4Layout.nodes[4].label).toEqual('for D');
}); });
it('should be possible to use @ syntax in labels', function () {
const res = flow.parser.parse(`flowchart TD
A["@A@"] --> B["@for@ B@"] & C@{ label: "@for@ c@"} & E{"\`@for@ E@\`"} & D(("@for@ D@"))
H1{{"@for@ H@"}}
H2{{"\`@for@ H@\`"}}
Q1{"@for@ Q@"}
Q2{"\`@for@ Q@\`"}
AS1>"@for@ AS@"]
AS2>"\`@for@ AS@\`"]
`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(11);
expect(data4Layout.nodes[0].label).toEqual('@A@');
expect(data4Layout.nodes[1].label).toEqual('@for@ B@');
expect(data4Layout.nodes[2].label).toEqual('@for@ c@');
expect(data4Layout.nodes[3].label).toEqual('@for@ E@');
expect(data4Layout.nodes[4].label).toEqual('@for@ D@');
expect(data4Layout.nodes[5].label).toEqual('@for@ H@');
expect(data4Layout.nodes[6].label).toEqual('@for@ H@');
expect(data4Layout.nodes[7].label).toEqual('@for@ Q@');
expect(data4Layout.nodes[8].label).toEqual('@for@ Q@');
expect(data4Layout.nodes[9].label).toEqual('@for@ AS@');
expect(data4Layout.nodes[10].label).toEqual('@for@ AS@');
});
it.skip(' should be possible to use @ syntax to add labels with trail spaces', function () { it.skip(' should be possible to use @ syntax to add labels with trail spaces', function () {
const res = flow.parser.parse( const res = flow.parser.parse(
`flowchart TB `flowchart TB

2
packages/mermaid/src/diagrams/flowchart/parser/flow.jison
View File

@@ -141,7 +141,7 @@ that id.
.*direction\s+RL[^\n]* return 'direction_rl'; .*direction\s+RL[^\n]* return 'direction_rl';
.*direction\s+LR[^\n]* return 'direction_lr'; .*direction\s+LR[^\n]* return 'direction_lr';
[^\s]+\@(?=[^\{]) { return 'LINK_ID'; } [^\s\"]+\@(?=[^\{\"]) { return 'LINK_ID'; }
[0-9]+ return 'NUM'; [0-9]+ return 'NUM';
\# return 'BRKT'; \# return 'BRKT';
":::" return 'STYLE_SEPARATOR'; ":::" return 'STYLE_SEPARATOR';