mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-24 14:44:06 +01:00
Compare commits
1 Commits
feat/gitgr
...
sidharthv9
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fed9d3568d |
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: Prevent HTML tags from being escaped in sandbox label rendering
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
feat: add alias support for new participant syntax of sequence diagrams
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: Support ComponentQueue_Ext to prevent parsing error
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': minor
|
||||
---
|
||||
|
||||
feat: Add showCommitHashLabel config to hide auto-generated commit hash labels
|
||||
@@ -1,5 +1,3 @@
|
||||
!viewbox
|
||||
# It should be viewBox
|
||||
# This file contains coding related terms
|
||||
ALPHANUM
|
||||
antiscript
|
||||
|
||||
@@ -64,7 +64,6 @@ rscratch
|
||||
shiki
|
||||
Slidev
|
||||
sparkline
|
||||
speccharts
|
||||
sphinxcontrib
|
||||
ssim
|
||||
stylis
|
||||
|
||||
@@ -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
|
||||
|
||||
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@b4733b9419fd47bbfa1807b15627e17cd70b5b22
|
||||
uses: peter-evans/create-pull-request@915d841dae6a4f191bb78faf61a257411d7be4d2
|
||||
with:
|
||||
add-paths: |
|
||||
cypress/timings.json
|
||||
|
||||
1
.github/workflows/release.yml
vendored
1
.github/workflows/release.yml
vendored
@@ -42,4 +42,5 @@ jobs:
|
||||
publish: pnpm changeset:publish
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
NPM_CONFIG_PROVENANCE: true
|
||||
|
||||
2
.github/workflows/scorecard.yml
vendored
2
.github/workflows/scorecard.yml
vendored
@@ -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
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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")
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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 } }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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 --->
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
34
package.json
34
package.json
@@ -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"
|
||||
},
|
||||
|
||||
@@ -18,9 +18,7 @@
|
||||
"elk",
|
||||
"mermaid"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "rimraf dist"
|
||||
},
|
||||
"scripts": {},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/mermaid-js/mermaid"
|
||||
|
||||
@@ -19,9 +19,7 @@
|
||||
"mermaid",
|
||||
"layout"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "rimraf dist"
|
||||
},
|
||||
"scripts": {},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/mermaid-js/mermaid"
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@zenuml/core": "^3.41.6"
|
||||
"@zenuml/core": "^3.41.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mermaid": "workspace:^"
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -72,7 +72,7 @@ export const addDiagrams = () => {
|
||||
}
|
||||
);
|
||||
|
||||
if (injected.includeLargeFeatures) {
|
||||
if (includeLargeFeatures) {
|
||||
registerLazyLoadedDiagrams(flowchartElk, mindmap, architecture);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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>"," { }
|
||||
|
||||
@@ -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', () => {
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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 --->
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -42,7 +42,7 @@ const registerDefaultLayoutLoaders = () => {
|
||||
name: 'dagre',
|
||||
loader: async () => await import('./layout-algorithms/dagre/index.js'),
|
||||
},
|
||||
...(injected.includeLargeFeatures
|
||||
...(includeLargeFeatures
|
||||
? [
|
||||
{
|
||||
name: 'cose-bilkent',
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
5
packages/mermaid/src/type.d.ts
vendored
5
packages/mermaid/src/type.d.ts
vendored
@@ -1,5 +1,2 @@
|
||||
// eslint-disable-next-line no-var
|
||||
declare var injected: {
|
||||
version: string;
|
||||
includeLargeFeatures: boolean;
|
||||
};
|
||||
declare var includeLargeFeatures: boolean;
|
||||
|
||||
@@ -23,7 +23,6 @@ export interface ParticipantMetaData {
|
||||
| 'database'
|
||||
| 'collections'
|
||||
| 'queue';
|
||||
alias?: string;
|
||||
}
|
||||
|
||||
export interface EdgeMetaData {
|
||||
|
||||
3884
pnpm-lock.yaml
generated
3884
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -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'",
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user