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

Merge remote-tracking branch 'origin/develop' into feature/3508_color-user-journey-title

Browse Source 
Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>
This commit is contained in:
Shahir Ahmed
2025-04-11 00:16:46 -04:00
parent b2dfa74865 eb9987435a
commit 934f4da507
42 changed files with 1436 additions and 994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/gold-shoes-camp.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams

7
.changeset/honest-trees-dress.md Normal file
View File

@@ -0,0 +1,7 @@
---
'@mermaid-js/mermaid-zenuml': patch
---
chore: bump minimum ZenUML version to 3.23.28
commit: 9d06d8f31e7f12af9e9e092214f907f2dc93ad75

6
.changeset/sad-mails-accept.md Normal file
View File

@@ -0,0 +1,6 @@
---
'mermaid': patch
'@mermaid-js/parser': patch
---
Refactor grammar so that title don't break Architecture Diagrams

7
.changeset/yellow-mirrors-change.md Normal file
View File

@@ -0,0 +1,7 @@
---
'@mermaid-js/mermaid-zenuml': patch
---
fix(zenuml): limit `peerDependencies` to Mermaid v10 and v11
commit: 0ad44c12feead9d20c6a870a49327ada58d6e657

13
.esbuild/build.ts
View File

@@ -34,6 +34,19 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
{ ...iifeOptions, minify: true, metafile: shouldVisualize }
);
}
if (entryName === 'mermaid-zenuml') {
const iifeOptions: MermaidBuildOptions = {
...commonOptions,
format: 'iife',
globalName: 'mermaid-zenuml',
};
buildConfigs.push(
// mermaid-zenuml.js
{ ...iifeOptions },
// mermaid-zenuml.min.js
{ ...iifeOptions, minify: true, metafile: shouldVisualize }
);
}
const results = await Promise.all(buildConfigs.map((option) => build(getBuildConfig(option))));

7
.esbuild/util.ts
View File

