Compare commits

..

1 Commits

Author SHA1 Message Date
Sidharth Vinod
fed9d3568d Refactor GitHub Actions workflow for lockfile validation
Removed Node.js setup step and pnpm action version.

Co-Authored-By: alois@aloisklink.com
2025-11-03 23:29:28 -08:00
57 changed files with 1478 additions and 3606 deletions

View File

@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Prevent HTML tags from being escaped in sandbox label rendering

View File

@@ -1,5 +0,0 @@
---
'mermaid': patch
---
feat: add alias support for new participant syntax of sequence diagrams

View File

@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Support ComponentQueue_Ext to prevent parsing error

View File

@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11

View File

@@ -1,5 +0,0 @@
---
'mermaid': minor
---
feat: Add showCommitHashLabel config to hide auto-generated commit hash labels

View File

@@ -1,5 +1,3 @@
!viewbox
# It should be viewBox
# This file contains coding related terms
ALPHANUM
antiscript

View File

@@ -64,7 +64,6 @@ rscratch
shiki
Slidev
sparkline
speccharts
sphinxcontrib
ssim
stylis

View File

@@ -71,9 +71,6 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
const external: string[] = ['require', 'fs', 'path'];
const outFileName = getFileName(name, options);
const { dependencies, version } = JSON.parse(
readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
);
const output: BuildOptions = buildOptions({
...rest,
absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
@@ -85,13 +82,15 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
chunkNames: `chunks/${outFileName}/[name]-[hash]`,
define: {
// This needs to be stringified for esbuild
'injected.includeLargeFeatures': `${includeLargeFeatures}`,
'injected.version': `'${version}'`,
includeLargeFeatures: `${includeLargeFeatures}`,
'import.meta.vitest': 'undefined',
},
});
if (core) {
const { dependencies } = JSON.parse(
readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
);
// Core build is used to generate file without bundled dependencies.
// This is used by downstream projects to bundle dependencies themselves.
// Ignore dependencies and any dependencies of dependencies

View File

@@ -58,7 +58,7 @@ jobs:
echo "EOF" >> $GITHUB_OUTPUT
- name: Commit and create pull request
uses: peter-evans/create-pull-request@b4733b9419fd47bbfa1807b15627e17cd70b5b22
uses: peter-evans/create-pull-request@915d841dae6a4f191bb78faf61a257411d7be4d2
with:
add-paths: |
cypress/timings.json

View File

@@ -42,4 +42,5 @@ jobs:
publish: pnpm changeset:publish
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
NPM_CONFIG_PROVENANCE: true

View File

@@ -20,7 +20,7 @@ jobs:
with:
persist-credentials: false
- name: Run analysis
uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
with:
results_file: results.sarif
results_format: sarif

View File

@@ -78,8 +78,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
},
define: {
'import.meta.vitest': 'undefined',
'injected.includeLargeFeatures': 'true',
'injected.version': `'0.0.0'`,
},
resolve: {
extensions: [],
@@ -96,6 +94,10 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
}),
...visualizerOptions(packageName, core),
],
define: {
// Needs to be string
includeLargeFeatures: 'true',
},
};
if (watch && config.build) {

View File

@@ -98,21 +98,11 @@ export const openURLAndVerifyRendering = (
cy.visit(url);
cy.window().should('have.property', 'rendered', true);
cy.get('svg').should('be.visible');
cy.get('svg').should('not.have.attr', 'viewbox');
// Handle sandbox mode where SVG is inside an iframe
if (options.securityLevel === 'sandbox') {
cy.get('iframe').should('be.visible');
if (validation) {
cy.get('iframe').should(validation);
}
} else {
cy.get('svg').should('be.visible');
// cspell:ignore viewbox
cy.get('svg').should('not.have.attr', 'viewbox');
if (validation) {
cy.get('svg').should(validation);
}
if (validation) {
cy.get('svg').should(validation);
}
if (screenshot) {

View File

@@ -114,28 +114,4 @@ describe('C4 diagram', () => {
{}
);
});
it('C4.6 should render C4Context diagram with ComponentQueue_Ext', () => {
imgSnapshotTest(
`
C4Context
title System Context diagram with ComponentQueue_Ext
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
ComponentQueue_Ext(msgQueue, "Message Queue", "RabbitMQ", "External message queue system for processing banking transactions")
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
}
}
BiRel(customerA, SystemAA, "Uses")
Rel(SystemAA, msgQueue, "Sends messages to")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
`,
{}
);
});
});

View File

@@ -445,7 +445,7 @@ ORDER ||--|{ LINE-ITEM : contains
{ logLevel: 1 }
);
});
it('should render ER diagram with standalone numeric entities', () => {
it('should render ER diagram with numeric entity names and attributes', () => {
imgSnapshotTest(
`erDiagram
PRODUCT ||--o{ ORDER-ITEM : has

View File

@@ -79,18 +79,6 @@ describe('Flowchart v2', () => {
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('6a: should render complex HTML in labels with sandbox security', () => {
imgSnapshotTest(
`flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ securityLevel: 'sandbox', flowchart: { htmlLabels: true } }
);
});
it('7: should render a flowchart when useMaxWidth is true (default)', () => {
renderGraph(
`flowchart TD

View File

@@ -1569,93 +1569,4 @@ gitGraph TB:
{}
);
});
it('77: should hide commit hash labels when showCommitHashLabel is false', () => {
imgSnapshotTest(
`%%{init: { 'gitGraph': { 'showCommitHashLabel': false } } }%%
gitGraph
commit id: "Alpha"
commit
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
commit
merge develop id: "Delta"
commit
`,
{}
);
});
it('78: should show all commit labels when showCommitHashLabel is true', () => {
imgSnapshotTest(
`%%{init: { 'gitGraph': { 'showCommitHashLabel': true } } }%%
gitGraph
commit id: "Alpha"
commit
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
commit
merge develop id: "Delta"
commit
`,
{}
);
});
it('79: should hide commit hash labels with mixed custom and auto-generated IDs', () => {
imgSnapshotTest(
`%%{init: { 'gitGraph': { 'showCommitHashLabel': false } } }%%
gitGraph
commit id: "1-abcdefg"
commit
branch feature
commit id: "Custom Feature"
commit
checkout main
commit id: "2-abcdefg"
merge feature id: "Merge Feature"
commit
`,
{}
);
});
it('80: should hide commit hash labels in vertical orientation (TB)', () => {
imgSnapshotTest(
`%%{init: { 'gitGraph': { 'showCommitHashLabel': false } } }%%
gitGraph TB:
commit id: "Alpha"
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
merge develop
commit
`,
{}
);
});
it('81: should hide commit hash labels in bottom-to-top orientation (BT)', () => {
imgSnapshotTest(
`%%{init: { 'gitGraph': { 'showCommitHashLabel': false } } }%%
gitGraph BT:
commit id: "Alpha"
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
merge develop
commit
`,
{}
);
});
});

View File

@@ -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 */
});

View File

@@ -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 } }
);
});
});
});
});

View File

@@ -2,227 +2,227 @@
"durations": [
{
"spec": "cypress/integration/other/configuration.spec.js",
"duration": 6099
"duration": 5841
},
{
"spec": "cypress/integration/other/external-diagrams.spec.js",
"duration": 2236
"duration": 2138
},
{
"spec": "cypress/integration/other/ghsa.spec.js",
"duration": 3405
"duration": 3370
},
{
"spec": "cypress/integration/other/iife.spec.js",
"duration": 2176
"duration": 2052
},
{
"spec": "cypress/integration/other/interaction.spec.js",
"duration": 12300
"duration": 12243
},
{
"spec": "cypress/integration/other/rerender.spec.js",
"duration": 2089
"duration": 2065
},
{
"spec": "cypress/integration/other/xss.spec.js",
"duration": 32033
"duration": 31288
},
{
"spec": "cypress/integration/rendering/appli.spec.js",
"duration": 3672
"duration": 3421
},
{
"spec": "cypress/integration/rendering/architecture.spec.ts",
"duration": 103
"duration": 97
},
{
"spec": "cypress/integration/rendering/block.spec.js",
"duration": 18135
"duration": 18500
},
{
"spec": "cypress/integration/rendering/c4.spec.js",
"duration": 5661
"duration": 5793
},
{
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
"duration": 41456
"duration": 40966
},
{
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
"duration": 38910
"duration": 39176
},
{
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
"duration": 24120
"duration": 23468
},
{
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
"duration": 38454
"duration": 38291
},
{
"spec": "cypress/integration/rendering/classDiagram.spec.js",
"duration": 17099
"duration": 16949
},
{
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
"duration": 9844
"duration": 9480
},
{
"spec": "cypress/integration/rendering/current.spec.js",
"duration": 2951
"duration": 2753
},
{
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
"duration": 90081
"duration": 88028
},
{
"spec": "cypress/integration/rendering/erDiagram.spec.js",
"duration": 19496
"duration": 15615
},
{
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
"duration": 3829
"duration": 3706
},
{
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
"duration": 42517
"duration": 43905
},
{
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
"duration": 31541
"duration": 31217
},
{
"spec": "cypress/integration/rendering/flowchart-icon.spec.js",
"duration": 7749
"duration": 7531
},
{
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
"duration": 25230
"duration": 25423
},
{
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
"duration": 49359
"duration": 49664
},
{
"spec": "cypress/integration/rendering/flowchart.spec.js",
"duration": 33028
"duration": 32525
},
{
"spec": "cypress/integration/rendering/gantt.spec.js",
"duration": 22271
"duration": 20915
},
{
"spec": "cypress/integration/rendering/gitGraph.spec.js",
"duration": 51837
"duration": 53556
},
{
"spec": "cypress/integration/rendering/iconShape.spec.ts",
"duration": 285060
"duration": 283038
},
{
"spec": "cypress/integration/rendering/imageShape.spec.ts",
"duration": 59517
"duration": 59434
},
{
"spec": "cypress/integration/rendering/info.spec.ts",
"duration": 3501
"duration": 3101
},
{
"spec": "cypress/integration/rendering/journey.spec.js",
"duration": 7405
"duration": 7099
},
{
"spec": "cypress/integration/rendering/kanban.spec.ts",
"duration": 7975
"duration": 7567
},
{
"spec": "cypress/integration/rendering/katex.spec.js",
"duration": 4312
"duration": 3817
},
{
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
"duration": 2630
"duration": 2624
},
{
"spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
"duration": 4541
"duration": 4246
},
{
"spec": "cypress/integration/rendering/mindmap.spec.ts",
"duration": 12134
"duration": 11967
},
{
"spec": "cypress/integration/rendering/newShapes.spec.ts",
"duration": 151160
"duration": 151914
},
{
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
"duration": 118044
"duration": 116698
},
{
"spec": "cypress/integration/rendering/packet.spec.ts",
"duration": 5166
"duration": 4967
},
{
"spec": "cypress/integration/rendering/pie.spec.ts",
"duration": 7074
"duration": 6700
},
{
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
"duration": 9518
"duration": 8963
},
{
"spec": "cypress/integration/rendering/radar.spec.js",
"duration": 5846
"duration": 5540
},
{
"spec": "cypress/integration/rendering/requirement.spec.js",
"duration": 3089
"duration": 2782
},
{
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
"duration": 55361
"duration": 54797
},
{
"spec": "cypress/integration/rendering/sankey.spec.ts",
"duration": 7236
"duration": 6914
},
{
"spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
"duration": 26057
"duration": 20481
},
{
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
"duration": 48401
"duration": 38490
},
{
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
"duration": 30364
"duration": 30766
},
{
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
"duration": 16862
"duration": 16705
},
{
"spec": "cypress/integration/rendering/theme.spec.js",
"duration": 30553
"duration": 30928
},
{
"spec": "cypress/integration/rendering/timeline.spec.ts",
"duration": 8962
"duration": 8424
},
{
"spec": "cypress/integration/rendering/treemap.spec.ts",
"duration": 12486
"duration": 12533
},
{
"spec": "cypress/integration/rendering/xyChart.spec.js",
"duration": 21718
"duration": 21197
},
{
"spec": "cypress/integration/rendering/zenuml.spec.js",
"duration": 3882
"duration": 3455
}
]
}

View File

@@ -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.

View File

@@ -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.

View File

@@ -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.

View File

@@ -57,8 +57,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
- [GitHub Writer](https://github.com/ckeditor/github-writer)
- [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [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) ✅
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
- [MonsterWriter](https://www.monsterwriter.com/) ✅
- [Joplin](https://joplinapp.org) ✅
@@ -274,7 +272,6 @@ 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)
- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
<!--- cspell:ignore Blazorade HueHive --->

View File

@@ -651,8 +651,6 @@ gitGraph
Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
### Hiding all commit labels
Usage example:
```mermaid-example
@@ -761,106 +759,6 @@ config:
merge release
```
### Hiding only auto-generated commit hash labels
In many cases, you may want to show labels only for commits with custom IDs (like "Alpha", "v1.0", "Feature-X") while hiding the auto-generated hash labels (like "0-a1b2c3d", "1-x9y8z7w"). This is useful when you want to emphasize important commits while keeping the diagram clean.
You can achieve this by using the `showCommitHashLabel` keyword. By default its value is `true`. When set to `false`, only commits with custom IDs will show their labels, while commits with auto-generated hash IDs will be hidden.
**How it works:**
- **Auto-generated IDs**: Commits without a custom `id` are automatically assigned IDs in the format `seq-hash` (e.g., `0-a1b2c3d`, `1-x9y8z7w`). These follow the pattern of a number, a dash, and a random hash.
- **Custom IDs**: Commits with explicitly defined IDs using `commit id: "YourID"` are considered custom IDs.
- When `showCommitHashLabel: false`, only custom IDs are displayed.
Usage example - Hiding auto-generated hash labels:
```mermaid-example
---
config:
gitGraph:
showCommitHashLabel: false
---
gitGraph
commit id: "Alpha"
commit
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
commit
merge develop id: "Delta"
commit
```
```mermaid
---
config:
gitGraph:
showCommitHashLabel: false
---
gitGraph
commit id: "Alpha"
commit
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
commit
merge develop id: "Delta"
commit
```
In this example, only the commits with custom IDs ("Alpha", "Beta", "Gamma", "Delta") will show their labels. The commits without custom IDs (created with just `commit`) will not display their auto-generated hash labels.
Usage example - Showing all labels (default behavior):
```mermaid-example
---
config:
gitGraph:
showCommitHashLabel: true
---
gitGraph
commit id: "Alpha"
commit
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
commit
merge develop id: "Delta"
commit
```
```mermaid
---
config:
gitGraph:
showCommitHashLabel: true
---
gitGraph
commit id: "Alpha"
commit
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
commit
merge develop id: "Delta"
commit
```
In this example, all commits will show their labels, including both custom IDs and auto-generated hash IDs.
## Customizing main branch name
Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.

View File

@@ -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.

View File

@@ -63,21 +63,21 @@
]
},
"devDependencies": {
"@applitools/eyes-cypress": "^3.56.4",
"@argos-ci/cypress": "^6.2.2",
"@applitools/eyes-cypress": "^3.55.2",
"@argos-ci/cypress": "^6.1.3",
"@changesets/changelog-github": "^0.5.1",
"@changesets/cli": "^2.29.7",
"@cspell/eslint-plugin": "^9.3.0",
"@cypress/code-coverage": "^3.14.7",
"@cspell/eslint-plugin": "^8.19.4",
"@cypress/code-coverage": "^3.14.6",
"@eslint/js": "^9.26.0",
"@rollup/plugin-typescript": "^12.1.4",
"@types/cors": "^2.8.19",
"@types/express": "^5.0.5",
"@types/express": "^5.0.3",
"@types/js-yaml": "^4.0.9",
"@types/jsdom": "^21.1.7",
"@types/lodash": "^4.17.20",
"@types/mdast": "^4.0.4",
"@types/node": "^22.19.1",
"@types/node": "^22.18.6",
"@types/rollup-plugin-visualizer": "^5.0.3",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/spy": "^3.2.4",
@@ -88,23 +88,23 @@
"cors": "^2.8.5",
"cpy-cli": "^5.0.0",
"cross-env": "^7.0.3",
"cspell": "^9.3.2",
"cspell": "^9.2.1",
"cypress": "^14.5.4",
"cypress-image-snapshot": "^4.0.1",
"cypress-split": "^1.24.25",
"esbuild": "^0.25.12",
"cypress-split": "^1.24.23",
"esbuild": "^0.25.10",
"eslint": "^9.26.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-cypress": "^5.2.0",
"eslint-plugin-cypress": "^4.3.0",
"eslint-plugin-html": "^8.1.3",
"eslint-plugin-jest": "^29.0.1",
"eslint-plugin-jsdoc": "^61.1.12",
"eslint-plugin-jest": "^28.14.0",
"eslint-plugin-jsdoc": "^50.8.0",
"eslint-plugin-json": "^4.0.1",
"eslint-plugin-lodash": "^8.0.0",
"eslint-plugin-markdown": "^5.1.0",
"eslint-plugin-no-only-tests": "^3.3.0",
"eslint-plugin-tsdoc": "^0.4.0",
"eslint-plugin-unicorn": "^62.0.0",
"eslint-plugin-unicorn": "^59.0.1",
"express": "^5.1.0",
"globals": "^16.4.0",
"globby": "^14.1.0",
@@ -121,13 +121,13 @@
"prettier": "^3.6.2",
"prettier-plugin-jsdoc": "^1.3.3",
"rimraf": "^6.0.1",
"rollup-plugin-visualizer": "^6.0.5",
"start-server-and-test": "^2.1.3",
"rollup-plugin-visualizer": "^6.0.3",
"start-server-and-test": "^2.1.2",
"tslib": "^2.8.1",
"tsx": "^4.20.6",
"tsx": "^4.20.5",
"typescript": "~5.7.3",
"typescript-eslint": "^8.38.0",
"vite": "^7.0.8",
"vite": "^7.0.7",
"vite-plugin-istanbul": "^7.0.0",
"vitest": "^3.2.4"
},

View File

@@ -18,9 +18,7 @@
"elk",
"mermaid"
],
"scripts": {
"clean": "rimraf dist"
},
"scripts": {},
"repository": {
"type": "git",
"url": "https://github.com/mermaid-js/mermaid"

View File

@@ -19,9 +19,7 @@
"mermaid",
"layout"
],
"scripts": {
"clean": "rimraf dist"
},
"scripts": {},
"repository": {
"type": "git",
"url": "https://github.com/mermaid-js/mermaid"

View File

@@ -33,7 +33,7 @@
],
"license": "MIT",
"dependencies": {
"@zenuml/core": "^3.41.6"
"@zenuml/core": "^3.41.4"
},
"devDependencies": {
"mermaid": "workspace:^"

View File

@@ -77,9 +77,9 @@
"d3": "^7.9.0",
"d3-sankey": "^0.12.3",
"dagre-d3-es": "7.0.13",
"dayjs": "^1.11.19",
"dompurify": "^3.3.0",
"katex": "^0.16.25",
"dayjs": "^1.11.18",
"dompurify": "^3.2.5",
"katex": "^0.16.22",
"khroma": "^2.1.0",
"lodash-es": "^4.17.21",
"marked": "^16.3.0",
@@ -89,11 +89,11 @@
"uuid": "^11.1.0"
},
"devDependencies": {
"@adobe/jsonschema2md": "^8.0.8",
"@adobe/jsonschema2md": "^8.0.5",
"@iconify/types": "^2.0.0",
"@types/cytoscape": "^3.21.9",
"@types/cytoscape-fcose": "^2.2.5",
"@types/d3-sankey": "^0.12.5",
"@types/cytoscape-fcose": "^2.2.4",
"@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",
@@ -101,7 +101,7 @@
"@types/jsdom": "^21.1.7",
"@types/katex": "^0.16.7",
"@types/lodash-es": "^4.17.12",
"@types/micromatch": "^4.0.10",
"@types/micromatch": "^4.0.9",
"@types/stylis": "^4.2.7",
"@types/uuid": "^10.0.0",
"ajv": "^8.17.1",
@@ -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.14",
"typedoc": "^0.28.13",
"typedoc-plugin-markdown": "^4.8.1",
"typescript": "~5.7.3",
"unist-util-flatmap": "^1.0.0",

View File

@@ -1108,7 +1108,6 @@ export interface GitGraphDiagramConfig extends BaseDiagramConfig {
showBranches?: boolean;
rotateCommitLabel?: boolean;
parallelCommits?: boolean;
showCommitHashLabel?: boolean;
/**
* Controls whether or arrow markers in html code are absolute paths or anchors.
* This matters if you are using base tag settings.

View File

@@ -72,7 +72,7 @@ export const addDiagrams = () => {
}
);
if (injected.includeLargeFeatures) {
if (includeLargeFeatures) {
registerLazyLoadedDiagrams(flowchartElk, mindmap, architecture);
}

View File

@@ -1,58 +0,0 @@
import c4Db from '../c4Db.js';
import c4 from './c4Diagram.jison';
import { setConfig } from '../../../config.js';
setConfig({
securityLevel: 'strict',
});
describe.each([
['Component', 'component'],
['ComponentDb', 'component_db'],
['ComponentQueue', 'component_queue'],
['Component_Ext', 'external_component'],
['ComponentDb_Ext', 'external_component_db'],
['ComponentQueue_Ext', 'external_component_queue'],
])('parsing a C4 %s', function (macroName, elementName) {
beforeEach(function () {
c4.parser.yy = c4Db;
c4.parser.yy.clear();
});
it('should parse a C4 diagram with one Component correctly', function () {
c4.parser.parse(`C4Component
title Component diagram for Internet Banking Component
${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")`);
const yy = c4.parser.yy;
const shapes = yy.getC4ShapeArray();
expect(shapes.length).toBe(1);
const onlyShape = shapes[0];
expect(onlyShape).toMatchObject({
alias: 'ComponentAA',
descr: {
text: 'Allows customers to view information about their bank accounts, and make payments.',
},
label: {
text: 'Internet Banking Component',
},
techn: {
text: 'Technology',
},
typeC4Shape: {
text: elementName,
},
});
});
it('should handle a trailing whitespaces after Component', function () {
const whitespace = ' ';
const rendered = c4.parser.parse(`C4Component${whitespace}
title Component diagram for Internet Banking Component${whitespace}
${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")${whitespace}`);
expect(rendered).toBe(true);
});
});

View File

@@ -158,10 +158,10 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
"UpdateRelStyle" { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';}
"UpdateLayoutConfig" { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';}
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>> return "EOF_IN_STRUCT";
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,] { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(] { this.begin("attribute"); }
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)] { this.popState();this.popState();}
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>> return "EOF_IN_STRUCT";
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,] { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(] { this.begin("attribute"); }
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)] { this.popState();this.popState();}
<attribute>",," { return 'ATTRIBUTE_EMPTY';}
<attribute>"," { }

