mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-05 03:54:35 +01:00
Compare commits
7 Commits
fix/7210-g
...
6777-er-re
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ee0d3209af | ||
|
|
6ac5e0e132 | ||
|
|
fca17f3b10 | ||
|
|
94dfdf31b8 | ||
|
|
f981d3d5b7 | ||
|
|
7139e1e5f7 | ||
|
|
299226f8c2 |
5
.changeset/angry-trains-fall.md
Normal file
5
.changeset/angry-trains-fall.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: Make relationship-label optional in ER diagrams
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix(treemap): Fixed treemap classDef style application to properly apply user-defined styles
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
feat: add alias support for new participant syntax of sequence diagrams
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: validate dates and tick interval to prevent UI freeze/crash in gantt diagramtype
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix(gitgraph): pass gitGraphConfig to renderer functions for applying directives properly.
|
||||
2
.github/workflows/e2e-timings.yml
vendored
2
.github/workflows/e2e-timings.yml
vendored
@@ -58,7 +58,7 @@ jobs:
|
||||
echo "EOF" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Commit and create pull request
|
||||
uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412
|
||||
uses: peter-evans/create-pull-request@0edc001d28a2959cd7a6b505629f1d82f0a6e67d
|
||||
with:
|
||||
add-paths: |
|
||||
cypress/timings.json
|
||||
|
||||
2
.github/workflows/update-browserlist.yml
vendored
2
.github/workflows/update-browserlist.yml
vendored
@@ -19,7 +19,7 @@ jobs:
|
||||
message: 'chore: update browsers list'
|
||||
push: false
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
|
||||
uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
|
||||
with:
|
||||
branch: update-browserslist
|
||||
title: Update Browserslist
|
||||
|
||||
@@ -322,6 +322,18 @@ ORDER ||--|{ LINE-ITEM : contains
|
||||
);
|
||||
});
|
||||
|
||||
it('should render an ER diagram without labels also', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
BOOK }|..|{ AUTHOR
|
||||
BOOK }|..|{ GENRE
|
||||
AUTHOR }|..|{ GENRE
|
||||
`,
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render relationship labels with line breaks', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
|
||||
@@ -833,34 +833,4 @@ describe('Gantt diagram', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should handle seconds-only format with tickInterval (issue #5496)', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
gantt
|
||||
tickInterval 1second
|
||||
dateFormat ss
|
||||
axisFormat %s
|
||||
|
||||
section Network Request
|
||||
RTT : rtt, 0, 20
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should handle dates with year typo like 202 instead of 2024 (issue #5496)', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
gantt
|
||||
title Schedule
|
||||
dateFormat YYYY-MM-DD
|
||||
tickInterval 1week
|
||||
axisFormat %m-%d
|
||||
|
||||
section Vacation
|
||||
London : 2024-12-01, 7d
|
||||
London : 202-12-01, 7d
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -247,31 +247,5 @@ root
|
||||
);
|
||||
});
|
||||
});
|
||||
describe('Level 2 nodes exceeding 11', () => {
|
||||
it('should render all Level 2 nodes correctly when there are more than 11', () => {
|
||||
imgSnapshotTest(
|
||||
`mindmap
|
||||
root
|
||||
Node1
|
||||
Node2
|
||||
Node3
|
||||
Node4
|
||||
Node5
|
||||
Node6
|
||||
Node7
|
||||
Node8
|
||||
Node9
|
||||
Node10
|
||||
Node11
|
||||
Node12
|
||||
Node13
|
||||
Node14
|
||||
Node15`,
|
||||
{},
|
||||
undefined,
|
||||
shouldHaveRoot
|
||||
);
|
||||
});
|
||||
});
|
||||
/* The end */
|
||||
});
|
||||
|
||||
@@ -776,194 +776,5 @@ describe('Sequence Diagram Special Cases', () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Participant Stereotypes with Aliases', () => {
|
||||
it('should render participants with stereotypes and aliases', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
participant API@{ "type" : "boundary" } as Public API
|
||||
participant Auth@{ "type" : "control" } as Auth Controller
|
||||
participant DB@{ "type" : "database" } as User Database
|
||||
participant Cache@{ "type" : "entity" } as Cache Layer
|
||||
API ->> Auth: Authenticate request
|
||||
Auth ->> DB: Query user
|
||||
DB -->> Auth: User data
|
||||
Auth ->> Cache: Store session
|
||||
Cache -->> Auth: Confirmed
|
||||
Auth -->> API: Token`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render actors with stereotypes and aliases', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
actor U@{ "type" : "actor" } as End User
|
||||
actor A@{ "type" : "boundary" } as API Gateway
|
||||
actor S@{ "type" : "control" } as Service Layer
|
||||
actor D@{ "type" : "database" } as Data Store
|
||||
U ->> A: Send request
|
||||
A ->> S: Process
|
||||
S ->> D: Persist
|
||||
D -->> S: Success
|
||||
S -->> A: Response
|
||||
A -->> U: Result`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render mixed participants and actors with stereotypes and aliases', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
actor Client@{ "type" : "actor" } AS Mobile Client
|
||||
participant Gateway@{ "type" : "boundary" } as API Gateway
|
||||
participant OrderSvc@{ "type" : "control" } as Order Service
|
||||
participant Queue@{ "type" : "queue" } as Message Queue
|
||||
participant DB@{ "type" : "database" } as Order Database
|
||||
participant Logs@{ "type" : "collections" } as Audit Logs
|
||||
Client ->> Gateway: Place order
|
||||
Gateway ->> OrderSvc: Validate order
|
||||
OrderSvc ->> Queue: Queue for processing as well
|
||||
OrderSvc ->> DB: Save order
|
||||
OrderSvc ->> Logs: Log transaction
|
||||
Queue -->> OrderSvc: Processing started AS Well
|
||||
DB -->> OrderSvc: Order saved
|
||||
Logs -->> OrderSvc: Logged
|
||||
OrderSvc -->> Gateway: Order confirmed
|
||||
Gateway -->> Client: Confirmation`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render stereotypes with aliases in boxes', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
box rgb(200,220,255) Frontend Layer
|
||||
actor User@{ "type" : "actor" } as End User
|
||||
participant UI@{ "type" : "boundary" } as User Interface
|
||||
end
|
||||
box rgb(255,220,200) Backend Layer
|
||||
participant API@{ "type" : "boundary" } as REST API
|
||||
participant Svc@{ "type" : "control" } as Business Logic
|
||||
end
|
||||
box rgb(220,255,200) Data Layer
|
||||
participant DB@{ "type" : "database" } as Primary DB
|
||||
participant Cache@{ "type" : "entity" } as Cache Store
|
||||
end
|
||||
User ->> UI: Click button
|
||||
UI ->> API: HTTP request
|
||||
API ->> Svc: Process
|
||||
Svc ->> Cache: Check cache
|
||||
Cache -->> Svc: Cache miss
|
||||
Svc ->> DB: Query data
|
||||
DB -->> Svc: Data
|
||||
Svc ->> Cache: Update cache
|
||||
Svc -->> API: Response
|
||||
API -->> UI: Data
|
||||
UI -->> User: Display`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render stereotypes with aliases and complex interactions', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
participant Web@{ "type" : "boundary" } as Web Portal
|
||||
participant Auth@{ "type" : "control" } as Auth Service
|
||||
participant UserDB@{ "type" : "database" } as User DB
|
||||
participant Queue@{ "type" : "queue" } as Event Queue
|
||||
participant Audit@{ "type" : "collections" } as Audit Trail
|
||||
Web ->> Auth: Login request
|
||||
activate Auth
|
||||
Auth ->> UserDB: Verify credentials
|
||||
activate UserDB
|
||||
UserDB -->> Auth: User found
|
||||
deactivate UserDB
|
||||
alt Valid credentials
|
||||
Auth ->> Queue: Publish login event
|
||||
Auth ->> Audit: Log success
|
||||
par Parallel processing
|
||||
Queue -->> Auth: Event queued
|
||||
and
|
||||
Audit -->> Auth: Logged
|
||||
end
|
||||
Auth -->> Web: Success token
|
||||
else Invalid credentials
|
||||
Auth ->> Audit: Log failure
|
||||
Audit -->> Auth: Logged
|
||||
Auth --x Web: Access denied
|
||||
end
|
||||
deactivate Auth
|
||||
Note over Web,Audit: All interactions logged`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Participant Inline Alias in Config', () => {
|
||||
it('should render participants with inline alias in config object', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
participant API@{ "type" : "boundary", "alias": "Public API" }
|
||||
participant Auth@{ "type" : "control", "alias": "Auth Service" }
|
||||
participant DB@{ "type" : "database", "alias": "User DB" }
|
||||
API ->> Auth: Login request
|
||||
Auth ->> DB: Query user
|
||||
DB -->> Auth: User data
|
||||
Auth -->> API: Token`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render actors with inline alias in config object', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
actor U@{ "type" : "actor", "alias": "End User" }
|
||||
actor G@{ "type" : "boundary", "alias": "Gateway" }
|
||||
actor S@{ "type" : "control", "alias": "Service" }
|
||||
U ->> G: Request
|
||||
G ->> S: Process
|
||||
S -->> G: Response
|
||||
G -->> U: Result`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle mixed inline and external alias syntax', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
participant A@{ "type" : "boundary", "alias": "Service A" }
|
||||
participant B@{ "type" : "control" } as Service B
|
||||
participant C@{ "type" : "database" }
|
||||
A ->> B: Request
|
||||
B ->> C: Query
|
||||
C -->> B: Data
|
||||
B -->> A: Response`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should prioritize external alias over inline alias', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
participant API@{ "type" : "boundary", "alias": "Internal Name" } as External Name
|
||||
participant DB@{ "type" : "database", "alias": "Internal DB" } AS External DB
|
||||
API ->> DB: Query
|
||||
DB -->> API: Result`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
|
||||
it('should render inline alias with only alias field (no type)', () => {
|
||||
imgSnapshotTest(
|
||||
`sequenceDiagram
|
||||
participant API@{ "alias": "Public API" }
|
||||
participant Auth@{ "alias": "Auth Service" }
|
||||
API ->> Auth: Request
|
||||
Auth -->> API: Response`,
|
||||
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -327,97 +327,8 @@ classDef sales fill:#c3a66b,stroke:#333;
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('12: should apply classDef fill color to leaf nodes', () => {
|
||||
imgSnapshotTest(
|
||||
`treemap-beta
|
||||
"Root"
|
||||
"Item A": 30:::redClass
|
||||
"Item B": 20
|
||||
"Item C": 25:::blueClass
|
||||
|
||||
classDef redClass fill:#ff0000;
|
||||
classDef blueClass fill:#0000ff;
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('13: should apply classDef stroke styles to sections', () => {
|
||||
imgSnapshotTest(
|
||||
`treemap-beta
|
||||
%% This is a comment
|
||||
"Category A":::thickBorder
|
||||
"Item A1": 10
|
||||
"Item A2": 20
|
||||
%% Another comment
|
||||
"Category B":::dashedBorder
|
||||
"Item B1": 15
|
||||
"Item B2": 25
|
||||
|
||||
classDef thickBorder stroke:red,stroke-width:8px;
|
||||
classDef dashedBorder stroke:black,stroke-dasharray:5,stroke-width:8px;
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('14: should apply classDef color to text labels', () => {
|
||||
imgSnapshotTest(
|
||||
`treemap-beta
|
||||
"Products"
|
||||
"Electronics":::whiteText
|
||||
"Phones": 40
|
||||
"Laptops": 30
|
||||
"Furniture":::darkText
|
||||
"Chairs": 25
|
||||
"Tables": 20
|
||||
|
||||
classDef whiteText fill:#2c3e50,color:#ffffff;
|
||||
classDef darkText fill:#ecf0f1,color:#000000;
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('15: should apply multiple classDef properties simultaneously', () => {
|
||||
imgSnapshotTest(
|
||||
`treemap-beta
|
||||
"Budget"
|
||||
"Critical":::critical
|
||||
"Server Costs": 50000
|
||||
"Salaries": 80000
|
||||
"Normal":::normal
|
||||
"Office Supplies": 5000
|
||||
"Marketing": 15000
|
||||
classDef critical fill:#e74c3c,color:#fff,stroke:#c0392b,stroke-width:3px;
|
||||
classDef normal fill:#3498db,color:#fff,stroke:#2980b9,stroke-width:1px;
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('16: should handle classDef on nested sections and leaves', () => {
|
||||
imgSnapshotTest(
|
||||
`treemap-beta
|
||||
"Company"
|
||||
"Engineering":::engSection
|
||||
"Frontend": 30:::highlight
|
||||
"Backend": 40
|
||||
"DevOps": 20:::highlight
|
||||
"Sales"
|
||||
"Direct": 35
|
||||
"Channel": 25:::highlight
|
||||
|
||||
classDef engSection fill:#9b59b6,stroke:#8e44ad,stroke-width:2px;
|
||||
classDef highlight fill:#f39c12,color:#000,stroke:#e67e22,stroke-width:2px;
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
/*
|
||||
it.skip('17: should render a treemap with title', () => {
|
||||
it.skip('12: should render a treemap with title', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
treemap-beta
|
||||
|
||||
@@ -2,35 +2,35 @@
|
||||
"durations": [
|
||||
{
|
||||
"spec": "cypress/integration/other/configuration.spec.js",
|
||||
"duration": 5944
|
||||
"duration": 6099
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/external-diagrams.spec.js",
|
||||
"duration": 2180
|
||||
"duration": 2236
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/ghsa.spec.js",
|
||||
"duration": 3282
|
||||
"duration": 3405
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/iife.spec.js",
|
||||
"duration": 2137
|
||||
"duration": 2176
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/interaction.spec.js",
|
||||
"duration": 11926
|
||||
"duration": 12300
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/rerender.spec.js",
|
||||
"duration": 2021
|
||||
"duration": 2089
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/other/xss.spec.js",
|
||||
"duration": 31377
|
||||
"duration": 32033
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/appli.spec.js",
|
||||
"duration": 3442
|
||||
"duration": 3672
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/architecture.spec.ts",
|
||||
@@ -38,191 +38,191 @@
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/block.spec.js",
|
||||
"duration": 18390
|
||||
"duration": 18135
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/c4.spec.js",
|
||||
"duration": 6468
|
||||
"duration": 5661
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
|
||||
"duration": 41282
|
||||
"duration": 41456
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
|
||||
"duration": 39226
|
||||
"duration": 38910
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
|
||||
"duration": 25028
|
||||
"duration": 24120
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
|
||||
"duration": 38458
|
||||
"duration": 38454
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/classDiagram.spec.js",
|
||||
"duration": 17305
|
||||
"duration": 17099
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
|
||||
"duration": 9762
|
||||
"duration": 9844
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/current.spec.js",
|
||||
"duration": 2923
|
||||
"duration": 2951
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
|
||||
"duration": 89135
|
||||
"duration": 90081
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/erDiagram.spec.js",
|
||||
"duration": 18976
|
||||
"duration": 19496
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
|
||||
"duration": 3643
|
||||
"duration": 3829
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
|
||||
"duration": 43103
|
||||
"duration": 42517
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
|
||||
"duration": 31637
|
||||
"duration": 31541
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-icon.spec.js",
|
||||
"duration": 7630
|
||||
"duration": 7749
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
|
||||
"duration": 25642
|
||||
"duration": 25230
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
|
||||
"duration": 50365
|
||||
"duration": 49359
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/flowchart.spec.js",
|
||||
"duration": 32790
|
||||
"duration": 33028
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/gantt.spec.js",
|
||||
"duration": 23065
|
||||
"duration": 22271
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/gitGraph.spec.js",
|
||||
"duration": 52238
|
||||
"duration": 51837
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/iconShape.spec.ts",
|
||||
"duration": 289380
|
||||
"duration": 285060
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/imageShape.spec.ts",
|
||||
"duration": 59265
|
||||
"duration": 59517
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/info.spec.ts",
|
||||
"duration": 3269
|
||||
"duration": 3501
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/journey.spec.js",
|
||||
"duration": 7470
|
||||
"duration": 7405
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/kanban.spec.ts",
|
||||
"duration": 7980
|
||||
"duration": 7975
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/katex.spec.js",
|
||||
"duration": 3896
|
||||
"duration": 4312
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
|
||||
"duration": 2640
|
||||
"duration": 2630
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
|
||||
"duration": 4327
|
||||
"duration": 4541
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/mindmap.spec.ts",
|
||||
"duration": 12588
|
||||
"duration": 12134
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/newShapes.spec.ts",
|
||||
"duration": 153490
|
||||
"duration": 151160
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
|
||||
"duration": 117833
|
||||
"duration": 118044
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/packet.spec.ts",
|
||||
"duration": 4975
|
||||
"duration": 5166
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/pie.spec.ts",
|
||||
"duration": 6682
|
||||
"duration": 7074
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
|
||||
"duration": 8972
|
||||
"duration": 9518
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/radar.spec.js",
|
||||
"duration": 5631
|
||||
"duration": 5846
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/requirement.spec.js",
|
||||
"duration": 2776
|
||||
"duration": 3089
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
|
||||
"duration": 54373
|
||||
"duration": 55361
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/sankey.spec.ts",
|
||||
"duration": 7203
|
||||
"duration": 7236
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
|
||||
"duration": 31707
|
||||
"duration": 26057
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
|
||||
"duration": 48327
|
||||
"duration": 48401
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
|
||||
"duration": 30728
|
||||
"duration": 30364
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
|
||||
"duration": 16881
|
||||
"duration": 16862
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/theme.spec.js",
|
||||
"duration": 30715
|
||||
"duration": 30553
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/timeline.spec.ts",
|
||||
"duration": 8586
|
||||
"duration": 8962
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/treemap.spec.ts",
|
||||
"duration": 15184
|
||||
"duration": 12486
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/xyChart.spec.js",
|
||||
"duration": 21282
|
||||
"duration": 21718
|
||||
},
|
||||
{
|
||||
"spec": "cypress/integration/rendering/zenuml.spec.js",
|
||||
"duration": 3576
|
||||
"duration": 3882
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
# Interface: ParseOptions
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
|
||||
Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
|
||||
|
||||
## Properties
|
||||
|
||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mer
|
||||
|
||||
> `optional` **suppressErrors**: `boolean`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L94)
|
||||
Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
|
||||
|
||||
If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
|
||||
The `parseError` function will not be called.
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
# Interface: ParseResult
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L97)
|
||||
Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
|
||||
|
||||
## Properties
|
||||
|
||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mer
|
||||
|
||||
> **config**: [`MermaidConfig`](MermaidConfig.md)
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L105)
|
||||
Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
|
||||
|
||||
The config passed as YAML frontmatter or directives
|
||||
|
||||
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
|
||||
|
||||
> **diagramType**: `string`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L101)
|
||||
Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
|
||||
|
||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
# Interface: RenderResult
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L115)
|
||||
Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
|
||||
|
||||
## Properties
|
||||
|
||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/me
|
||||
|
||||
> `optional` **bindFunctions**: (`element`) => `void`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L133)
|
||||
Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
|
||||
|
||||
Bind function to be called after the svg has been inserted into the DOM.
|
||||
This is necessary for adding event listeners to the elements in the svg.
|
||||
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
|
||||
|
||||
> **diagramType**: `string`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L123)
|
||||
Defined in: [packages/mermaid/src/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
|
||||
|
||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||
|
||||
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||
|
||||
> **svg**: `string`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L119)
|
||||
Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
|
||||
|
||||
The svg code for the rendered graph.
|
||||
|
||||
@@ -59,7 +59,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
|
||||
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
|
||||
- [GNU Octave](https://octave.org/) ✅
|
||||
- [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
|
||||
- [HackMD](https://hackmd.io/c/tutorials/%2F%40docs%2Fflowchart-en#Create-more-complex-flowcharts) ✅
|
||||
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
||||
- [MonsterWriter](https://www.monsterwriter.com/) ✅
|
||||
- [Joplin](https://joplinapp.org) ✅
|
||||
|
||||
@@ -402,7 +402,7 @@ block
|
||||
blockArrowId4<["Label"]>(down)
|
||||
blockArrowId5<["Label"]>(x)
|
||||
blockArrowId6<["Label"]>(y)
|
||||
blockArrowId7<["Label"]>(x, down)
|
||||
blockArrowId6<["Label"]>(x, down)
|
||||
```
|
||||
|
||||
```mermaid
|
||||
@@ -413,7 +413,7 @@ block
|
||||
blockArrowId4<["Label"]>(down)
|
||||
blockArrowId5<["Label"]>(x)
|
||||
blockArrowId6<["Label"]>(y)
|
||||
blockArrowId7<["Label"]>(x, down)
|
||||
blockArrowId6<["Label"]>(x, down)
|
||||
```
|
||||
|
||||
#### Example - Space Blocks
|
||||
|
||||
@@ -135,6 +135,44 @@ erDiagram
|
||||
"This **is** _Markdown_"
|
||||
```
|
||||
|
||||
#### Optional Relationship Labels (v\<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
The relationship label in ER diagrams is optional. You can define relationships without specifying a label, and the diagram will render correctly.
|
||||
|
||||
For example, the following is valid:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
BOOK }|..|{ AUTHOR
|
||||
BOOK }|..|{ GENRE
|
||||
AUTHOR }|..|{ GENRE
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
BOOK }|..|{ AUTHOR
|
||||
BOOK }|..|{ GENRE
|
||||
AUTHOR }|..|{ GENRE
|
||||
```
|
||||
|
||||
This will show the relationships between the entities without any labels on the connecting lines.
|
||||
|
||||
You can still add a label if you want to describe the relationship:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
BOOK }|..|{ AUTHOR : written_by
|
||||
BOOK }|..|{ GENRE : categorized_as
|
||||
AUTHOR }|..|{ GENRE : specializes_in
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
BOOK }|..|{ AUTHOR : written_by
|
||||
BOOK }|..|{ GENRE : categorized_as
|
||||
AUTHOR }|..|{ GENRE : specializes_in
|
||||
```
|
||||
|
||||
### Relationship Syntax
|
||||
|
||||
The `relationship` part of each statement can be broken down into three sub-components:
|
||||
|
||||
@@ -62,7 +62,7 @@ radar-beta
|
||||
radar-beta
|
||||
title Restaurant Comparison
|
||||
axis food["Food Quality"], service["Service"], price["Price"]
|
||||
axis ambiance["Ambiance"]
|
||||
axis ambiance["Ambiance"],
|
||||
|
||||
curve a["Restaurant A"]{4, 3, 2, 4}
|
||||
curve b["Restaurant B"]{3, 4, 3, 3}
|
||||
@@ -78,7 +78,7 @@ radar-beta
|
||||
radar-beta
|
||||
title Restaurant Comparison
|
||||
axis food["Food Quality"], service["Service"], price["Price"]
|
||||
axis ambiance["Ambiance"]
|
||||
axis ambiance["Ambiance"],
|
||||
|
||||
curve a["Restaurant A"]{4, 3, 2, 4}
|
||||
curve b["Restaurant B"]{3, 4, 3, 3}
|
||||
|
||||
@@ -196,11 +196,7 @@ sequenceDiagram
|
||||
|
||||
### Aliases
|
||||
|
||||
The actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the `as` keyword, or inline within the configuration object.
|
||||
|
||||
#### External Alias Syntax
|
||||
|
||||
You can define an alias using the `as` keyword after the participant declaration:
|
||||
The actor can have a convenient identifier and a descriptive label.
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
@@ -218,78 +214,6 @@ sequenceDiagram
|
||||
J->>A: Great!
|
||||
```
|
||||
|
||||
The external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases:
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
participant API@{ "type": "boundary" } as Public API
|
||||
actor DB@{ "type": "database" } as User Database
|
||||
participant Svc@{ "type": "control" } as Auth Service
|
||||
API->>Svc: Authenticate
|
||||
Svc->>DB: Query user
|
||||
DB-->>Svc: User data
|
||||
Svc-->>API: Token
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant API@{ "type": "boundary" } as Public API
|
||||
actor DB@{ "type": "database" } as User Database
|
||||
participant Svc@{ "type": "control" } as Auth Service
|
||||
API->>Svc: Authenticate
|
||||
Svc->>DB: Query user
|
||||
DB-->>Svc: User data
|
||||
Svc-->>API: Token
|
||||
```
|
||||
|
||||
#### Inline Alias Syntax
|
||||
|
||||
Alternatively, you can define an alias directly inside the configuration object using the `"alias"` field. This works with both `participant` and `actor` keywords:
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
participant API@{ "type": "boundary", "alias": "Public API" }
|
||||
participant Auth@{ "type": "control", "alias": "Auth Service" }
|
||||
participant DB@{ "type": "database", "alias": "User Database" }
|
||||
API->>Auth: Login request
|
||||
Auth->>DB: Query user
|
||||
DB-->>Auth: User data
|
||||
Auth-->>API: Access token
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant API@{ "type": "boundary", "alias": "Public API" }
|
||||
participant Auth@{ "type": "control", "alias": "Auth Service" }
|
||||
participant DB@{ "type": "database", "alias": "User Database" }
|
||||
API->>Auth: Login request
|
||||
Auth->>DB: Query user
|
||||
DB-->>Auth: User data
|
||||
Auth-->>API: Access token
|
||||
```
|
||||
|
||||
#### Alias Precedence
|
||||
|
||||
When both inline alias (in the configuration object) and external alias (using `as` keyword) are provided, the **external alias takes precedence**:
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
|
||||
participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
|
||||
API->>DB: Query
|
||||
DB-->>API: Result
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
|
||||
participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
|
||||
API->>DB: Query
|
||||
DB-->>API: Result
|
||||
```
|
||||
|
||||
In the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB".
|
||||
|
||||
### Actor Creation and Destruction (v10.3.0+)
|
||||
|
||||
It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
|
||||
|
||||
24
package.json
24
package.json
@@ -63,21 +63,21 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@applitools/eyes-cypress": "^3.56.5",
|
||||
"@argos-ci/cypress": "^6.2.2",
|
||||
"@changesets/changelog-github": "^0.5.2",
|
||||
"@changesets/cli": "^2.29.8",
|
||||
"@cspell/eslint-plugin": "^9.3.2",
|
||||
"@applitools/eyes-cypress": "^3.56.3",
|
||||
"@argos-ci/cypress": "^6.2.1",
|
||||
"@changesets/changelog-github": "^0.5.1",
|
||||
"@changesets/cli": "^2.29.7",
|
||||
"@cspell/eslint-plugin": "^9.3.0",
|
||||
"@cypress/code-coverage": "^3.14.7",
|
||||
"@eslint/js": "^9.26.0",
|
||||
"@rollup/plugin-typescript": "^12.1.4",
|
||||
"@types/cors": "^2.8.19",
|
||||
"@types/express": "^5.0.6",
|
||||
"@types/express": "^5.0.5",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/jsdom": "^21.1.7",
|
||||
"@types/lodash": "^4.17.21",
|
||||
"@types/lodash": "^4.17.20",
|
||||
"@types/mdast": "^4.0.4",
|
||||
"@types/node": "^22.19.1",
|
||||
"@types/node": "^22.19.0",
|
||||
"@types/rollup-plugin-visualizer": "^5.0.3",
|
||||
"@vitest/coverage-v8": "^3.2.4",
|
||||
"@vitest/spy": "^3.2.4",
|
||||
@@ -88,7 +88,7 @@
|
||||
"cors": "^2.8.5",
|
||||
"cpy-cli": "^5.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"cspell": "^9.3.2",
|
||||
"cspell": "^9.3.0",
|
||||
"cypress": "^14.5.4",
|
||||
"cypress-image-snapshot": "^4.0.1",
|
||||
"cypress-split": "^1.24.25",
|
||||
@@ -105,13 +105,13 @@
|
||||
"eslint-plugin-no-only-tests": "^3.3.0",
|
||||
"eslint-plugin-tsdoc": "^0.4.0",
|
||||
"eslint-plugin-unicorn": "^62.0.0",
|
||||
"express": "^5.2.1",
|
||||
"express": "^5.1.0",
|
||||
"globals": "^16.4.0",
|
||||
"globby": "^14.1.0",
|
||||
"husky": "^9.1.7",
|
||||
"jest": "^30.1.3",
|
||||
"jison": "^0.4.18",
|
||||
"js-yaml": "^4.1.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"jsdom": "^26.1.0",
|
||||
"langium-cli": "3.3.0",
|
||||
"lint-staged": "^16.1.6",
|
||||
@@ -122,7 +122,7 @@
|
||||
"prettier-plugin-jsdoc": "^1.3.3",
|
||||
"rimraf": "^6.0.1",
|
||||
"rollup-plugin-visualizer": "^6.0.5",
|
||||
"start-server-and-test": "^2.1.3",
|
||||
"start-server-and-test": "^2.1.2",
|
||||
"tslib": "^2.8.1",
|
||||
"tsx": "^4.20.6",
|
||||
"typescript": "~5.7.3",
|
||||
|
||||
@@ -89,11 +89,11 @@
|
||||
"uuid": "^11.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@adobe/jsonschema2md": "^8.0.8",
|
||||
"@adobe/jsonschema2md": "^8.0.7",
|
||||
"@iconify/types": "^2.0.0",
|
||||
"@types/cytoscape": "^3.21.9",
|
||||
"@types/cytoscape-fcose": "^2.2.5",
|
||||
"@types/d3-sankey": "^0.12.5",
|
||||
"@types/d3-sankey": "^0.12.4",
|
||||
"@types/d3-scale": "^4.0.9",
|
||||
"@types/d3-scale-chromatic": "^3.1.0",
|
||||
"@types/d3-selection": "^3.0.11",
|
||||
@@ -121,9 +121,9 @@
|
||||
"remark-frontmatter": "^5.0.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"rimraf": "^6.0.1",
|
||||
"start-server-and-test": "^2.1.3",
|
||||
"start-server-and-test": "^2.1.2",
|
||||
"type-fest": "^4.41.0",
|
||||
"typedoc": "^0.28.15",
|
||||
"typedoc": "^0.28.14",
|
||||
"typedoc-plugin-markdown": "^4.8.1",
|
||||
"typescript": "~5.7.3",
|
||||
"unist-util-flatmap": "^1.0.0",
|
||||
|
||||
@@ -99,6 +99,22 @@ start
|
||||
: 'ER_DIAGRAM' document 'EOF' { /*console.log('finished parsing');*/ }
|
||||
;
|
||||
|
||||
relationship
|
||||
: ENTITY relationType ENTITY maybeRole
|
||||
{
|
||||
yy.addRelationship($1, $4, $3, $2);
|
||||
};
|
||||
|
||||
maybeRole
|
||||
: COLON role
|
||||
{
|
||||
$$ = $2;
|
||||
}
|
||||
| /* empty */
|
||||
{
|
||||
$$ = '';
|
||||
};
|
||||
|
||||
document
|
||||
: /* empty */ { $$ = [] }
|
||||
| document line {$1.push($2);$$ = $1}
|
||||
@@ -113,32 +129,34 @@ line
|
||||
|
||||
|
||||
statement
|
||||
: entityName relSpec entityName COLON role
|
||||
: entityName relSpec entityName maybeRole
|
||||
{
|
||||
yy.addEntity($1);
|
||||
yy.addEntity($3);
|
||||
yy.addRelationship($1, $5, $3, $2);
|
||||
yy.addRelationship($1, $4, $3, $2);
|
||||
}
|
||||
| entityName STYLE_SEPARATOR idList relSpec entityName STYLE_SEPARATOR idList COLON role
|
||||
| entityName STYLE_SEPARATOR idList relSpec entityName STYLE_SEPARATOR idList maybeRole
|
||||
|
||||
{
|
||||
yy.addEntity($1);
|
||||
yy.addEntity($5);
|
||||
yy.addRelationship($1, $9, $5, $4);
|
||||
yy.addRelationship($1, $8, $5, $4);
|
||||
yy.setClass([$1], $3);
|
||||
yy.setClass([$5], $7);
|
||||
}
|
||||
| entityName STYLE_SEPARATOR idList relSpec entityName COLON role
|
||||
| entityName STYLE_SEPARATOR idList relSpec entityName maybeRole
|
||||
|
||||
{
|
||||
yy.addEntity($1);
|
||||
yy.addEntity($5);
|
||||
yy.addRelationship($1, $7, $5, $4);
|
||||
yy.addRelationship($1, $6, $5, $4);
|
||||
yy.setClass([$1], $3);
|
||||
}
|
||||
| entityName relSpec entityName STYLE_SEPARATOR idList COLON role
|
||||
| entityName relSpec entityName STYLE_SEPARATOR idList maybeRole
|
||||
{
|
||||
yy.addEntity($1);
|
||||
yy.addEntity($3);
|
||||
yy.addRelationship($1, $7, $3, $2);
|
||||
yy.addRelationship($1, $6, $3, $2);
|
||||
yy.setClass([$3], $5);
|
||||
}
|
||||
| entityName BLOCK_START attributes BLOCK_STOP
|
||||
|
||||
@@ -981,6 +981,12 @@ describe('when parsing ER diagram it...', function () {
|
||||
expect(rels[0].roleA).toBe('places');
|
||||
});
|
||||
|
||||
it('should allow label as optional', function () {
|
||||
erDiagram.parser.parse('erDiagram\nCUSTOMER ||--|{ ORDER');
|
||||
const rels = erDb.getRelationships();
|
||||
expect(rels[0].roleA).toBe('');
|
||||
});
|
||||
|
||||
it('should represent parent-child relationship correctly', function () {
|
||||
erDiagram.parser.parse('erDiagram\nPROJECT u--o{ TEAM_MEMBER : "parent"');
|
||||
const rels = erDb.getRelationships();
|
||||
@@ -989,6 +995,20 @@ describe('when parsing ER diagram it...', function () {
|
||||
expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.MD_PARENT);
|
||||
expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE);
|
||||
});
|
||||
|
||||
it('should handle whitespace-only relationship labels', function () {
|
||||
erDiagram.parser.parse('erDiagram\nBOOK }|..|{ AUTHOR : " "');
|
||||
let rels = erDb.getRelationships();
|
||||
expect(rels[rels.length - 1].roleA).toBe(' ');
|
||||
|
||||
erDiagram.parser.parse('erDiagram\nBOOK }|..|{ GENRE : "\t"');
|
||||
rels = erDb.getRelationships();
|
||||
expect(rels[rels.length - 1].roleA).toBe('\t');
|
||||
|
||||
erDiagram.parser.parse('erDiagram\nAUTHOR }|..|{ GENRE : " "');
|
||||
rels = erDb.getRelationships();
|
||||
expect(rels[rels.length - 1].roleA).toBe(' ');
|
||||
});
|
||||
});
|
||||
|
||||
describe('prototype properties', function () {
|
||||
|
||||
@@ -268,15 +268,7 @@ const fixTaskDates = function (startTime, endTime, dateFormat, excludes, include
|
||||
|
||||
const getStartDate = function (prevTime, dateFormat, str) {
|
||||
str = str.trim();
|
||||
|
||||
// Helper function to check if format is a timestamp format (x or X)
|
||||
const isTimestampFormat = (format) => {
|
||||
const trimmedFormat = format.trim();
|
||||
return trimmedFormat === 'x' || trimmedFormat === 'X';
|
||||
};
|
||||
|
||||
// Handle timestamp formats (x, X) with numeric strings
|
||||
if (isTimestampFormat(dateFormat) && /^\d+$/.test(str)) {
|
||||
if ((dateFormat.trim() === 'x' || dateFormat.trim() === 'X') && /^\d+$/.test(str)) {
|
||||
return new Date(Number(str));
|
||||
}
|
||||
// Test for after
|
||||
@@ -301,15 +293,13 @@ const getStartDate = function (prevTime, dateFormat, str) {
|
||||
return today;
|
||||
}
|
||||
|
||||
// Check for actual date set using dayjs strict parsing
|
||||
// Check for actual date set
|
||||
let mDate = dayjs(str, dateFormat.trim(), true);
|
||||
if (mDate.isValid()) {
|
||||
return mDate.toDate();
|
||||
} else {
|
||||
log.debug('Invalid date:' + str);
|
||||
log.debug('With date format:' + dateFormat.trim());
|
||||
|
||||
// Timestamp formats can fall back to new Date()
|
||||
const d = new Date(str);
|
||||
if (
|
||||
d === undefined ||
|
||||
|
||||
@@ -505,27 +505,4 @@ describe('when using the ganttDb', function () {
|
||||
ganttDb.addTask('test1', 'id1,202304,1d');
|
||||
expect(() => ganttDb.getTasks()).toThrowError('Invalid date:202304');
|
||||
});
|
||||
|
||||
it('should handle seconds-only format with valid numeric values (issue #5496)', function () {
|
||||
ganttDb.setDateFormat('ss');
|
||||
ganttDb.addSection('Network Request');
|
||||
ganttDb.addTask('RTT', 'rtt, 0, 20');
|
||||
const tasks = ganttDb.getTasks();
|
||||
expect(tasks).toHaveLength(1);
|
||||
expect(tasks[0].task).toBe('RTT');
|
||||
expect(tasks[0].id).toBe('rtt');
|
||||
});
|
||||
|
||||
it('should handle dates with year typo like 202 instead of 2024 (issue #5496)', function () {
|
||||
ganttDb.setDateFormat('YYYY-MM-DD');
|
||||
ganttDb.addSection('Vacation');
|
||||
ganttDb.addTask('London Trip 1', '2024-12-01, 7d');
|
||||
ganttDb.addTask('London Trip 2', '202-12-01, 7d');
|
||||
const tasks = ganttDb.getTasks();
|
||||
expect(tasks).toHaveLength(2);
|
||||
// First task should be in year 2024
|
||||
expect(tasks[0].startTime.getFullYear()).toBe(2024);
|
||||
// Second task will be parsed as year 202 (fallback to new Date())
|
||||
expect(tasks[1].startTime.getFullYear()).toBe(202);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import dayjs from 'dayjs';
|
||||
import dayjsDuration from 'dayjs/plugin/duration.js';
|
||||
import { log } from '../../logger.js';
|
||||
import {
|
||||
select,
|
||||
@@ -29,8 +28,6 @@ import common from '../common/common.js';
|
||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
|
||||
dayjs.extend(dayjsDuration);
|
||||
|
||||
export const setConf = function () {
|
||||
log.debug('Something is calling, setConf, remove the call');
|
||||
};
|
||||
@@ -81,7 +78,6 @@ const getMaxIntersections = (tasks, orderOffset) => {
|
||||
};
|
||||
|
||||
let w;
|
||||
const MAX_TICK_COUNT = 10000;
|
||||
export const draw = function (text, id, version, diagObj) {
|
||||
const conf = getConfig().gantt;
|
||||
|
||||
@@ -606,27 +602,6 @@ export const draw = function (text, id, version, diagObj) {
|
||||
.attr('class', 'exclude-range');
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the estimated number of ticks based on the time domain and tick interval.
|
||||
* Returns the estimated number of ticks as a number.
|
||||
* @param {Date} minTime - The minimum time in the domain
|
||||
* @param {Date} maxTime - The maximum time in the domain
|
||||
* @param {number} every - The interval count (e.g., 1 for "1second")
|
||||
* @param {string} interval - The interval unit (e.g., "second", "day")
|
||||
* @returns {number} The estimated number of ticks
|
||||
*/
|
||||
function getEstimatedTickCount(minTime, maxTime, every, interval) {
|
||||
if (every <= 0 || minTime > maxTime) {
|
||||
return Infinity;
|
||||
}
|
||||
const timeDiffMs = maxTime - minTime;
|
||||
const intervalMs = dayjs.duration({ [interval ?? 'day']: every }).asMilliseconds();
|
||||
if (intervalMs <= 0) {
|
||||
return Infinity;
|
||||
}
|
||||
return Math.ceil(timeDiffMs / intervalMs);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param theSidePad
|
||||
* @param theTopPad
|
||||
@@ -655,54 +630,32 @@ export const draw = function (text, id, version, diagObj) {
|
||||
);
|
||||
|
||||
if (resultTickInterval !== null) {
|
||||
const every = parseInt(resultTickInterval[1], 10);
|
||||
if (isNaN(every) || every <= 0) {
|
||||
log.warn(
|
||||
`Invalid tick interval value: "${resultTickInterval[1]}". Skipping custom tick interval.`
|
||||
);
|
||||
// Skip applying custom ticks
|
||||
} else {
|
||||
const interval = resultTickInterval[2];
|
||||
const weekday = diagObj.db.getWeekday() || conf.weekday;
|
||||
const every = resultTickInterval[1];
|
||||
const interval = resultTickInterval[2];
|
||||
const weekday = diagObj.db.getWeekday() || conf.weekday;
|
||||
|
||||
// Get the time domain to check tick count
|
||||
const domain = timeScale.domain();
|
||||
const minTime = domain[0];
|
||||
const maxTime = domain[1];
|
||||
const estimatedTicks = getEstimatedTickCount(minTime, maxTime, every, interval);
|
||||
|
||||
if (estimatedTicks > MAX_TICK_COUNT) {
|
||||
log.warn(
|
||||
`The tick interval "${every}${interval}" would generate ${estimatedTicks} ticks, ` +
|
||||
`which exceeds the maximum allowed (${MAX_TICK_COUNT}). ` +
|
||||
`This may indicate an invalid date or time range. Skipping custom tick interval.`
|
||||
);
|
||||
// D3 will use its default automatic tick generation
|
||||
} else {
|
||||
switch (interval) {
|
||||
case 'millisecond':
|
||||
bottomXAxis.ticks(timeMillisecond.every(every));
|
||||
break;
|
||||
case 'second':
|
||||
bottomXAxis.ticks(timeSecond.every(every));
|
||||
break;
|
||||
case 'minute':
|
||||
bottomXAxis.ticks(timeMinute.every(every));
|
||||
break;
|
||||
case 'hour':
|
||||
bottomXAxis.ticks(timeHour.every(every));
|
||||
break;
|
||||
case 'day':
|
||||
bottomXAxis.ticks(timeDay.every(every));
|
||||
break;
|
||||
case 'week':
|
||||
bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
|
||||
break;
|
||||
case 'month':
|
||||
bottomXAxis.ticks(timeMonth.every(every));
|
||||
break;
|
||||
}
|
||||
}
|
||||
switch (interval) {
|
||||
case 'millisecond':
|
||||
bottomXAxis.ticks(timeMillisecond.every(every));
|
||||
break;
|
||||
case 'second':
|
||||
bottomXAxis.ticks(timeSecond.every(every));
|
||||
break;
|
||||
case 'minute':
|
||||
bottomXAxis.ticks(timeMinute.every(every));
|
||||
break;
|
||||
case 'hour':
|
||||
bottomXAxis.ticks(timeHour.every(every));
|
||||
break;
|
||||
case 'day':
|
||||
bottomXAxis.ticks(timeDay.every(every));
|
||||
break;
|
||||
case 'week':
|
||||
bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
|
||||
break;
|
||||
case 'month':
|
||||
bottomXAxis.ticks(timeMonth.every(every));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -724,48 +677,32 @@ export const draw = function (text, id, version, diagObj) {
|
||||
.tickFormat(timeFormat(axisFormat));
|
||||
|
||||
if (resultTickInterval !== null) {
|
||||
const every = parseInt(resultTickInterval[1], 10);
|
||||
if (isNaN(every) || every <= 0) {
|
||||
log.warn(
|
||||
`Invalid tick interval value: "${resultTickInterval[1]}". Skipping custom tick interval.`
|
||||
);
|
||||
// Skip applying custom ticks
|
||||
} else {
|
||||
const interval = resultTickInterval[2];
|
||||
const weekday = diagObj.db.getWeekday() || conf.weekday;
|
||||
const every = resultTickInterval[1];
|
||||
const interval = resultTickInterval[2];
|
||||
const weekday = diagObj.db.getWeekday() || conf.weekday;
|
||||
|
||||
// Get the time domain to check tick count
|
||||
const domain = timeScale.domain();
|
||||
const minTime = domain[0];
|
||||
const maxTime = domain[1];
|
||||
const estimatedTicks = getEstimatedTickCount(minTime, maxTime, every, interval);
|
||||
|
||||
// Only apply custom ticks if the count is reasonable
|
||||
if (estimatedTicks <= MAX_TICK_COUNT) {
|
||||
switch (interval) {
|
||||
case 'millisecond':
|
||||
topXAxis.ticks(timeMillisecond.every(every));
|
||||
break;
|
||||
case 'second':
|
||||
topXAxis.ticks(timeSecond.every(every));
|
||||
break;
|
||||
case 'minute':
|
||||
topXAxis.ticks(timeMinute.every(every));
|
||||
break;
|
||||
case 'hour':
|
||||
topXAxis.ticks(timeHour.every(every));
|
||||
break;
|
||||
case 'day':
|
||||
topXAxis.ticks(timeDay.every(every));
|
||||
break;
|
||||
case 'week':
|
||||
topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
|
||||
break;
|
||||
case 'month':
|
||||
topXAxis.ticks(timeMonth.every(every));
|
||||
break;
|
||||
}
|
||||
}
|
||||
switch (interval) {
|
||||
case 'millisecond':
|
||||
topXAxis.ticks(timeMillisecond.every(every));
|
||||
break;
|
||||
case 'second':
|
||||
topXAxis.ticks(timeSecond.every(every));
|
||||
break;
|
||||
case 'minute':
|
||||
topXAxis.ticks(timeMinute.every(every));
|
||||
break;
|
||||
case 'hour':
|
||||
topXAxis.ticks(timeHour.every(every));
|
||||
break;
|
||||
case 'day':
|
||||
topXAxis.ticks(timeDay.every(every));
|
||||
break;
|
||||
case 'week':
|
||||
topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
|
||||
break;
|
||||
case 'month':
|
||||
topXAxis.ticks(timeMonth.every(every));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { select } from 'd3';
|
||||
import { setupGraphViewbox } from '../../diagram-api/diagramAPI.js';
|
||||
import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI.js';
|
||||
import { log } from '../../logger.js';
|
||||
import utils from '../../utils.js';
|
||||
import type { DrawDefinition } from '../../diagram-api/types.js';
|
||||
import type d3 from 'd3';
|
||||
import type { Commit, GitGraphDBRenderProvider, DiagramOrientation } from './gitGraphTypes.js';
|
||||
import { commitType } from './gitGraphTypes.js';
|
||||
import type { GitGraphDiagramConfig } from '../../config.type.js';
|
||||
|
||||
interface BranchPosition {
|
||||
pos: number;
|
||||
@@ -22,6 +21,8 @@ interface CommitPositionOffset extends CommitPosition {
|
||||
posWithOffset: number;
|
||||
}
|
||||
|
||||
const DEFAULT_CONFIG = getConfig();
|
||||
const DEFAULT_GITGRAPH_CONFIG = DEFAULT_CONFIG?.gitGraph;
|
||||
const LAYOUT_OFFSET = 10;
|
||||
const COMMIT_STEP = 40;
|
||||
const PX = 4;
|
||||
@@ -286,13 +287,12 @@ const drawCommitLabel = (
|
||||
gLabels: d3.Selection<SVGGElement, unknown, HTMLElement, any>,
|
||||
commit: Commit,
|
||||
commitPosition: CommitPositionOffset,
|
||||
pos: number,
|
||||
gitGraphConfig: GitGraphDiagramConfig
|
||||
pos: number
|
||||
) => {
|
||||
if (
|
||||
commit.type !== commitType.CHERRY_PICK &&
|
||||
((commit.customId && commit.type === commitType.MERGE) || commit.type !== commitType.MERGE) &&
|
||||
gitGraphConfig.showCommitLabel
|
||||
DEFAULT_GITGRAPH_CONFIG?.showCommitLabel
|
||||
) {
|
||||
const wrapper = gLabels.append('g');
|
||||
const labelBkg = wrapper.insert('rect').attr('class', 'commit-label-bkg');
|
||||
@@ -322,7 +322,7 @@ const drawCommitLabel = (
|
||||
text.attr('x', commitPosition.posWithOffset - bbox.width / 2);
|
||||
}
|
||||
|
||||
if (gitGraphConfig.rotateCommitLabel) {
|
||||
if (DEFAULT_GITGRAPH_CONFIG.rotateCommitLabel) {
|
||||
if (dir === 'TB' || dir === 'BT') {
|
||||
text.attr(
|
||||
'transform',
|
||||
@@ -514,14 +514,16 @@ const getCommitPosition = (
|
||||
const drawCommits = (
|
||||
svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
|
||||
commits: Map<string, Commit>,
|
||||
modifyGraph: boolean,
|
||||
gitGraphConfig: GitGraphDiagramConfig
|
||||
modifyGraph: boolean
|
||||
) => {
|
||||
if (!DEFAULT_GITGRAPH_CONFIG) {
|
||||
throw new Error('GitGraph config not found');
|
||||
}
|
||||
const gBullets = svg.append('g').attr('class', 'commit-bullets');
|
||||
const gLabels = svg.append('g').attr('class', 'commit-labels');
|
||||
let pos = dir === 'TB' || dir === 'BT' ? defaultPos : 0;
|
||||
const keys = [...commits.keys()];
|
||||
const isParallelCommits = gitGraphConfig.parallelCommits ?? false;
|
||||
const isParallelCommits = DEFAULT_GITGRAPH_CONFIG?.parallelCommits ?? false;
|
||||
|
||||
const sortKeys = (a: string, b: string) => {
|
||||
const seqA = commits.get(a)?.seq;
|
||||
@@ -553,7 +555,7 @@ const drawCommits = (
|
||||
const commitSymbolType = commit.customType ?? commit.type;
|
||||
const branchIndex = branchPos.get(commit.branch)?.index ?? 0;
|
||||
drawCommitBullet(gBullets, commit, commitPosition, typeClass, branchIndex, commitSymbolType);
|
||||
drawCommitLabel(gLabels, commit, commitPosition, pos, gitGraphConfig);
|
||||
drawCommitLabel(gLabels, commit, commitPosition, pos);
|
||||
drawCommitTags(gLabels, commit, commitPosition, pos);
|
||||
}
|
||||
if (dir === 'TB' || dir === 'BT') {
|
||||
@@ -810,8 +812,7 @@ const drawArrows = (
|
||||
|
||||
const drawBranches = (
|
||||
svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
|
||||
branches: { name: string }[],
|
||||
gitGraphConfig: GitGraphDiagramConfig
|
||||
branches: { name: string }[]
|
||||
) => {
|
||||
const g = svg.append('g');
|
||||
branches.forEach((branch, index) => {
|
||||
@@ -858,14 +859,14 @@ const drawBranches = (
|
||||
.attr('class', 'branchLabelBkg label' + adjustIndexForTheme)
|
||||
.attr('rx', 4)
|
||||
.attr('ry', 4)
|
||||
.attr('x', -bbox.width - 4 - (gitGraphConfig.rotateCommitLabel === true ? 30 : 0))
|
||||
.attr('x', -bbox.width - 4 - (DEFAULT_GITGRAPH_CONFIG?.rotateCommitLabel === true ? 30 : 0))
|
||||
.attr('y', -bbox.height / 2 + 8)
|
||||
.attr('width', bbox.width + 18)
|
||||
.attr('height', bbox.height + 4);
|
||||
label.attr(
|
||||
'transform',
|
||||
'translate(' +
|
||||
(-bbox.width - 14 - (gitGraphConfig.rotateCommitLabel === true ? 30 : 0)) +
|
||||
(-bbox.width - 14 - (DEFAULT_GITGRAPH_CONFIG?.rotateCommitLabel === true ? 30 : 0)) +
|
||||
', ' +
|
||||
(pos - bbox.height / 2 - 1) +
|
||||
')'
|
||||
@@ -898,13 +899,11 @@ export const draw: DrawDefinition = function (txt, id, ver, diagObj) {
|
||||
clear();
|
||||
|
||||
log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
|
||||
const db = diagObj.db as GitGraphDBRenderProvider;
|
||||
if (!db.getConfig) {
|
||||
log.error('getConfig method is not available on db');
|
||||
return;
|
||||
if (!DEFAULT_GITGRAPH_CONFIG) {
|
||||
throw new Error('GitGraph config not found');
|
||||
}
|
||||
const gitGraphConfig = db.getConfig();
|
||||
const rotateCommitLabel = gitGraphConfig.rotateCommitLabel ?? false;
|
||||
const rotateCommitLabel = DEFAULT_GITGRAPH_CONFIG.rotateCommitLabel ?? false;
|
||||
const db = diagObj.db as GitGraphDBRenderProvider;
|
||||
allCommitsDict = db.getCommits();
|
||||
const branches = db.getBranchesAsObjArray();
|
||||
dir = db.getDirection();
|
||||
@@ -925,22 +924,27 @@ export const draw: DrawDefinition = function (txt, id, ver, diagObj) {
|
||||
g.remove();
|
||||
});
|
||||
|
||||
drawCommits(diagram, allCommitsDict, false, gitGraphConfig);
|
||||
if (gitGraphConfig.showBranches) {
|
||||
drawBranches(diagram, branches, gitGraphConfig);
|
||||
drawCommits(diagram, allCommitsDict, false);
|
||||
if (DEFAULT_GITGRAPH_CONFIG.showBranches) {
|
||||
drawBranches(diagram, branches);
|
||||
}
|
||||
drawArrows(diagram, allCommitsDict);
|
||||
drawCommits(diagram, allCommitsDict, true, gitGraphConfig);
|
||||
drawCommits(diagram, allCommitsDict, true);
|
||||
|
||||
utils.insertTitle(
|
||||
diagram,
|
||||
'gitTitleText',
|
||||
gitGraphConfig.titleTopMargin ?? 0,
|
||||
DEFAULT_GITGRAPH_CONFIG.titleTopMargin ?? 0,
|
||||
db.getDiagramTitle()
|
||||
);
|
||||
|
||||
// Setup the view box and size of the svg element
|
||||
setupGraphViewbox(undefined, diagram, gitGraphConfig.diagramPadding, gitGraphConfig.useMaxWidth);
|
||||
setupGraphViewbox(
|
||||
undefined,
|
||||
diagram,
|
||||
DEFAULT_GITGRAPH_CONFIG.diagramPadding,
|
||||
DEFAULT_GITGRAPH_CONFIG.useMaxWidth
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
@@ -1303,6 +1307,7 @@ if (import.meta.vitest) {
|
||||
branchPos.set('main', { pos: 0, index: 0 });
|
||||
branchPos.set('develop', { pos: 107.49609375, index: 1 });
|
||||
branchPos.set('feature', { pos: 225.70703125, index: 2 });
|
||||
DEFAULT_GITGRAPH_CONFIG!.parallelCommits = true;
|
||||
commits.forEach((commit, key) => {
|
||||
if (commit.parents.length > 0) {
|
||||
curPos = calculateCommitPosition(commit);
|
||||
@@ -1330,6 +1335,7 @@ if (import.meta.vitest) {
|
||||
});
|
||||
});
|
||||
});
|
||||
DEFAULT_GITGRAPH_CONFIG!.parallelCommits = false;
|
||||
it('add', () => {
|
||||
commitPos.set('parent1', { x: 1, y: 1 });
|
||||
commitPos.set('parent2', { x: 2, y: 2 });
|
||||
|
||||
@@ -293,37 +293,5 @@ describe('MindmapDb getData function', () => {
|
||||
expect(edgeA1_aaa.section).toBe(1);
|
||||
expect(edgeA_a2.section).toBe(2);
|
||||
});
|
||||
|
||||
it('should wrap section numbers when there are more than 11 level 2 nodes', () => {
|
||||
db.addNode(0, 'root', 'Example', 0);
|
||||
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
db.addNode(1, `child${i}`, `${i}`, 0);
|
||||
}
|
||||
|
||||
const result = db.getData();
|
||||
|
||||
expect(result.nodes).toHaveLength(16);
|
||||
|
||||
const child1 = result.nodes.find((n) => n.label === '1') as MindmapLayoutNode;
|
||||
const child11 = result.nodes.find((n) => n.label === '11') as MindmapLayoutNode;
|
||||
const child12 = result.nodes.find((n) => n.label === '12') as MindmapLayoutNode;
|
||||
const child13 = result.nodes.find((n) => n.label === '13') as MindmapLayoutNode;
|
||||
const child14 = result.nodes.find((n) => n.label === '14') as MindmapLayoutNode;
|
||||
const child15 = result.nodes.find((n) => n.label === '15') as MindmapLayoutNode;
|
||||
|
||||
expect(child1.section).toBe(0);
|
||||
expect(child11.section).toBe(10);
|
||||
|
||||
expect(child12.section).toBe(0);
|
||||
expect(child13.section).toBe(1);
|
||||
expect(child14.section).toBe(2);
|
||||
expect(child15.section).toBe(3);
|
||||
|
||||
expect(child12.cssClasses).toBe('mindmap-node section-0');
|
||||
expect(child13.cssClasses).toBe('mindmap-node section-1');
|
||||
expect(child14.cssClasses).toBe('mindmap-node section-2');
|
||||
expect(child15.cssClasses).toBe('mindmap-node section-3');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -7,7 +7,6 @@ import type { MindmapNode } from './mindmapTypes.js';
|
||||
import defaultConfig from '../../defaultConfig.js';
|
||||
import type { LayoutData, Node, Edge } from '../../rendering-util/types.js';
|
||||
import { getUserDefinedConfig } from '../../config.js';
|
||||
import { MAX_SECTIONS } from './svgDraw.js';
|
||||
|
||||
// Extend Node type for mindmap-specific properties
|
||||
export type MindmapLayoutNode = Node & {
|
||||
@@ -204,7 +203,7 @@ export class MindmapDB {
|
||||
// For other nodes, inherit parent's section number
|
||||
if (node.children) {
|
||||
for (const [index, child] of node.children.entries()) {
|
||||
const childSectionNumber = node.level === 0 ? index % (MAX_SECTIONS - 1) : sectionNumber;
|
||||
const childSectionNumber = node.level === 0 ? index : sectionNumber;
|
||||
this.assignSections(child, childSectionNumber);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { parseFontSize } from '../../utils.js';
|
||||
import type { MermaidConfig } from '../../config.type.js';
|
||||
import type { MindmapDB } from './mindmapDb.js';
|
||||
|
||||
export const MAX_SECTIONS = 12;
|
||||
const MAX_SECTIONS = 12;
|
||||
|
||||
type ShapeFunction = (
|
||||
db: MindmapDB,
|
||||
|
||||
@@ -30,7 +30,6 @@
|
||||
[0-9]+(?=[ \n]+) return 'NUM';
|
||||
<ID>\@\{ { this.begin('CONFIG'); return 'CONFIG_START'; }
|
||||
<CONFIG>[^\}]+ { return 'CONFIG_CONTENT'; }
|
||||
<CONFIG>\}(?=\s+as\s) { this.popState(); this.begin('ALIAS'); return 'CONFIG_END'; }
|
||||
<CONFIG>\} { this.popState(); this.popState(); return 'CONFIG_END'; }
|
||||
<ID>[^\<->\->:\n,;@\s]+(?=\@\{) { yytext = yytext.trim(); return 'ACTOR'; }
|
||||
<ID>[^<>:\n,;@\s]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
|
||||
@@ -265,10 +264,7 @@ participant_statement
|
||||
| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
|
||||
| 'participant_actor' actor 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $$=$2;}
|
||||
| 'destroy' actor 'NEWLINE' {$2.type='destroyParticipant'; $$=$2;}
|
||||
| 'participant' actor_with_config 'AS' restOfLine 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant'; $2.description=yy.parseMessage($4); $$=$2;}
|
||||
| 'participant' actor_with_config 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant'; $$=$2;}
|
||||
| 'participant_actor' actor_with_config 'AS' restOfLine 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $2.description=yy.parseMessage($4); $$=$2;}
|
||||
| 'participant_actor' actor_with_config 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $$=$2;}
|
||||
|
||||
;
|
||||
|
||||
|
||||
@@ -172,12 +172,6 @@ export class SequenceDB implements DiagramDB {
|
||||
doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as ParticipantMetaData;
|
||||
}
|
||||
type = doc?.type ?? type;
|
||||
|
||||
// If alias is provided in metadata and description is not already set, use the alias
|
||||
if (doc?.alias && (!description || description.text === name)) {
|
||||
description = { text: doc.alias, wrap: description?.wrap, type };
|
||||
}
|
||||
|
||||
const old = this.state.records.actors.get(id);
|
||||
if (old) {
|
||||
// If already set and trying to set to a new one throw error
|
||||
|
||||
@@ -2621,114 +2621,5 @@ Bob->>Alice:Got it!
|
||||
}
|
||||
expect(error).toBe(true);
|
||||
});
|
||||
|
||||
it('should parse participant with stereotype and alias', async () => {
|
||||
const diagram = await Diagram.fromText(`
|
||||
sequenceDiagram
|
||||
participant Alice@{ "type" : "boundary" } as Public API
|
||||
participant Bob@{ "type" : "control" } as Controller
|
||||
Alice->>Bob: Request
|
||||
Bob-->>Alice: Response
|
||||
`);
|
||||
const actors = diagram.db.getActors();
|
||||
expect(actors.get('Alice').type).toBe('boundary');
|
||||
expect(actors.get('Alice').description).toBe('Public API');
|
||||
expect(actors.get('Bob').type).toBe('control');
|
||||
expect(actors.get('Bob').description).toBe('Controller');
|
||||
});
|
||||
|
||||
it('should parse actor with stereotype and alias', async () => {
|
||||
const diagram = await Diagram.fromText(`
|
||||
sequenceDiagram
|
||||
actor A@{ "type" : "database" } AS Database Server
|
||||
actor B@{ "type" : "queue" } as Message Queue
|
||||
A->>B: Send message
|
||||
`);
|
||||
const actors = diagram.db.getActors();
|
||||
expect(actors.get('A').type).toBe('database');
|
||||
expect(actors.get('A').description).toBe('Database Server');
|
||||
expect(actors.get('B').type).toBe('queue');
|
||||
expect(actors.get('B').description).toBe('Message Queue');
|
||||
});
|
||||
|
||||
it('should parse participant with stereotype and simple alias', async () => {
|
||||
const diagram = await Diagram.fromText(`
|
||||
sequenceDiagram
|
||||
participant API@{ "type" : "boundary" } AS Public API
|
||||
API->>API: test
|
||||
`);
|
||||
const actors = diagram.db.getActors();
|
||||
expect(actors.get('API').type).toBe('boundary');
|
||||
expect(actors.get('API').description).toBe('Public API');
|
||||
});
|
||||
|
||||
it('should parse participant with inline alias in config object', async () => {
|
||||
const diagram = await Diagram.fromText(`
|
||||
sequenceDiagram
|
||||
participant API@{ "type" : "boundary", "alias": "Public API" }
|
||||
participant Auth@{ "type" : "control", "alias": "Auth Controller" }
|
||||
API->>Auth: Request
|
||||
Auth-->>API: Response
|
||||
`);
|
||||
const actors = diagram.db.getActors();
|
||||
expect(actors.get('API').type).toBe('boundary');
|
||||
expect(actors.get('API').description).toBe('Public API');
|
||||
expect(actors.get('Auth').type).toBe('control');
|
||||
expect(actors.get('Auth').description).toBe('Auth Controller');
|
||||
});
|
||||
|
||||
it('should parse actor with inline alias in config object', async () => {
|
||||
const diagram = await Diagram.fromText(`
|
||||
sequenceDiagram
|
||||
actor U@{ "type" : "actor", "alias": "End User" }
|
||||
actor DB@{ "type" : "database", "alias": "User Database" }
|
||||
U->>DB: Query
|
||||
DB-->>U: Result
|
||||
`);
|
||||
const actors = diagram.db.getActors();
|
||||
expect(actors.get('U').type).toBe('actor');
|
||||
expect(actors.get('U').description).toBe('End User');
|
||||
expect(actors.get('DB').type).toBe('database');
|
||||
expect(actors.get('DB').description).toBe('User Database');
|
||||
});
|
||||
|
||||
it('should prioritize external alias over inline alias', async () => {
|
||||
const diagram = await Diagram.fromText(`
|
||||
sequenceDiagram
|
||||
participant API@{ "type" : "boundary", "alias": "Internal Name" } as External Name
|
||||
API->>API: test
|
||||
`);
|
||||
const actors = diagram.db.getActors();
|
||||
expect(actors.get('API').type).toBe('boundary');
|
||||
expect(actors.get('API').description).toBe('External Name');
|
||||
});
|
||||
|
||||
it('should handle participant with only inline alias (no type)', async () => {
|
||||
const diagram = await Diagram.fromText(`
|
||||
sequenceDiagram
|
||||
participant API@{ "alias": "Public API" }
|
||||
API->>API: test
|
||||
`);
|
||||
const actors = diagram.db.getActors();
|
||||
expect(actors.get('API').description).toBe('Public API');
|
||||
});
|
||||
|
||||
it('should handle mixed inline and external alias syntax', async () => {
|
||||
const diagram = await Diagram.fromText(`
|
||||
sequenceDiagram
|
||||
participant A@{ "type" : "boundary", "alias": "Service A" }
|
||||
participant B@{ "type" : "control" } as Service B
|
||||
participant C@{ "type" : "database" }
|
||||
A->>B: Request
|
||||
B->>C: Query
|
||||
`);
|
||||
const actors = diagram.db.getActors();
|
||||
expect(actors.get('A').type).toBe('boundary');
|
||||
expect(actors.get('A').description).toBe('Service A');
|
||||
expect(actors.get('B').type).toBe('control');
|
||||
expect(actors.get('B').description).toBe('Service B');
|
||||
expect(actors.get('C').type).toBe('database');
|
||||
expect(actors.get('C').description).toBe('C');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -21,7 +21,7 @@ const populate = (ast: TreemapAst, db: TreemapDB) => {
|
||||
type: string;
|
||||
value?: number;
|
||||
classSelector?: string;
|
||||
cssCompiledStyles?: string[];
|
||||
cssCompiledStyles?: string;
|
||||
}[] = [];
|
||||
|
||||
// Extract classes and styles from the treemap
|
||||
@@ -44,7 +44,7 @@ const populate = (ast: TreemapAst, db: TreemapDB) => {
|
||||
|
||||
// Get styles as a string if they exist
|
||||
const styles = item.classSelector ? db.getStylesForClass(item.classSelector) : [];
|
||||
const cssCompiledStyles = styles.length > 0 ? styles : undefined;
|
||||
const cssCompiledStyles = styles.length > 0 ? styles.join(';') : undefined;
|
||||
|
||||
const itemData = {
|
||||
level,
|
||||
|
||||
@@ -12,7 +12,7 @@ export function buildHierarchy(
|
||||
type: string;
|
||||
value?: number;
|
||||
classSelector?: string;
|
||||
cssCompiledStyles?: string[];
|
||||
cssCompiledStyles?: string;
|
||||
}[]
|
||||
): TreemapNode[] {
|
||||
if (!items.length) {
|
||||
@@ -29,7 +29,7 @@ export function buildHierarchy(
|
||||
};
|
||||
node.classSelector = item?.classSelector;
|
||||
if (item?.cssCompiledStyles) {
|
||||
node.cssCompiledStyles = item.cssCompiledStyles;
|
||||
node.cssCompiledStyles = [item.cssCompiledStyles];
|
||||
}
|
||||
|
||||
if (item.type === 'Leaf' && item.value !== undefined) {
|
||||
|
||||
@@ -54,7 +54,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
|
||||
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
|
||||
- [GNU Octave](https://octave.org/) ✅
|
||||
- [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
|
||||
- [HackMD](https://hackmd.io/c/tutorials/%2F%40docs%2Fflowchart-en#Create-more-complex-flowcharts) ✅
|
||||
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
||||
- [MonsterWriter](https://www.monsterwriter.com/) ✅
|
||||
- [Joplin](https://joplinapp.org) ✅
|
||||
|
||||
@@ -21,17 +21,17 @@
|
||||
"font-awesome": "^4.7.0",
|
||||
"jiti": "^2.4.2",
|
||||
"mermaid": "workspace:^",
|
||||
"vue": "^3.5.25"
|
||||
"vue": "^3.5.24"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/carbon": "^1.2.14",
|
||||
"@unocss/reset": "^66.5.9",
|
||||
"@unocss/reset": "^66.5.5",
|
||||
"@vite-pwa/vitepress": "^1.0.1",
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"fast-glob": "^3.3.3",
|
||||
"https-localhost": "^4.7.1",
|
||||
"pathe": "^2.0.3",
|
||||
"unocss": "^66.5.9",
|
||||
"unocss": "^66.5.5",
|
||||
"unplugin-vue-components": "^28.8.0",
|
||||
"vite": "^7.0.8",
|
||||
"vite-plugin-pwa": "^1.0.3",
|
||||
|
||||
@@ -283,7 +283,7 @@ block
|
||||
blockArrowId4<["Label"]>(down)
|
||||
blockArrowId5<["Label"]>(x)
|
||||
blockArrowId6<["Label"]>(y)
|
||||
blockArrowId7<["Label"]>(x, down)
|
||||
blockArrowId6<["Label"]>(x, down)
|
||||
```
|
||||
|
||||
#### Example - Space Blocks
|
||||
|
||||
@@ -89,6 +89,30 @@ erDiagram
|
||||
"This **is** _Markdown_"
|
||||
```
|
||||
|
||||
#### Optional Relationship Labels (v<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
The relationship label in ER diagrams is optional. You can define relationships without specifying a label, and the diagram will render correctly.
|
||||
|
||||
For example, the following is valid:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
BOOK }|..|{ AUTHOR
|
||||
BOOK }|..|{ GENRE
|
||||
AUTHOR }|..|{ GENRE
|
||||
```
|
||||
|
||||
This will show the relationships between the entities without any labels on the connecting lines.
|
||||
|
||||
You can still add a label if you want to describe the relationship:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
BOOK }|..|{ AUTHOR : written_by
|
||||
BOOK }|..|{ GENRE : categorized_as
|
||||
AUTHOR }|..|{ GENRE : specializes_in
|
||||
```
|
||||
|
||||
### Relationship Syntax
|
||||
|
||||
The `relationship` part of each statement can be broken down into three sub-components:
|
||||
|
||||
@@ -42,7 +42,7 @@ radar-beta
|
||||
radar-beta
|
||||
title Restaurant Comparison
|
||||
axis food["Food Quality"], service["Service"], price["Price"]
|
||||
axis ambiance["Ambiance"]
|
||||
axis ambiance["Ambiance"],
|
||||
|
||||
curve a["Restaurant A"]{4, 3, 2, 4}
|
||||
curve b["Restaurant B"]{3, 4, 3, 3}
|
||||
|
||||
@@ -120,11 +120,7 @@ sequenceDiagram
|
||||
|
||||
### Aliases
|
||||
|
||||
The actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the `as` keyword, or inline within the configuration object.
|
||||
|
||||
#### External Alias Syntax
|
||||
|
||||
You can define an alias using the `as` keyword after the participant declaration:
|
||||
The actor can have a convenient identifier and a descriptive label.
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
@@ -134,48 +130,6 @@ sequenceDiagram
|
||||
J->>A: Great!
|
||||
```
|
||||
|
||||
The external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases:
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
participant API@{ "type": "boundary" } as Public API
|
||||
actor DB@{ "type": "database" } as User Database
|
||||
participant Svc@{ "type": "control" } as Auth Service
|
||||
API->>Svc: Authenticate
|
||||
Svc->>DB: Query user
|
||||
DB-->>Svc: User data
|
||||
Svc-->>API: Token
|
||||
```
|
||||
|
||||
#### Inline Alias Syntax
|
||||
|
||||
Alternatively, you can define an alias directly inside the configuration object using the `"alias"` field. This works with both `participant` and `actor` keywords:
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
participant API@{ "type": "boundary", "alias": "Public API" }
|
||||
participant Auth@{ "type": "control", "alias": "Auth Service" }
|
||||
participant DB@{ "type": "database", "alias": "User Database" }
|
||||
API->>Auth: Login request
|
||||
Auth->>DB: Query user
|
||||
DB-->>Auth: User data
|
||||
Auth-->>API: Access token
|
||||
```
|
||||
|
||||
#### Alias Precedence
|
||||
|
||||
When both inline alias (in the configuration object) and external alias (using `as` keyword) are provided, the **external alias takes precedence**:
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
|
||||
participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
|
||||
API->>DB: Query
|
||||
DB-->>API: Result
|
||||
```
|
||||
|
||||
In the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB".
|
||||
|
||||
### Actor Creation and Destruction (v10.3.0+)
|
||||
|
||||
It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
|
||||
|
||||
@@ -23,7 +23,6 @@ export interface ParticipantMetaData {
|
||||
| 'database'
|
||||
| 'collections'
|
||||
| 'queue';
|
||||
alias?: string;
|
||||
}
|
||||
|
||||
export interface EdgeMetaData {
|
||||
|
||||
1781
pnpm-lock.yaml
generated
1781
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user