@@ -58,6 +58,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
format,
minify,
options: { name, file, packageName },
globalName = 'mermaid',
} = options;
const external: string[] = ['require', 'fs', 'path'];
const outFileName = getFileName(name, options);
@@ -68,6 +69,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
},
metafile,
minify,
globalName,
logLevel: 'info',
chunkNames: `chunks/${outFileName}/[name]-[hash]`,
define: {
@@ -89,11 +91,12 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
if (format === 'iife') {
output.format = 'iife';
output.splitting = false;
output.globalName = '__esbuild_esm_mermaid';
const originalGlobalName = output.globalName ?? 'mermaid';
output.globalName = `__esbuild_esm_mermaid_nm[${JSON.stringify(originalGlobalName)}]`;
// Workaround for removing the .default access in esbuild IIFE.
// https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396
output.footer = {
js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;',
js: `globalThis[${JSON.stringify(originalGlobalName)}] = globalThis.${output.globalName}.default;`,
};
output.outExtension = { '.js': '.js' };
} else {

24
.github/workflows/e2e-timings.yml vendored
View File

@@ -11,6 +11,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
permissions:
contents: write
pull-requests: write
jobs:
timings:
@@ -29,6 +30,7 @@ jobs:
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
with:
runTests: false
- name: Cypress run
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
id: cypress
@@ -44,15 +46,17 @@ jobs:
SPLIT: 1
SPLIT_INDEX: 0
SPLIT_FILE: 'cypress/timings.json'
- name: Commit changes
uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
- name: Compare timings
run: pnpm tsx scripts/compare-timings.ts
- name: Commit and create pull request
uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
with:
add: 'cypress/timings.json'
author_name: 'github-actions[bot]'
author_email: '41898282+github-actions[bot]@users.noreply.github.com'
message: 'chore: update E2E timings'
- name: Create Pull Request
uses: peter-evans/create-pull-request@v5
with:
branch: release-promotion
add-paths: |
cypress/timings.json
commit-message: 'chore: update E2E timings'
branch: update-timings
title: Update E2E Timings
delete-branch: true
sign-commits: true

21
cypress/integration/rendering/architecture.spec.ts
View File

@@ -19,6 +19,25 @@ describe.skip('architecture diagram', () => {
`
);
});
it('should render a simple architecture diagram with titleAndAccessabilities', () => {
imgSnapshotTest(
`architecture-beta
title Simple Architecture Diagram
accTitle: Accessibility Title
accDescr: Accessibility Description
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
`
);
});
it('should render an architecture diagram with groups within groups', () => {
imgSnapshotTest(
`architecture-beta
@@ -172,7 +191,7 @@ describe.skip('architecture diagram', () => {
);
});
it('should render an architecture diagram with a resonable height', () => {
it('should render an architecture diagram with a reasonable height', () => {
imgSnapshotTest(
`architecture-beta
group federated(cloud)[Federated Environment]

161
cypress/integration/rendering/journey.spec.js
View File

@@ -64,6 +64,167 @@ section Checkout from website
);
});
it('should initialize with a left margin of 150px for user journeys', () => {
renderGraph(
`
---
config:
journey:
maxLabelWidth: 320
---
journey
title User Journey Example
section Onboarding
Sign Up: 5:
Browse Features: 3:
Use Core Functionality: 4:
section Engagement
Browse Features: 3
Use Core Functionality: 4
`,
{ journey: { useMaxWidth: true } }
);
let diagramStartX;
cy.contains('foreignobject', 'Sign Up').then(($diagram) => {
diagramStartX = parseFloat($diagram.attr('x'));
expect(diagramStartX).to.be.closeTo(150, 2);
});
});
it('should maintain sufficient space between legend and diagram when legend labels are longer', () => {
renderGraph(
`journey
title Web hook life cycle
section Darkoob
Make preBuilt:5: Darkoob user
register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained
Map slug to a Prebuilt Job:5: Darkoob user
section External Service
set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty
listen to the events : 5 : External Service
call darkoob endpoint : 5 : External Service
section Darkoob
check for inputs : 5 : DarkoobAPI
run the prebuilt job : 5 : DarkoobAPI
`,
{ journey: { useMaxWidth: true } }
);
let LabelEndX, diagramStartX;
// Get right edge of the legend
cy.contains('tspan', 'Darkoob userf').then((textBox) => {
const bbox = textBox[0].getBBox();
LabelEndX = bbox.x + bbox.width;
});
// Get left edge of the diagram
cy.contains('foreignobject', 'Make preBuilt').then((rect) => {
diagramStartX = parseFloat(rect.attr('x'));
});
// Assert right edge of the diagram is greater than or equal to the right edge of the label
cy.then(() => {
expect(diagramStartX).to.be.gte(LabelEndX);
});
});
it('should wrap a single long word with hyphenation', () => {
renderGraph(
`
---
config:
journey:
maxLabelWidth: 100
---
journey
title Long Word Test
section Test
VeryLongWord: 5: Supercalifragilisticexpialidocious
`,
{ journey: { useMaxWidth: true } }
);
// Verify that the line ends with a hyphen, indicating proper hyphenation for words exceeding maxLabelWidth.
cy.get('tspan').then((tspans) => {
const hasHyphen = [...tspans].some((t) => t.textContent.trim().endsWith('-'));
return expect(hasHyphen).to.be.true;
});
});
it('should wrap text on whitespace without adding hyphens', () => {
renderGraph(
`
---
config:
journey:
maxLabelWidth: 200
---
journey
title Whitespace Test
section Test
TextWithSpaces: 5: Gustavo Fring is played by Giancarlo Esposito and is a character in Breaking Bad.
`,
{ journey: { useMaxWidth: true } }
);
// Verify that none of the text spans end with a hyphen.
cy.get('tspan').each(($el) => {
const text = $el.text();
expect(text.trim()).not.to.match(/-$/);
});
});
it('should wrap long labels into multiple lines, keep them under max width, and maintain margins', () => {
renderGraph(
`
---
config:
journey:
maxLabelWidth: 320
---
journey
title User Journey Example
section Onboarding
Sign Up: 5: This is a long label that will be split into multiple lines to test the wrapping functionality
Browse Features: 3: This is another long label that will be split into multiple lines to test the wrapping functionality
Use Core Functionality: 4: This is yet another long label that will be split into multiple lines to test the wrapping functionality
section Engagement
Browse Features: 3
Use Core Functionality: 4
`,
{ journey: { useMaxWidth: true } }
);
let diagramStartX, maxLineWidth;
// Get the diagram's left edge x-coordinate
cy.contains('foreignobject', 'Sign Up')
.then(($diagram) => {
diagramStartX = parseFloat($diagram.attr('x'));
})
.then(() => {
cy.get('text.legend').then(($lines) => {
// Check that there are multiple lines
expect($lines.length).to.be.equal(9);
// Check that all lines are under the maxLabelWidth
$lines.each((index, el) => {
const bbox = el.getBBox();
expect(bbox.width).to.be.lte(320);
maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
});
/** The expected margin between the diagram and the legend is 150px, as defined by
* conf.leftMargin in user-journey-config.js
*/
expect(diagramStartX - maxLineWidth).to.be.closeTo(150, 2);
});
});
});
it('should correctly render the user journey diagram title with the specified styling', () => {
renderGraph(
`---

134
cypress/timings.json
View File

@@ -2,151 +2,211 @@
"durations": [
{
"spec": "cypress/integration/other/configuration.spec.js",
"duration": 4989
"duration": 5475
},
{
"spec": "cypress/integration/other/external-diagrams.spec.js",
"duration": 1382
"duration": 2037
},
{
"spec": "cypress/integration/other/ghsa.spec.js",
"duration": 3178
"duration": 3207
},
{
"spec": "cypress/integration/other/iife.spec.js",
"duration": 1372
"duration": 1915
},
{
"spec": "cypress/integration/other/interaction.spec.js",
"duration": 8998
"duration": 10952
},
{
"spec": "cypress/integration/other/rerender.spec.js",
"duration": 1249
"duration": 1872
},
{
"spec": "cypress/integration/other/xss.spec.js",
"duration": 25664
"duration": 26686
},
{
"spec": "cypress/integration/rendering/appli.spec.js",
"duration": 1928
"duration": 2629
},
{
"spec": "cypress/integration/rendering/architecture.spec.ts",
"duration": 2330
"duration": 104
},
{
"spec": "cypress/integration/rendering/block.spec.js",
"duration": 11156
"duration": 14765
},
{
"spec": "cypress/integration/rendering/c4.spec.js",
"duration": 3418
"duration": 4913
},
{
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
"duration": 36667
},
{
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
"duration": 33813
},
{
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
"duration": 14866
"duration": 20441
},
{
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
"duration": 32504
},
{
"spec": "cypress/integration/rendering/classDiagram.spec.js",
"duration": 9894
"duration": 13772
},
{
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
"duration": 5778
"duration": 7978
},
{
"spec": "cypress/integration/rendering/current.spec.js",
"duration": 1690
"duration": 2101
},
{
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
"duration": 76556
},
{
"spec": "cypress/integration/rendering/erDiagram.spec.js",
"duration": 9144
"duration": 12756
},
{
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
"duration": 1951
"duration": 2766
},
{
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
"duration": 2196
"duration": 35641
},
{
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
"duration": 21029
"duration": 26915
},
{
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
"duration": 16087
"duration": 21171
},
{
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
"duration": 27465
"duration": 37844
},
{
"spec": "cypress/integration/rendering/flowchart.spec.js",
"duration": 20035
"duration": 26254
},
{
"spec": "cypress/integration/rendering/gantt.spec.js",
"duration": 11366
"duration": 15149
},
{
"spec": "cypress/integration/rendering/gitGraph.spec.js",
"duration": 34025
"duration": 45049
},
{
"spec": "cypress/integration/rendering/iconShape.spec.ts",
"duration": 185902
"duration": 250225
},
{
"spec": "cypress/integration/rendering/imageShape.spec.ts",
"duration": 41631
"duration": 51531
},
{
"spec": "cypress/integration/rendering/info.spec.ts",
"duration": 1736
"duration": 2455
},
{
"spec": "cypress/integration/rendering/journey.spec.js",
"duration": 2247
"duration": 3181
},
{
"spec": "cypress/integration/rendering/kanban.spec.ts",
"duration": 6298
},
{
"spec": "cypress/integration/rendering/katex.spec.js",
"duration": 2144
"duration": 3065
},
{
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
"duration": 1646
"duration": 2521
},
{
"spec": "cypress/integration/rendering/mindmap.spec.ts",
"duration": 6406
"duration": 9341
},
{
"spec": "cypress/integration/rendering/newShapes.spec.ts",
"duration": 107219
"duration": 132809
},
{
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
"duration": 101299
},
{
"spec": "cypress/integration/rendering/packet.spec.ts",
"duration": 3481
},
{
"spec": "cypress/integration/rendering/pie.spec.ts",
"duration": 4878
},
{
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
"duration": 7416
},
{
"spec": "cypress/integration/rendering/radar.spec.js",
"duration": 4554
},
{
"spec": "cypress/integration/rendering/requirement.spec.js",
"duration": 2068
},
{
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
"duration": 47583
},
{
"spec": "cypress/integration/rendering/sankey.spec.ts",
"duration": 5792
},
{
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
"duration": 33035
},
{
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
"duration": 22716
},
{
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
"duration": 15834
"duration": 13868
},
{
"spec": "cypress/integration/rendering/theme.spec.js",
"duration": 33240
"duration": 26376
},
{
"spec": "cypress/integration/rendering/timeline.spec.ts",
"duration": 7122
"duration": 5872
},
{
"spec": "cypress/integration/rendering/xyChart.spec.js",
"duration": 11127
"duration": 9469
},
{
"spec": "cypress/integration/rendering/zenuml.spec.js",
"duration": 2391
"duration": 2742
}
]
}

2
docs/ecosystem/integrations-community.md
View File

@@ -267,7 +267,5 @@ Communication tools and platforms
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
<!--- cspell:ignore Blazorade HueHive --->

36
docs/syntax/entityRelationshipDiagram.md
View File

@@ -625,19 +625,45 @@ erDiagram
## Configuration
### Renderer
### Layout
The layout of the diagram is done with the renderer. The default renderer is dagre.
The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
You can opt to use an alternate renderer named elk by editing the configuration. The elk renderer is better for larger and/or more complex diagrams.
For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
```
```yaml
---
config:
config:
layout: elk
---
```
Your Mermaid code should be similar to the following:
```mermaid-example
---
title: Order example
config:
layout: elk
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```mermaid
---
title: Order example
config:
layout: elk
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
> **Note**
> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.

12
docs/syntax/flowchart.md
View File

@@ -1193,12 +1193,12 @@ To give an edge an ID, prepend the edge syntax with the ID followed by an `@` ch
```mermaid-example
flowchart LR
A e1@–> B
A e1@--> B
```
```mermaid
flowchart LR
A e1@–> B
A e1@--> B
```
In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
@@ -1229,13 +1229,13 @@ In the initial version, two animation speeds are supported: `fast` and `slow`. S
```mermaid-example
flowchart LR
A e1@–> B
A e1@--> B
e1@{ animation: fast }
```
```mermaid
flowchart LR
A e1@–> B
A e1@--> B
e1@{ animation: fast }
```
@@ -1247,14 +1247,14 @@ You can also animate edges by assigning a class to them and then defining animat
```mermaid-example
flowchart LR
A e1@–> B
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
```
```mermaid
flowchart LR
A e1@–> B
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
```

16
package.json
View File

@@ -67,9 +67,9 @@
"@argos-ci/cypress": "^3.2.0",
"@changesets/changelog-github": "^0.5.1",
"@changesets/cli": "^2.27.12",
"@cspell/eslint-plugin": "^8.8.4",
"@cspell/eslint-plugin": "^8.18.1",
"@cypress/code-coverage": "^3.12.49",
"@eslint/js": "^9.4.0",
"@eslint/js": "^9.24.0",
"@rollup/plugin-typescript": "^12.1.2",
"@types/cors": "^2.8.17",
"@types/express": "^5.0.0",
@@ -93,12 +93,12 @@
"cypress-image-snapshot": "^4.0.1",
"cypress-split": "^1.24.14",
"esbuild": "^0.25.0",
"eslint": "^9.20.1",
"eslint-config-prettier": "^10.0.0",
"eslint-plugin-cypress": "^4.1.0",
"eslint": "^9.24.0",
"eslint-config-prettier": "^10.1.1",
"eslint-plugin-cypress": "^4.2.1",
"eslint-plugin-html": "^8.1.2",
"eslint-plugin-jest": "^28.6.0",
"eslint-plugin-jsdoc": "^50.0.1",
"eslint-plugin-jest": "^28.11.0",
"eslint-plugin-jsdoc": "^50.6.9",
"eslint-plugin-json": "^4.0.1",
"eslint-plugin-lodash": "^8.0.0",
"eslint-plugin-markdown": "^5.1.0",
@@ -126,7 +126,7 @@
"tslib": "^2.8.1",
"tsx": "^4.7.3",
"typescript": "~5.7.3",
"typescript-eslint": "^8.24.1",
"typescript-eslint": "^8.29.1",
"vite": "^6.1.1",
"vite-plugin-istanbul": "^7.0.0",
"vitest": "^3.0.6"

4
packages/mermaid/src/config.type.ts
View File

@@ -559,6 +559,10 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
* Margin between actors
*/
leftMargin?: number;
/**
* Maximum width of actor labels
*/
maxLabelWidth?: number;
/**
* Width of actor boxes
*/

70
packages/mermaid/src/diagrams/architecture/architecture.spec.ts Normal file
View File

@@ -0,0 +1,70 @@
import { it, describe, expect } from 'vitest';
import { db } from './architectureDb.js';
import { parser } from './architectureParser.js';
const {
clear,
getDiagramTitle,
getAccTitle,
getAccDescription,
getServices,
getGroups,
getEdges,
getJunctions,
} = db;
describe('architecture diagrams', () => {
beforeEach(() => {
clear();
});
describe('architecture diagram definitions', () => {
it('should handle the architecture keyword', async () => {
const str = `architecture-beta`;
await expect(parser.parse(str)).resolves.not.toThrow();
});
it('should handle an simple radar definition', async () => {
const str = `architecture-beta
service db
`;
await expect(parser.parse(str)).resolves.not.toThrow();
});
});
describe('should handle TitleAndAccessibilities', () => {
it('should handle title on the first line', async () => {
const str = `architecture-beta title Simple Architecture Diagram`;
await expect(parser.parse(str)).resolves.not.toThrow();
expect(getDiagramTitle()).toBe('Simple Architecture Diagram');
});
it('should handle title on another line', async () => {
const str = `architecture-beta
title Simple Architecture Diagram
`;
await expect(parser.parse(str)).resolves.not.toThrow();
expect(getDiagramTitle()).toBe('Simple Architecture Diagram');
});
it('should handle accessibility title and description', async () => {
const str = `architecture-beta
accTitle: Accessibility Title
accDescr: Accessibility Description
`;
await expect(parser.parse(str)).resolves.not.toThrow();
expect(getAccTitle()).toBe('Accessibility Title');
expect(getAccDescription()).toBe('Accessibility Description');
});
it('should handle multiline accessibility description', async () => {
const str = `architecture-beta
accDescr {
Accessibility Description
}
`;
await expect(parser.parse(str)).resolves.not.toThrow();
expect(getAccDescription()).toBe('Accessibility Description');
});
});
});

18
packages/mermaid/src/diagrams/architecture/architectureDb.ts
View File

@@ -1,6 +1,6 @@
import type { ArchitectureDiagramConfig } from '../../config.type.js';
import DEFAULT_CONFIG from '../../defaultConfig.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import { getConfig as commonGetConfig } from '../../config.js';
import type { D3Element } from '../../types.js';
import { ImperativeState } from '../../utils/imperativeState.js';
import {
@@ -33,6 +33,7 @@ import {
isArchitectureService,
shiftPositionByArchitectureDirectionPair,
} from './architectureTypes.js';
import { cleanAndMerge } from '../../utils.js';
const DEFAULT_ARCHITECTURE_CONFIG: Required<ArchitectureDiagramConfig> =
DEFAULT_CONFIG.architecture;
@@ -316,6 +317,14 @@ const setElementForId = (id: string, element: D3Element) => {
};
const getElementById = (id: string) => state.records.elements[id];
const getConfig = (): Required<ArchitectureDiagramConfig> => {
const config = cleanAndMerge({
...DEFAULT_ARCHITECTURE_CONFIG,
...commonGetConfig().architecture,
});
return config;
};
export const db: ArchitectureDB = {
clear,
setDiagramTitle,
@@ -324,6 +333,7 @@ export const db: ArchitectureDB = {
getAccTitle,
setAccDescription,
getAccDescription,
getConfig,
addService,
getServices,
@@ -348,9 +358,5 @@ export const db: ArchitectureDB = {
export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
field: T
): Required<ArchitectureDiagramConfig>[T] {
const arch = getConfig().architecture;
if (arch?.[field]) {
return arch[field] as Required<ArchitectureDiagramConfig>[T];
}
return DEFAULT_ARCHITECTURE_CONFIG[field];
return getConfig()[field];
}

2
packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
View File

@@ -500,6 +500,8 @@ function layoutArchitecture(
}
export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram) => {
// TODO: Add title support for architecture diagrams
const db = diagObj.db as ArchitectureDB;
const services = db.getServices();

4
packages/mermaid/src/diagrams/architecture/architectureTypes.ts
View File

@@ -1,4 +1,4 @@
import type { DiagramDB } from '../../diagram-api/types.js';
import type { DiagramDBBase } from '../../diagram-api/types.js';
import type { ArchitectureDiagramConfig } from '../../config.type.js';
import type { D3Element } from '../../types.js';
import type cytoscape from 'cytoscape';
@@ -242,7 +242,7 @@ export interface ArchitectureEdge<DT = ArchitectureDirection> {
title?: string;
}
export interface ArchitectureDB extends DiagramDB {
export interface ArchitectureDB extends DiagramDBBase<ArchitectureDiagramConfig> {
clear: () => void;
addService: (service: Omit<ArchitectureService, 'edges'>) => void;
getServices: () => ArchitectureService[];

4
packages/mermaid/src/diagrams/radar/radar.spec.ts
View File

@@ -1,11 +1,9 @@
import { it, describe, expect } from 'vitest';
import { db } from './db.js';
import { parser } from './parser.js';
import { renderer, relativeRadius, closedRoundCurve } from './renderer.js';
import { relativeRadius, closedRoundCurve } from './renderer.js';
import { Diagram } from '../../Diagram.js';
import mermaidAPI from '../../mermaidAPI.js';
import { a } from 'vitest/dist/chunks/suite.qtkXWc6R.js';
import { buildRadarStyleOptions } from './styles.js';
const {
clear,

102
packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
View File

@@ -13,15 +13,17 @@ export const setConf = function (cnf) {
};
const actors = {};
let maxWidth = 0;
/** @param diagram - The diagram to draw to. */
function drawActorLegend(diagram) {
const conf = getConfig().journey;
// Draw the actors
const maxLabelWidth = conf.maxLabelWidth;
maxWidth = 0;
let yPos = 60;
Object.keys(actors).forEach((person) => {
const colour = actors[person].color;
const circleData = {
cx: 20,
cy: yPos,
@@ -32,21 +34,90 @@ function drawActorLegend(diagram) {
};
svgDraw.drawCircle(diagram, circleData);
// First, measure the full text width without wrapping.
let measureText = diagram.append('text').attr('visibility', 'hidden').text(person);
const fullTextWidth = measureText.node().getBoundingClientRect().width;
measureText.remove();
let lines = [];
// If the text is naturally within the max width, use it as a single line.
if (fullTextWidth <= maxLabelWidth) {
lines = [person];
} else {
// Otherwise, wrap the text using the knuth-plass algorithm.
const words = person.split(' '); // Split the text into words.
let currentLine = '';
measureText = diagram.append('text').attr('visibility', 'hidden');
words.forEach((word) => {
// check the width of the line with the new word.
const testLine = currentLine ? `${currentLine} ${word}` : word;
measureText.text(testLine);
const textWidth = measureText.node().getBoundingClientRect().width;
if (textWidth > maxLabelWidth) {
// If adding the new word exceeds max width, push the current line.
if (currentLine) {
lines.push(currentLine);
}
currentLine = word; // Start a new line with the current word.
// If the word itself is too long, break it with a hyphen.
measureText.text(word);
if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
let brokenWord = '';
for (const char of word) {
brokenWord += char;
measureText.text(brokenWord + '-');
if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
// Push the broken part with a hyphen.
lines.push(brokenWord.slice(0, -1) + '-');
brokenWord = char;
}
}
currentLine = brokenWord;
}
} else {
// If the line with the new word fits, add the new word to the current line.
currentLine = testLine;
}
});
// Push the last line.
if (currentLine) {
lines.push(currentLine);
}
measureText.remove(); // Remove the text element used for measuring.
}
lines.forEach((line, index) => {
const labelData = {
x: 40,
y: yPos + 7,
y: yPos + 7 + index * 20,
fill: '#666',
text: person,
textMargin: conf.boxTextMargin | 5,
text: line,
textMargin: conf.boxTextMargin ?? 5,
};
svgDraw.drawText(diagram, labelData);
yPos += 20;
// Draw the text and measure the width.
const textElement = svgDraw.drawText(diagram, labelData);
const lineWidth = textElement.node().getBoundingClientRect().width;
// Use conf.leftMargin as the initial spacing baseline,
// but expand maxWidth if the line is wider.
if (lineWidth > maxWidth && lineWidth > conf.leftMargin - lineWidth) {
maxWidth = lineWidth;
}
});
yPos += Math.max(20, lines.length * 20);
});
}
// TODO: Cleanup?
const conf = getConfig().journey;
const LEFT_MARGIN = conf.leftMargin;
let leftMargin = 0;
export const draw = function (text, id, version, diagObj) {
const configObject = getConfig();
const titleColor = configObject.journey.titleColor;
@@ -87,7 +158,8 @@ export const draw = function (text, id, version, diagObj) {
});
drawActorLegend(diagram);
bounds.insert(0, 0, LEFT_MARGIN, Object.keys(actors).length * 50);
leftMargin = conf.leftMargin + maxWidth;
bounds.insert(0, 0, leftMargin, Object.keys(actors).length * 50);
drawTasks(diagram, tasks, 0);
const box = bounds.getBounds();
@@ -95,7 +167,7 @@ export const draw = function (text, id, version, diagObj) {
diagram
.append('text')
.text(title)
.attr('x', LEFT_MARGIN)
.attr('x', leftMargin)
.attr('font-size', titleFontSize)
.attr('font-weight', 'bold')
.attr('y', 25)
@@ -104,16 +176,16 @@ export const draw = function (text, id, version, diagObj) {
}
const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
const width = leftMargin + box.stopx + 2 * conf.diagramMarginX;
configureSvgSize(diagram, height, width, conf.useMaxWidth);
// Draw activity line
diagram
.append('line')
.attr('x1', LEFT_MARGIN)
.attr('x1', leftMargin)
.attr('y1', conf.height * 4) // One section head + one task + margins
.attr('x2', width - LEFT_MARGIN - 4) // Subtract stroke width so arrow point is retained
.attr('x2', width - leftMargin - 4) // Subtract stroke width so arrow point is retained
.attr('y2', conf.height * 4)
.attr('stroke-width', 4)
.attr('stroke', 'black')
@@ -239,7 +311,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
}
const section = {
x: i * conf.taskMargin + i * conf.width + LEFT_MARGIN,
x: i * conf.taskMargin + i * conf.width + leftMargin,
y: 50,
text: task.section,
fill,
@@ -263,7 +335,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
}, {});
// Add some rendering data to the object
task.x = i * conf.taskMargin + i * conf.width + LEFT_MARGIN;
task.x = i * conf.taskMargin + i * conf.width + leftMargin;
task.y = taskPos;
task.width = conf.diagramMarginX;
task.height = conf.diagramMarginY;

2
packages/mermaid/src/docs/ecosystem/integrations-community.md
View File

@@ -262,7 +262,5 @@ Communication tools and platforms
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
<!--- cspell:ignore Blazorade HueHive --->

24
packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
View File

@@ -407,19 +407,33 @@ erDiagram
## Configuration
### Renderer
### Layout
The layout of the diagram is done with the renderer. The default renderer is dagre.
The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
You can opt to use an alternate renderer named elk by editing the configuration. The elk renderer is better for larger and/or more complex diagrams.
For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
```
```yaml
---
config:
config:
layout: elk
---
```
Your Mermaid code should be similar to the following:
```mermaid-example
---
title: Order example
config:
layout: elk
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```note
Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
```

6
packages/mermaid/src/docs/syntax/flowchart.md
View File

@@ -721,7 +721,7 @@ To give an edge an ID, prepend the edge syntax with the ID followed by an `@` ch
```mermaid
flowchart LR
A e1@–> B
A e1@--> B
```
In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
@@ -746,7 +746,7 @@ In the initial version, two animation speeds are supported: `fast` and `slow`. S
```mermaid
flowchart LR
A e1@–> B
A e1@--> B
e1@{ animation: fast }
```
@@ -758,7 +758,7 @@ You can also animate edges by assigning a class to them and then defining animat
```mermaid
flowchart LR
A e1@–> B
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
```

2
packages/mermaid/src/mermaidAPI.spec.ts
View File

@@ -31,6 +31,7 @@ vi.mock('./diagrams/xychart/xychartRenderer.js');
vi.mock('./diagrams/requirement/requirementRenderer.js');
vi.mock('./diagrams/sequence/sequenceRenderer.js');
vi.mock('./diagrams/radar/renderer.js');
vi.mock('./diagrams/architecture/architectureRenderer.js');
// -------------------------------------
@@ -799,6 +800,7 @@ graph TD;A--x|text including URL space|B;`)
{ textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
{ textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
{ textDiagramType: 'radar-beta', expectedType: 'radar' },
{ textDiagramType: 'architecture-beta', expectedType: 'architecture' },
];
describe('accessibility', () => {

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

@@ -562,7 +562,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
}
let svgPath;
let linePath = lineFunction(lineData);
const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
const edgeStyles = Array.isArray(edge.style) ? edge.style : edge.style ? [edge.style] : [];
let strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:'));
if (edge.look === 'handDrawn') {

4
packages/mermaid/src/schemas/config.schema.yaml
View File

@@ -1499,6 +1499,10 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
type: integer
default: 150
minimum: 0
maxLabelWidth:
description: Maximum width of actor labels
type: integer
default: 360
width:
description: Width of actor boxes
type: integer

2
packages/parser/src/language/architecture/arch.langium Normal file
View File

@@ -0,0 +1,2 @@
terminal ARCH_ICON: /\([\w-:]+\)/;
terminal ARCH_TITLE: /\[[\w ]+\]/;

21
packages/parser/src/language/architecture/architecture.langium
View File

@@ -1,14 +1,15 @@
grammar Architecture
import "../common/common";
import "arch";
entry Architecture:
NEWLINE*
"architecture-beta"
(
NEWLINE* TitleAndAccessibilities
| NEWLINE* Statement*
| NEWLINE*
)
NEWLINE
| TitleAndAccessibilities
| Statement
)*
;
fragment Statement:
@@ -31,25 +32,21 @@ fragment Arrow:
;
Group:
'group' id=ARCH_ID icon=ARCH_ICON? title=ARCH_TITLE? ('in' in=ARCH_ID)? EOL
'group' id=ID icon=ARCH_ICON? title=ARCH_TITLE? ('in' in=ID)? EOL
;
Service:
'service' id=ARCH_ID (iconText=ARCH_TEXT_ICON | icon=ARCH_ICON)? title=ARCH_TITLE? ('in' in=ARCH_ID)? EOL
'service' id=ID (iconText=STRING | icon=ARCH_ICON)? title=ARCH_TITLE? ('in' in=ID)? EOL
;
Junction:
'junction' id=ARCH_ID ('in' in=ARCH_ID)? EOL
'junction' id=ID ('in' in=ID)? EOL
;
Edge:
lhsId=ARCH_ID lhsGroup?=ARROW_GROUP? Arrow rhsId=ARCH_ID rhsGroup?=ARROW_GROUP? EOL
lhsId=ID lhsGroup?=ARROW_GROUP? Arrow rhsId=ID rhsGroup?=ARROW_GROUP? EOL
;
terminal ARROW_DIRECTION: 'L' | 'R' | 'T' | 'B';
terminal ARCH_ID: /[\w]+/;
terminal ARCH_TEXT_ICON: /\("[^"]+"\)/;
terminal ARCH_ICON: /\([\w-:]+\)/;
terminal ARCH_TITLE: /\[[\w ]+\]/;
terminal ARROW_GROUP: /\{group\}/;
terminal ARROW_INTO: /<|>/;

33
packages/parser/src/language/common/common.langium
View File

@@ -1,22 +1,35 @@
interface Common {
accDescr?: string;
accTitle?: string;
title?: string;
}
fragment TitleAndAccessibilities:
((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+
;
// Base terminals and fragments for common language constructs
// Terminal Precedence: Lazy to Greedy
// When imported, the terminals are considered after the terminals in the importing grammar
// Note: Hence, to add a terminal greedier than the common terminals, import it separately after the common import
fragment EOL returns string:
NEWLINE+ | EOF
;
terminal NEWLINE: /\r?\n/;
fragment TitleAndAccessibilities:
((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+
;
terminal BOOLEAN returns boolean: 'true' | 'false';
terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}]*)})/;
terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/;
terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/;
terminal FLOAT returns number: /[0-9]+\.[0-9]+(?!\.)/;
terminal INT returns number: /0|[1-9][0-9]*(?!\.)/;
terminal NUMBER returns number: FLOAT | INT;
terminal STRING returns string: /"([^"\\]|\\.)*"|'([^'\\]|\\.)*'/;
// Alphanumerics with underscores and dashes
// Must start with an alphanumeric or an underscore
// Cant end with a dash
terminal ID returns string: /[\w]([-\w]*\w)?/;
terminal NEWLINE: /\r?\n/;
hidden terminal WHITESPACE: /[\t ]+/;
hidden terminal YAML: /---[\t ]*\r?\n(?:[\S\s]*?\r?\n)?---(?:\r?\n|(?!\S))/;
hidden terminal DIRECTIVE: /[\t ]*%%{[\S\s]*?}%%(?:\r?\n|(?!\S))/;

49
packages/parser/src/language/gitGraph/gitGraph.langium
View File

@@ -1,39 +1,15 @@
grammar GitGraph
interface Common {
accDescr?: string;
accTitle?: string;
title?: string;
}
fragment TitleAndAccessibilities:
((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+
;
fragment EOL returns string:
NEWLINE+ | EOF
;
terminal NEWLINE: /\r?\n/;
terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}]*)})/;
terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/;
terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/;
hidden terminal WHITESPACE: /[\t ]+/;
hidden terminal YAML: /---[\t ]*\r?\n(?:[\S\s]*?\r?\n)?---(?:\r?\n|(?!\S))/;
hidden terminal DIRECTIVE: /[\t ]*%%{[\S\s]*?}%%(?:\r?\n|(?!\S))/;
hidden terminal SINGLE_LINE_COMMENT: /[\t ]*%%[^\n\r]*/;
import "../common/common";
import "reference";
entry GitGraph:
NEWLINE*
('gitGraph' | 'gitGraph' ':' | 'gitGraph:' | ('gitGraph' Direction ':'))
NEWLINE*
(
NEWLINE*
(TitleAndAccessibilities |
statements+=Statement |
NEWLINE)*
)
NEWLINE
| TitleAndAccessibilities
| statements+=Statement
)*
;
Statement
@@ -56,12 +32,12 @@ Commit:
|'type:' type=('NORMAL' | 'REVERSE' | 'HIGHLIGHT')
)* EOL;
Branch:
'branch' name=(ID|STRING)
'branch' name=(REFERENCE|STRING)
('order:' order=INT)?
EOL;
Merge:
'merge' branch=(ID|STRING)
'merge' branch=(REFERENCE|STRING)
(
'id:' id=STRING
|'tag:' tags+=STRING
@@ -69,7 +45,7 @@ Merge:
)* EOL;
Checkout:
('checkout'|'switch') branch=(ID|STRING) EOL;
('checkout'|'switch') branch=(REFERENCE|STRING) EOL;
CherryPicking:
'cherry-pick'
@@ -78,10 +54,3 @@ CherryPicking:
|'tag:' tags+=STRING
|'parent:' parent=STRING
)* EOL;
terminal INT returns number: /[0-9]+(?=\s)/;
terminal ID returns string: /\w([-\./\w]*[-\w])?/;
terminal STRING: /"[^"]*"|'[^']*'/;