View File

@@ -70,31 +70,6 @@ describe('Sanitize text', () => {
});
expect(result).not.toContain('javascript:alert(1)');
});
it('should allow HTML tags in sandbox mode', () => {
const htmlStr = '<p>This is a <strong>bold</strong> text</p>';
const result = sanitizeText(htmlStr, {
securityLevel: 'sandbox',
flowchart: { htmlLabels: true },
});
expect(result).toContain('<p>');
expect(result).toContain('<strong>');
expect(result).toContain('</strong>');
expect(result).toContain('</p>');
});
it('should remove script tags in sandbox mode', () => {
const maliciousStr = '<p>Hello <script>alert(1)</script> world</p>';
const result = sanitizeText(maliciousStr, {
securityLevel: 'sandbox',
flowchart: { htmlLabels: true },
});
expect(result).not.toContain('<script>');
expect(result).not.toContain('alert(1)');
expect(result).toContain('<p>');
expect(result).toContain('Hello');
expect(result).toContain('world');
});
});
describe('generic parser', () => {

View File

@@ -66,7 +66,7 @@ export const removeScript = (txt: string): string => {
const sanitizeMore = (text: string, config: MermaidConfig) => {
if (config.flowchart?.htmlLabels !== false) {
const level = config.securityLevel;
if (level === 'antiscript' || level === 'strict' || level === 'sandbox') {
if (level === 'antiscript' || level === 'strict') {
text = removeScript(text);
} else if (level !== 'loose') {
text = breakToPlaceholder(text);
@@ -333,7 +333,7 @@ const renderKatexUnsanitized = async (text: string, config: MermaidConfig): Prom
return text.replace(katexRegex, 'MathML is unsupported in this environment.');
}
if (injected.includeLargeFeatures) {
if (includeLargeFeatures) {
const { default: katex } = await import('katex');
const outputMode =
config.forceLegacyMathML || (!isMathMLSupported() && config.legacyMathML)

View File

@@ -289,15 +289,11 @@ const drawCommitLabel = (
commitPosition: CommitPositionOffset,
pos: number
) => {
const hasCustomId = commit.customId || !/^\d+-[\dA-Za-z]+$/.exec(commit.id);
const shouldShowLabel =
if (
commit.type !== commitType.CHERRY_PICK &&
((commit.customId && commit.type === commitType.MERGE) || commit.type !== commitType.MERGE) &&
DEFAULT_GITGRAPH_CONFIG?.showCommitLabel &&
(DEFAULT_GITGRAPH_CONFIG?.showCommitHashLabel || hasCustomId);
if (shouldShowLabel) {
DEFAULT_GITGRAPH_CONFIG?.showCommitLabel
) {
const wrapper = gLabels.append('g');
const labelBkg = wrapper.insert('rect').attr('class', 'commit-label-bkg');
const text = wrapper

View File

@@ -1,7 +1,8 @@
import type { InfoFields, InfoDB } from './infoTypes.js';
import packageJson from '../../../package.json' assert { type: 'json' };
export const DEFAULT_INFO_DB: InfoFields = {
version: injected.version + (injected.includeLargeFeatures ? '' : '-tiny'),
version: packageJson.version + (includeLargeFeatures ? '' : '-tiny'),
} as const;
export const getVersion = (): string => DEFAULT_INFO_DB.version;

View File

@@ -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');
});
});
});

View File

@@ -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);
}
}

View File

@@ -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,

View File

@@ -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;}
;

View File

@@ -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

View File

@@ -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');
});
});
});

