Merge branch 'develop' into sidv/packet-release

* develop: (266 commits)
  chore: update E2E timings
  docs: Update changeset
  fix: Add useful error message to test
  chore: Add treemap example
  chore: Add treemap example
  chore: Add peerDependency to @mermaid-js/examples
  Version Packages
  docs: Update changeset
  update in changeset
  updated validaor and tests to use treemap
  Updated parser to use treemap
  chore: Fail build in CI on type errors
  fix text going outside node
  Version Packages
  Updated phpbb url  to support 403 in lychee
  Updated lychee for working url phpbb.com
  resolve PR comment
  resolve PR comments
  chore: update E2E timings
  add changeset
  ...
This commit is contained in:
Sidharth Vinod
2025-07-10 00:38:41 +05:30
215 changed files with 7951 additions and 2413 deletions

View File

@@ -69,7 +69,9 @@ describe('Configuration', () => {
.and('include', 'url(#');
});
});
it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
// This has been broken for a long time, but something about the Cypress environment was
// rewriting the URL to be relative, causing the test to incorrectly pass.
it.skip('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -112,7 +114,7 @@ describe('Configuration', () => {
.first()
.should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(http://localhost');
.and('include', 'url(http\\:\\/\\/localhost');
});
});
it('should not taint the initial configuration when using multiple directives', () => {

View File

@@ -934,4 +934,43 @@ graph TD
}
);
});
it('68: should honor subgraph direction when inheritDir is false', () => {
imgSnapshotTest(
`
%%{init: {"flowchart": { "inheritDir": false }}}%%
flowchart TB
direction LR
subgraph A
direction TB
a --> b
end
subgraph B
c --> d
end
`,
{
fontFamily: 'courier',
}
);
});
it('69: should inherit global direction when inheritDir is true', () => {
imgSnapshotTest(
`
%%{init: {"flowchart": { "inheritDir": true }}}%%
flowchart TB
direction LR
subgraph A
direction TB
a --> b
end
subgraph B
c --> d
end
`,
{
fontFamily: 'courier',
}
);
});
});

View File

@@ -358,6 +358,23 @@ describe('Gantt diagram', () => {
);
});
it('should render a gantt diagram with a vert tag', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat ss
axisFormat %Ss
section Section
A task : a1, 00, 6s
Milestone : vert, 01,
section Another
Task in sec : 06, 3s
another task : 3s
`
);
});
it('should render a gantt diagram with tick is 2 milliseconds', () => {
imgSnapshotTest(
`

View File

@@ -161,4 +161,68 @@ describe('Timeline diagram', () => {
{}
);
});
it('11: should render timeline with many stacked events and proper timeline line length', () => {
imgSnapshotTest(
`timeline
title Medical Device Lifecycle
section Pre-Development
Quality Management System : Regulatory Compliance : Risk Management
section Development
Management Responsibility : Planning Activities : Human Resources
Resource Management : Management Reviews : Infrastructure
section Post-Development
Product Realization Activities : Planning Activities : Customer-related Processes
Post-Production Activities : Feedback : Complaints : Adverse Events
: Research and Development : Purchasing Activities
: Production Activities : Installation Activities
: Servicing Activities : Post-Market Surveillance
`,
{}
);
});
it('12: should render timeline with proper vertical line lengths for all columns', () => {
imgSnapshotTest(
`---
config:
theme: base
themeVariables:
fontFamily: Fira Sans
fontSize: 17px
cScale0: '#b3cde0'
cScale1: '#f49090'
cScale2: '#85d5b8'
---
timeline
title Medical Device Lifecycle
section Planning
Quality Management System (4): Regulatory Compliance (4.1.1)
: Risk Management (4.1.2)
Management Resposibility (5): Planning Activities (5.4)
: Management Reviews (5.6)
Resource Management (6): Human Resources (6.2)
: Infrastructure (6.3)
section Realization
Research and Development (7.3): RnD Planning (7.3.2)
: Inputs (7.3.3)
: Outputs (7.3.4)
: Review (7.3.5)
: Verification (7.3.6)
: Validation (7.3.7)
Purchasing (7.4): Purchasing Process (7.4.1)
: Purchasing Information (7.4.2)
Production (7.5): Production Activities (7.5.1)
: Production Feedback (8.2.1)
Installation (7.5.3): Installation Activities (7.5.3)
Servicing (7.5.4): Servicing Activities (7.5.4)
section Post-Production
Post-Market Activities (8): Feedback (8.2.1)
: Complaints (8.2.2)
: Adverse Events (8.2.3)
`,
{}
);
});
});