4
packages/parser/src/language/gitGraph/reference.langium Normal file
View File

@@ -0,0 +1,4 @@
// Alphanumerics with underscores, dashes, slashes, and dots
// Must start with an alphanumeric or an underscore
// Cant end with a dash, slash, or dot
terminal REFERENCE returns string: /\w([-\./\w]*[-\w])?/;

1
packages/parser/src/language/index.ts
View File

@@ -12,7 +12,6 @@ export {
Commit,
Merge,
Statement,
isCommon,
isInfo,
isPacket,
isPacketBlock,

11
packages/parser/src/language/packet/packet.langium
View File

@@ -5,15 +5,12 @@ entry Packet:
NEWLINE*
"packet-beta"
(
NEWLINE* TitleAndAccessibilities blocks+=PacketBlock*
| NEWLINE+ blocks+=PacketBlock+
| NEWLINE*
)
TitleAndAccessibilities
| blocks+=PacketBlock
| NEWLINE
)*
;
PacketBlock:
start=INT('-' end=INT)? ':' label=STRING EOL
;
terminal INT returns number: /0|[1-9][0-9]*/;
terminal STRING: /"[^"]*"|'[^']*'/;

13
packages/parser/src/language/pie/pie.langium
View File

@@ -5,15 +5,12 @@ entry Pie:
NEWLINE*
"pie" showData?="showData"?
(
NEWLINE* TitleAndAccessibilities sections+=PieSection*
| NEWLINE+ sections+=PieSection+
| NEWLINE*
)
TitleAndAccessibilities
| sections+=PieSection
| NEWLINE
)*
;
PieSection:
label=PIE_SECTION_LABEL ":" value=PIE_SECTION_VALUE EOL
label=STRING ":" value=NUMBER EOL
;
terminal PIE_SECTION_LABEL: /"[^"]+"/;
terminal PIE_SECTION_VALUE returns number: /(0|[1-9][0-9]*)(\.[0-9]+)?/;

