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

Merge branch 'develop' into renovate/patch-all-patch

Browse Source 
* develop: (97 commits)
  chore: Update actions/cache
  chore: Update actions/cache
  fix: CodeQL double escape warning
  chore(deps): update eslint
  Added changeset.
  refactor: handle StateDB `.extract()` properly
  chore(deps): update dependency esbuild to ^0.25.0 [security]
  Update .changeset/grumpy-cheetahs-deliver.md
  chore: Use RUN_VISUAL_TEST in cypress config
  chore: Use argos tokenless auth
  chore: Add tokenless auth to argos
  fix(deps): update dependency dompurify to v3.2.4 [security]
  chore: Update argos token
  Ignore huehive
  chore: Run argos on all PRs, except renovate bot's
  chore: Fix exclude
  [autofix.ci] apply automated fixes
  chore(deps): update dependency vitest to v1.6.1 [security]
  docs: Cleanup minor issues
  Add files via upload
  ...
This commit is contained in:
Sidharth Vinod
2025-02-19 00:08:50 +05:30
parent f7c91a72cb c688c387a0
commit 6eb56b9363
90 changed files with 5063 additions and 4411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
cypress/helpers/util.ts
View File

@@ -132,3 +132,10 @@ export const verifyScreenshot = (name: string): void => {
cy.matchImageSnapshot(name);
}
};
export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
expect(value).to.be.within(
expected * (1 - deltaPercent / 100),
expected * (1 + deltaPercent / 100)
);
};

12
cypress/integration/rendering/flowchart-elk.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';
describe('Flowchart ELK', () => {
it('1-elk: should render a simple flowchart', () => {
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
verifyNumber(maxWidthValue, 380);
});
});
it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(230 * 0.95, 230 * 1.05);
verifyNumber(width, 380);
expect(svg).to.not.have.attr('style');
});
});
@@ -692,7 +692,7 @@ A --> B
{}
);
cy.get('svg').should((svg) => {
const edges = svg.querySelectorAll('.edges > path');
const edges = svg[0].querySelectorAll('.edges > path');
edges.forEach((edge) => {
expect(edge).to.have.class('flowchart-link');
});
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Wrapping long text with a new line', () => {
it.skip('Wrapping long text with a new line', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
@@ -841,7 +841,7 @@ end
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Sub graphs and markdown strings', () => {
it('Sub graphs', () => {
imgSnapshotTest(
`---
config:

37
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -1076,4 +1076,41 @@ end
);
});
});
describe('New @ sytax for node metadata edge cases', () => {
it('should be possible to use @ syntax to add labels on multi nodes', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
`,
{}
);
});
it('should be possible to use @ syntax to add labels with trail spaces and &', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
`,
{}
);
});
it('should be possible to use @ syntax to add labels with trail spaces', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"]
n4@{ label: "labe for n4"}
n5@{ label: "labe for n5"}
`,
{}
);
});
it('should be possible to use @ syntax to add labels with trail spaces and edge/link', () => {
imgSnapshotTest(
`flowchart TD
A["A"] --> B["for B"] & C@{ label: "for c"} & E@{label : "for E"}
D@{label: "for D"}
`,
{}
);
});
});
});

26
cypress/platform/knsv2.html
View File

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

63
cypress/platform/saurabh.html
View File

@@ -62,56 +62,23 @@
<body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid">
flowchart LR
A@{ icon: "fa:window-minimize", form: circle }
E@{ icon: "fa:window-minimize", form: circle }
B@{ icon: "fa:bell", form: circle }
B2@{ icon: "fa:bell", form: circle }
C@{ icon: "fa:address-book", form: square }
D@{ icon: "fa:star-half", form: square }
A --> E
B --> B2
flowchart
A --> A
subgraph B
B1 --> B1
end
subgraph C
subgraph C1
C2 --> C2
subgraph D
D1 --> D1
end
D --> D
end
C1 --> C1
end
</pre>
<pre id="diagram4" class="mermaid2">
flowchart TB
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
B2 --test--> C
D --> B2 --> E
style B2 fill:#f9f,stroke:#333,stroke-width:4px
</pre
>
<pre id="diagram43" class="mermaid2">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
B2 --test--> C
D --> B2 --> E
</pre
>
<pre id="diagram4" class="mermaid2">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
B2 --test--> C
</pre
>
<pre id="diagram43" class="mermaid2">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
B2 --test--> C
</pre
>
<pre id="diagram6" class="mermaid2">
flowchart TB
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
</pre
>
<pre id="diagram6" class="mermaid2">
flowchart TB
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
D --> B2 --> E
</pre
>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import layouts from './mermaid-layout-elk.esm.mjs';