View File

@@ -1,6 +1,6 @@
import type { MarkdownOptions } from 'vitepress';
import { defineConfig } from 'vitepress';
import packageJson from '../../../package.json' with { type: 'json' };
import packageJson from '../../../package.json' assert { type: 'json' };
import { addCanonicalUrls } from './canonical-urls.js';
import MermaidExample from './mermaid-markdown-all.js';

View File

@@ -52,8 +52,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
- [GitHub Writer](https://github.com/ckeditor/github-writer)
- [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [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) ✅
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
- [MonsterWriter](https://www.monsterwriter.com/) ✅
- [Joplin](https://joplinapp.org) ✅
@@ -269,7 +267,6 @@ 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)
- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
<!--- cspell:ignore Blazorade HueHive --->

View File

@@ -21,19 +21,19 @@
"font-awesome": "^4.7.0",
"jiti": "^2.4.2",
"mermaid": "workspace:^",
"vue": "^3.5.24"
"vue": "^3.5.21"
},
"devDependencies": {
"@iconify-json/carbon": "^1.2.14",
"@unocss/reset": "^66.5.7",
"@vite-pwa/vitepress": "^1.0.1",
"@vitejs/plugin-vue": "^6.0.2",
"@iconify-json/carbon": "^1.2.13",
"@unocss/reset": "^66.5.1",
"@vite-pwa/vitepress": "^1.0.0",
"@vitejs/plugin-vue": "^6.0.1",
"fast-glob": "^3.3.3",
"https-localhost": "^4.7.1",
"pathe": "^2.0.3",
"unocss": "^66.5.7",
"unplugin-vue-components": "^28.8.0",
"vite": "^7.0.8",
"unocss": "^66.5.1",
"unplugin-vue-components": "^28.4.1",
"vite": "^7.0.7",
"vite-plugin-pwa": "^1.0.3",
"vitepress": "1.6.4",
"workbox-window": "^7.3.0"

View File

@@ -407,8 +407,6 @@ gitGraph
Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
### Hiding all commit labels
Usage example:
```mermaid-example
@@ -464,66 +462,6 @@ config:
merge release
```
### Hiding only auto-generated commit hash labels
In many cases, you may want to show labels only for commits with custom IDs (like "Alpha", "v1.0", "Feature-X") while hiding the auto-generated hash labels (like "0-a1b2c3d", "1-x9y8z7w"). This is useful when you want to emphasize important commits while keeping the diagram clean.
You can achieve this by using the `showCommitHashLabel` keyword. By default its value is `true`. When set to `false`, only commits with custom IDs will show their labels, while commits with auto-generated hash IDs will be hidden.
**How it works:**
- **Auto-generated IDs**: Commits without a custom `id` are automatically assigned IDs in the format `seq-hash` (e.g., `0-a1b2c3d`, `1-x9y8z7w`). These follow the pattern of a number, a dash, and a random hash.
- **Custom IDs**: Commits with explicitly defined IDs using `commit id: "YourID"` are considered custom IDs.
- When `showCommitHashLabel: false`, only custom IDs are displayed.
Usage example - Hiding auto-generated hash labels:
```mermaid-example
---
config:
gitGraph:
showCommitHashLabel: false
---
gitGraph
commit id: "Alpha"
commit
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
commit
merge develop id: "Delta"
commit
```
In this example, only the commits with custom IDs ("Alpha", "Beta", "Gamma", "Delta") will show their labels. The commits without custom IDs (created with just `commit`) will not display their auto-generated hash labels.
Usage example - Showing all labels (default behavior):
```mermaid-example
---
config:
gitGraph:
showCommitHashLabel: true
---
gitGraph
commit id: "Alpha"
commit
commit
branch develop
commit id: "Beta"
commit
checkout main
commit id: "Gamma"
commit
merge develop id: "Delta"
commit
```
In this example, all commits will show their labels, including both custom IDs and auto-generated hash IDs.
## Customizing main branch name
Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.

View File

@@ -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.

View File

@@ -7,6 +7,7 @@ import { select } from 'd3';
import { compile, serialize, stringify } from 'stylis';
import DOMPurify from 'dompurify';
import isEmpty from 'lodash-es/isEmpty.js';
import packageJson from '../package.json' assert { type: 'json' };
import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
import assignWithDepth from './assignWithDepth.js';
import * as configApi from './config.js';
@@ -420,12 +421,12 @@ const render = async function (
// -------------------------------------------------------------------------------
// Draw the diagram with the renderer
try {
await diag.renderer.draw(text, id, injected.version, diag);
await diag.renderer.draw(text, id, packageJson.version, diag);
} catch (e) {
if (config.suppressErrorRendering) {
removeTempElements();
} else {
errorRenderer.draw(text, id, injected.version);
errorRenderer.draw(text, id, packageJson.version);
}
throw e;
}

View File

@@ -42,7 +42,7 @@ const registerDefaultLayoutLoaders = () => {
name: 'dagre',
loader: async () => await import('./layout-algorithms/dagre/index.js'),
},
...(injected.includeLargeFeatures
...(includeLargeFeatures
? [
{
name: 'cose-bilkent',

View File

@@ -892,9 +892,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
parallelCommits:
type: boolean
default: false
showCommitHashLabel:
type: boolean
default: true
# YAML anchor reference, don't use $ref since ajv doesn't load defaults
arrowMarkerAbsolute: *arrowMarkerAbsolute

View File

@@ -1,5 +1,2 @@
// eslint-disable-next-line no-var
declare var injected: {
version: string;
includeLargeFeatures: boolean;
};
declare var includeLargeFeatures: boolean;

View File

@@ -23,7 +23,6 @@ export interface ParticipantMetaData {
| 'database'
| 'collections'
| 'queue';
alias?: string;
}
export interface EdgeMetaData {

3884
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -35,8 +35,7 @@ export default defineConfig({
},
define: {
// Needs to be string
'injected.includeLargeFeatures': 'true',
includeLargeFeatures: 'true',
'import.meta.vitest': 'undefined',
packageVersion: "'0.0.0'",
},
});