36
packages/parser/src/language/radar/radar.langium
View File

@@ -1,31 +1,5 @@
grammar Radar
// import "../common/common";
// Note: The import statement breaks TitleAndAccessibilities probably because of terminal order definition
// TODO: May need to change the common.langium to fix this
interface Common {
accDescr?: string;
accTitle?: string;
title?: string;
}
fragment TitleAndAccessibilities:
((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+
;
fragment EOL returns string:
NEWLINE+ | EOF
;
terminal NEWLINE: /\r?\n/;
terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}]*)})/;
terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/;
terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/;
hidden terminal WHITESPACE: /[\t ]+/;
hidden terminal YAML: /---[\t ]*\r?\n(?:[\S\s]*?\r?\n)?---(?:\r?\n|(?!\S))/;
hidden terminal DIRECTIVE: /[\t ]*%%{[\S\s]*?}%%(?:\r?\n|(?!\S))/;
hidden terminal SINGLE_LINE_COMMENT: /[\t ]*%%[^\n\r]*/;
import "../common/common";
entry Radar:
NEWLINE*
@@ -78,12 +52,4 @@ Option:
)
;
terminal NUMBER returns number: /(0|[1-9][0-9]*)(\.[0-9]+)?/;
terminal BOOLEAN returns boolean: 'true' | 'false';
terminal GRATICULE returns string: 'circle' | 'polygon';
terminal ID returns string: /[a-zA-Z_][a-zA-Z0-9\-_]*/;
terminal STRING: /"[^"]*"|'[^']*'/;