View File

@@ -0,0 +1,382 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Treemap Diagram', () => {
it('1: should render a basic treemap', () => {
imgSnapshotTest(
`treemap-beta
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it('2: should render a hierarchical treemap', () => {
imgSnapshotTest(
`treemap-beta
"Products"
"Electronics"
"Phones": 50
"Computers": 30
"Accessories": 20
"Clothing"
"Men's"
"Shirts": 10
"Pants": 15
"Women's"
"Dresses": 20
"Skirts": 10
`,
{}
);
});
it('3: should render a treemap with styling using classDef', () => {
imgSnapshotTest(
`treemap-beta
"Section 1"
"Leaf 1.1": 12
"Section 1.2":::class1
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20:::class1
"Leaf 2.2": 25
"Leaf 2.3": 12
classDef class1 fill:red,color:blue,stroke:#FFD600;
`,
{}
);
});
it('4: should handle long text that wraps', () => {
imgSnapshotTest(
`treemap-beta
"Main Category"
"This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50
"Short item": 20
`,
{}
);
});
it('5: should render with a forest theme', () => {
imgSnapshotTest(
`---
config:
theme: forest
---
treemap-beta
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it('6: should handle multiple levels of nesting', () => {
imgSnapshotTest(
`treemap-beta
"Level 1"
"Level 2A"
"Level 3A": 10
"Level 3B": 15
"Level 2B"
"Level 3C": 20
"Level 3D"
"Level 4A": 5
"Level 4B": 5
`,
{}
);
});
it('7: should handle classDef with multiple styles', () => {
imgSnapshotTest(
`treemap-beta
"Main"
"A": 20
"B":::important
"B1": 10
"B2": 15
"C": 5:::secondary
classDef important fill:#f96,stroke:#333,stroke-width:2px;
classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5;
`,
{}
);
});
it('8: should handle dollar value formatting with thousands separator', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$0,0"
---
treemap
"Budget"
"Operations"
"Salaries": 700000
"Equipment": 200000
"Supplies": 100000
"Marketing"
"Advertising": 400000
"Events": 100000
`,
{}
);
});
it('8a: should handle percentage formatting', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ".1%"
---
treemap-beta
"Market Share"
"Company A": 0.35
"Company B": 0.25
"Company C": 0.15
"Others": 0.25
`,
{}
);
});
it('8b: should handle decimal formatting', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ".2f"
---
treemap-beta
"Metrics"
"Conversion Rate": 0.0567
"Bounce Rate": 0.6723
"Click-through Rate": 0.1289
"Engagement": 0.4521
`,
{}
);
});
it('8c: should handle dollar sign with decimal places', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$.2f"
---
treemap-beta
"Product Prices"
"Basic": 19.99
"Standard": 49.99
"Premium": 99.99
"Enterprise": 199.99
`,
{}
);
});
it('8d: should handle dollar sign with thousands separator and decimal places', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$,.2f"
---
treemap-beta
"Revenue"
"Q1": 1250345.75
"Q2": 1645789.25
"Q3": 1845123.50
"Q4": 2145678.75
`,
{}
);
});
it('8e: should handle simple thousands separator', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ","
---
treemap-beta
"User Counts"
"Active Users": 1250345
"New Signups": 45789
"Churned": 12350
"Converted": 78975
`,
{}
);
});
it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$,.0f"
---
treemap-beta
"Sales by Region"
"North": 1234567
"South": 7654321
"East": 4567890
"West": 9876543
`,
{}
);
});
it('8g: should handle scientific notation format', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ".2e"
---
treemap-beta
"Scientific Values"
"Value 1": 1234567
"Value 2": 0.0000123
"Value 3": 1000000000
`,
{}
);
});
it('9: should handle a complex example with multiple features', () => {
imgSnapshotTest(
`---
config:
theme: dark
treemap:
valueFormat: "$0,0"
---
treemap-beta
"Company Budget"
"Engineering":::engineering
"Frontend": 300000
"Backend": 400000
"DevOps": 200000
"Marketing":::marketing
"Digital": 250000
"Print": 100000
"Events": 150000
"Sales":::sales
"Direct": 500000
"Channel": 300000
classDef engineering fill:#6b9bc3,stroke:#333;
classDef marketing fill:#c36b9b,stroke:#333;
classDef sales fill:#c3a66b,stroke:#333;
`,
{}
);
});
it('10: should render the example from documentation', () => {
imgSnapshotTest(
`
treemap-beta
"Section 1"
"Leaf 1.1": 12
"Section 1.2":::class1
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20:::class1
"Leaf 2.2": 25
"Leaf 2.3": 12
classDef class1 fill:red,color:blue,stroke:#FFD600;
`,
{}
);
});
it('11: should handle comments', () => {
imgSnapshotTest(
`
treemap-beta
%% This is a comment
"Category A"
"Item A1": 10
"Item A2": 20
%% Another comment
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
/*
it.skip('12: should render a treemap with title', () => {
imgSnapshotTest(
`
treemap-beta
title Treemap with Title
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it.skip('13: should render a treemap with accessibility attributes', () => {
imgSnapshotTest(
`
treemap-beta
accTitle: Accessible Treemap Title
accDescr: This is a description of the treemap for accessibility purposes
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it.skip('14: should render a treemap with title and accessibility attributes', () => {
imgSnapshotTest(
`
treemap
title Treemap with Title and Accessibility
accTitle: Accessible Treemap Title
accDescr: This is a description of the treemap for accessibility purposes
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
*/
});

View File

@@ -32,8 +32,26 @@
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
rel="stylesheet"
/>
<style>
.recursive-mermaid {
font-family: 'Recursive', sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-variation-settings:
'slnt' 0,
'CASL' 0,
'CRSV' 0.5,
'MONO' 0;
}
body {
/* background: rgb(221, 208, 208); */
/* background: #333; */
@@ -45,7 +63,9 @@
h1 {
color: grey;
}
.mermaid {
border: 1px solid red;
}
.mermaid2 {
display: none;
}
@@ -83,6 +103,11 @@
width: 100%;
}
.class2 {
fill: red;
fill-opacity: 1;
}
/* tspan {
font-size: 6px !important;
} */
@@ -106,19 +131,63 @@
<body>
<pre id="diagram4" class="mermaid">
treemap
"Section 1"
"Leaf 1.1": 12
"Section 1.2":::class1
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20:::class1
"Leaf 2.2": 25
"Leaf 2.3": 12
classDef class1 fill:red,color:blue,stroke:#FFD600;
</pre
>
<pre id="diagram4" class="mermaid2">
---
config:
treemap:
valueFormat: '$0,0'
---
treemap
"Budget"
"Operations"
"Salaries": 7000
"Equipment": 2000
"Supplies": 1000
"Marketing"
"Advertising": 4000
"Events": 1000
</pre
>
<pre id="diagram4" class="mermaid">
treemap
title Accessible Treemap Title
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
AB["apa@apa@"] --> B(("`apa@apa`"))
</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
flowchart
D(("for D"))
</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==> B
e1@{ animate: true}
</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
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
@@ -438,7 +507,7 @@ kanban
alert('It worked');
}
await mermaid.initialize({
// theme: 'base',
// theme: 'forest',
// theme: 'default',
// theme: 'forest',
// handDrawnSeed: 12,
@@ -449,11 +518,7 @@ kanban
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
// fontFamily: 'courier',
fontFamily: 'arial',
fontFamily: "'Recursive', sans-serif",
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',

View File

@@ -2,211 +2,219 @@
"durations": [
{
"spec": "cypress/integration/other/configuration.spec.js",
"duration": 5450
"duration": 5672
},
{
"spec": "cypress/integration/other/external-diagrams.spec.js",
"duration": 2004
"duration": 1990
},
{
"spec": "cypress/integration/other/ghsa.spec.js",
"duration": 3183
"duration": 3186
},
{
"spec": "cypress/integration/other/iife.spec.js",
"duration": 1913
"duration": 1948
},
{
"spec": "cypress/integration/other/interaction.spec.js",
"duration": 10944
"duration": 11938
},
{
"spec": "cypress/integration/other/rerender.spec.js",
"duration": 1938
"duration": 1932
},
{
"spec": "cypress/integration/other/xss.spec.js",
"duration": 26753
"duration": 27237
},
{
"spec": "cypress/integration/rendering/appli.spec.js",
"duration": 2571
"duration": 3170
},
{
"spec": "cypress/integration/rendering/architecture.spec.ts",
"duration": 110
"duration": 104
},
{
"spec": "cypress/integration/rendering/block.spec.js",
"duration": 14697
"duration": 17390
},
{
"spec": "cypress/integration/rendering/c4.spec.js",
"duration": 4705
"duration": 5296
},
{
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
"duration": 35841
"duration": 39004
},
{
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
"duration": 34279
"duration": 37653
},
{
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
"duration": 20641
"duration": 23278
},
{
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
"duration": 33020
"duration": 36645
},
{
"spec": "cypress/integration/rendering/classDiagram.spec.js",
"duration": 13546
"duration": 15418
},
{
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
"duration": 8072
"duration": 9684
},
{
"spec": "cypress/integration/rendering/current.spec.js",
"duration": 2083
"duration": 2570
},
{
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
"duration": 78269
"duration": 84687
},
{
"spec": "cypress/integration/rendering/erDiagram.spec.js",
"duration": 12578
"duration": 14819
},
{
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
"duration": 2784
"duration": 3371
},
{
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
"duration": 36205
"duration": 39925
},
{
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
"duration": 26627
"duration": 34694
},
{
"spec": "cypress/integration/rendering/flowchart-icon.spec.js",
"duration": 7137
},
{
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
"duration": 21332
"duration": 24740
},
{
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
"duration": 37328
"duration": 42077
},
{
"spec": "cypress/integration/rendering/flowchart.spec.js",
"duration": 25914
"duration": 30642
},
{
"spec": "cypress/integration/rendering/gantt.spec.js",
"duration": 15383
"duration": 18085
},
{
"spec": "cypress/integration/rendering/gitGraph.spec.js",
"duration": 45226
"duration": 50107
},
{
"spec": "cypress/integration/rendering/iconShape.spec.ts",
"duration": 251094
"duration": 276279
},
{
"spec": "cypress/integration/rendering/imageShape.spec.ts",
"duration": 50916
"duration": 56505
},
{
"spec": "cypress/integration/rendering/info.spec.ts",
"duration": 2489
"duration": 3036
},
{
"spec": "cypress/integration/rendering/journey.spec.js",
"duration": 5988
"duration": 6889
},
{
"spec": "cypress/integration/rendering/kanban.spec.ts",
"duration": 6225
"duration": 7353
},
{
"spec": "cypress/integration/rendering/katex.spec.js",
"duration": 3009
"duration": 3580
},
{
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
"duration": 2426
"duration": 2508
},
{
"spec": "cypress/integration/rendering/mindmap.spec.ts",
"duration": 9306
"duration": 10939
},
{
"spec": "cypress/integration/rendering/newShapes.spec.ts",
"duration": 134419
"duration": 149102
},
{
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
"duration": 102434
"duration": 113987
},
{
"spec": "cypress/integration/rendering/packet.spec.ts",
"duration": 3373
"duration": 4060
},
{
"spec": "cypress/integration/rendering/pie.spec.ts",
"duration": 4898
"duration": 5715
},
{
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
"duration": 7578
"duration": 8945
},
{
"spec": "cypress/integration/rendering/radar.spec.js",
"duration": 4526
"duration": 5337
},
{
"spec": "cypress/integration/rendering/requirement.spec.js",
"duration": 2172
"duration": 2643
},
{
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
"duration": 47175
"duration": 52072
},
{
"spec": "cypress/integration/rendering/sankey.spec.ts",
"duration": 5717
"duration": 6692
},
{
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
"duration": 32556
"duration": 35721
},
{
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
"duration": 22572
"duration": 26030
},
{
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
"duration": 14064
"duration": 16333
},
{
"spec": "cypress/integration/rendering/theme.spec.js",
"duration": 26565
"duration": 29287
},
{
"spec": "cypress/integration/rendering/timeline.spec.ts",
"duration": 6233
"duration": 8491
},
{
"spec": "cypress/integration/rendering/treemap.spec.ts",
"duration": 12291
},
{
"spec": "cypress/integration/rendering/xyChart.spec.js",
"duration": 17750
"duration": 20651
},
{
"spec": "cypress/integration/rendering/zenuml.spec.js",
"duration": 2696
"duration": 3218
}
]
}