88
packages/parser/tests/architecture.test.ts Normal file
View File

@@ -0,0 +1,88 @@
import { describe, expect, it } from 'vitest';
import { Architecture } from '../src/language/index.js';
import { expectNoErrorsOrAlternatives, architectureParse as parse } from './test-util.js';
describe('architecture', () => {
describe('should handle architecture definition', () => {
it.each([
`architecture-beta`,
` architecture-beta `,
`\tarchitecture-beta\t`,
`
\tarchitecture-beta
`,
])('should handle regular architecture', (context: string) => {
const result = parse(context);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Architecture);
});
});
describe('should handle TitleAndAccessibilities', () => {
it.each([
`architecture-beta title sample title`,
` architecture-beta title sample title `,
`\tarchitecture-beta\ttitle sample title\t`,
`architecture-beta
\ttitle sample title
`,
])('should handle regular architecture + title in same line', (context: string) => {
const result = parse(context);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Architecture);
const { title } = result.value;
expect(title).toBe('sample title');
});
it.each([
`architecture-beta
title sample title`,
`architecture-beta
title sample title
`,
])('should handle regular architecture + title in next line', (context: string) => {
const result = parse(context);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Architecture);
const { title } = result.value;
expect(title).toBe('sample title');
});
it('should handle regular architecture + title + accTitle + accDescr', () => {
const context = `architecture-beta
title sample title
accTitle: sample accTitle
accDescr: sample accDescr
`;
const result = parse(context);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Architecture);
const { title, accTitle, accDescr } = result.value;
expect(title).toBe('sample title');
expect(accTitle).toBe('sample accTitle');
expect(accDescr).toBe('sample accDescr');
});
it('should handle regular architecture + title + accTitle + multi-line accDescr', () => {
const context = `architecture-beta
title sample title
accTitle: sample accTitle
accDescr {
sample accDescr
}
`;
const result = parse(context);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Architecture);
const { title, accTitle, accDescr } = result.value;
expect(title).toBe('sample title');
expect(accTitle).toBe('sample accTitle');
expect(accDescr).toBe('sample accDescr');
});
});
});

6
packages/parser/tests/gitGraph.test.ts
View File

@@ -63,6 +63,12 @@ describe('Parsing Branch Statements', () => {
expect(branch.name).toBe('master');
});
it('should parse a branch name starting with numbers', () => {
const result = parse(`gitGraph\n commit\n branch 1.0.1\n`);
const branch = result.value.statements[1] as Branch;
expect(branch.name).toBe('1.0.1');
});
it('should parse a branch with an order property', () => {
const result = parse(`gitGraph\n commit\n branch feature order:1\n`);
const branch = result.value.statements[1] as Branch;

29
packages/parser/tests/pie.test.ts
View File

@@ -4,6 +4,7 @@ import { Pie } from '../src/language/index.js';
import { expectNoErrorsOrAlternatives, pieParse as parse } from './test-util.js';
describe('pie', () => {
describe('should handle pie definition with or without showData', () => {
it.each([
`pie`,
` pie `,
@@ -32,7 +33,9 @@ describe('pie', () => {
const { showData } = result.value;
expect(showData).toBeTruthy();
});
});
describe('should handle TitleAndAccessibilities', () => {
describe('should handle TitleAndAccessibilities without showData', () => {
it.each([
`pie title sample title`,
` pie title sample title `,
@@ -68,7 +71,9 @@ describe('pie', () => {
const { title } = result.value;
expect(title).toBe('sample title');
});
});
describe('should handle TitleAndAccessibilities with showData', () => {
it.each([
`pie showData title sample title`,
`pie showData title sample title
@@ -103,9 +108,10 @@ describe('pie', () => {
expect(showData).toBeTruthy();
expect(title).toBe('sample title');
});
});
});
describe('sections', () => {
describe('normal', () => {
describe('should handle sections', () => {
it.each([
`pie
"GitHub":100
@@ -169,6 +175,22 @@ describe('pie', () => {
expect(sections[1].value).toBe(50);
});
it('should handle value with positive decimal', () => {
const context = `pie
"ash": 60.67
"bat": 40`;
const result = parse(context);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Pie);
const { sections } = result.value;
expect(sections[0].label).toBe('ash');
expect(sections[0].value).toBe(60.67);
expect(sections[1].label).toBe('bat');
expect(sections[1].value).toBe(40);
});
it('should handle sections with accTitle', () => {
const context = `pie accTitle: sample wow
"GitHub": 100
@@ -225,5 +247,4 @@ describe('pie', () => {
expect(sections[1].value).toBe(50);
});
});
});
});

14
packages/parser/tests/test-util.ts
View File

@@ -1,6 +1,8 @@
import type { LangiumParser, ParseResult } from 'langium';
import { expect, vi } from 'vitest';
import type {
Architecture,
ArchitectureServices,
Info,
InfoServices,
Pie,
@@ -13,6 +15,7 @@ import type {
GitGraphServices,
} from '../src/language/index.js';
import {
createArchitectureServices,
createInfoServices,
createPieServices,
createRadarServices,
@@ -47,6 +50,17 @@ export function createInfoTestServices() {
}
export const infoParse = createInfoTestServices().parse;
const architectureServices: ArchitectureServices = createArchitectureServices().Architecture;
const architectureParser: LangiumParser = architectureServices.parser.LangiumParser;
export function createArchitectureTestServices() {
const parse = (input: string) => {
return architectureParser.parse<Architecture>(input);
};
return { services: architectureServices, parse };
}
export const architectureParse = createArchitectureTestServices().parse;
const pieServices: PieServices = createPieServices().Pie;
const pieParser: LangiumParser = pieServices.parser.LangiumParser;
export function createPieTestServices() {

975
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

115
scripts/compare-timings.ts Normal file
View File

@@ -0,0 +1,115 @@
/**
* Compares new E2E test timings with previous timings and determines whether to keep the new timings.
*
* The script will:
* 1. Read old timings from git HEAD
* 2. Read new timings from the current file
* 3. Compare the timings and specs
* 4. Keep new timings if:
* - Specs were added/removed
* - Any timing changed by 20% or more
* 5. Revert to old timings if:
* - No significant timing changes
*
* This helps prevent unnecessary timing updates when test performance hasn't changed significantly.
*/
import fs from 'node:fs';
import path from 'node:path';
import { execSync } from 'node:child_process';
interface Timing {
spec: string;
duration: number;
}
interface TimingsFile {
durations: Timing[];
}
interface CleanupOptions {
keepNew: boolean;
reason: string;
}
const TIMINGS_FILE = 'cypress/timings.json';
const TIMINGS_PATH = path.join(process.cwd(), TIMINGS_FILE);
function log(message: string): void {
// eslint-disable-next-line no-console
console.log(message);
}
function readOldTimings(): TimingsFile {
try {
const oldContent = execSync(`git show HEAD:${TIMINGS_FILE}`, { encoding: 'utf8' });
return JSON.parse(oldContent);
} catch {
log('Error getting old timings, using empty file');
return { durations: [] };
}
}
function readNewTimings(): TimingsFile {
return JSON.parse(fs.readFileSync(TIMINGS_PATH, 'utf8'));
}
function cleanupFiles({ keepNew, reason }: CleanupOptions): void {
if (keepNew) {
log(`Keeping new timings: ${reason}`);
} else {
log(`Reverting to old timings: ${reason}`);
execSync(`git checkout HEAD -- ${TIMINGS_FILE}`);
}
}
function compareTimings(): void {
const oldTimings = readOldTimings();
const newTimings = readNewTimings();
const oldSpecs = new Set(oldTimings.durations.map((d) => d.spec));
const newSpecs = new Set(newTimings.durations.map((d) => d.spec));
// Check if specs were added or removed
const addedSpecs = [...newSpecs].filter((spec) => !oldSpecs.has(spec));
const removedSpecs = [...oldSpecs].filter((spec) => !newSpecs.has(spec));
if (addedSpecs.length > 0 || removedSpecs.length > 0) {
log('Specs changed:');
if (addedSpecs.length > 0) {
log(`Added: ${addedSpecs.join(', ')}`);
}
if (removedSpecs.length > 0) {
log(`Removed: ${removedSpecs.join(', ')}`);
}
return cleanupFiles({ keepNew: true, reason: 'Specs were added or removed' });
}
// Check timing variations
const timingChanges = newTimings.durations.map((newTiming) => {
const oldTiming = oldTimings.durations.find((d) => d.spec === newTiming.spec);
if (!oldTiming) {
throw new Error(`Could not find old timing for spec: ${newTiming.spec}`);
}
const change = Math.abs(newTiming.duration - oldTiming.duration);
const changePercent = change / oldTiming.duration;
return { spec: newTiming.spec, change, changePercent };
});
// Filter changes that's more than 5 seconds and 20% different
const significantChanges = timingChanges.filter((t) => t.change > 5000 && t.changePercent >= 0.2);
if (significantChanges.length === 0) {
log('No significant timing changes detected (threshold: 5s and 20%)');
return cleanupFiles({ keepNew: false, reason: 'No significant timing changes' });
}
log('Significant timing changes:');
significantChanges.forEach((t) => {
log(`${t.spec}: ${t.change.toFixed(1)}ms (${(t.changePercent * 100).toFixed(1)}%)`);
});
cleanupFiles({ keepNew: true, reason: 'Significant timing changes detected' });
}
compareTimings();