marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-10 02:49:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge from release

Browse Source
This commit is contained in:
Ashish Jain
2024-08-22 14:45:47 +02:00
parent 8d8b6c1c33 53bff117aa
commit 3dc0af3159
32 changed files with 249 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.cspell/code-terms.txt
View File

@@ -120,6 +120,8 @@ SUBROUTINEEND
SUBROUTINESTART SUBROUTINESTART
Subschemas Subschemas
substr substr
SVGG
SVGSVG
TAGEND TAGEND
TAGSTART TAGSTART
techn techn

1
.cspell/libraries.txt
View File

@@ -58,6 +58,7 @@ rehype
roughjs roughjs
rscratch rscratch
shiki shiki
Slidev
sparkline sparkline
sphinxcontrib sphinxcontrib
ssim ssim

98
cypress/integration/rendering/flowchart-handDrawn.spec.js
View File

@@ -12,7 +12,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -30,7 +30,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -47,7 +47,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -62,7 +62,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[\\iPhone\\] C -->|Two| E[\\iPhone\\]
C -->|Three| F[Car] C -->|Three| F[Car]
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -78,7 +78,7 @@ describe('Flowchart HandDrawn', () => {
classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
class 1A,1B,D,E processHead class 1A,1B,D,E processHead
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -107,7 +107,7 @@ describe('Flowchart HandDrawn', () => {
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -178,7 +178,7 @@ describe('Flowchart HandDrawn', () => {
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -187,7 +187,7 @@ describe('Flowchart HandDrawn', () => {
` `
graph TB;subgraph "number as labels";1;end; graph TB;subgraph "number as labels";1;end;
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -199,7 +199,7 @@ describe('Flowchart HandDrawn', () => {
a1-->a2 a1-->a2
end end
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -211,7 +211,7 @@ describe('Flowchart HandDrawn', () => {
a1-->a2 a1-->a2
end end
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -246,7 +246,7 @@ describe('Flowchart HandDrawn', () => {
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -348,7 +348,7 @@ describe('Flowchart HandDrawn', () => {
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
); );
}); });
@@ -364,7 +364,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
listUrl: false, listUrl: false,
listId: 'color styling', listId: 'color styling',
fontFamily: 'courier', fontFamily: 'courier',
@@ -390,7 +390,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
listUrl: false, listUrl: false,
listId: 'color styling', listId: 'color styling',
fontFamily: 'courier', fontFamily: 'courier',
@@ -411,7 +411,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -435,7 +435,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -457,7 +457,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -471,7 +471,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -485,7 +485,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -500,7 +500,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -527,7 +527,7 @@ describe('Flowchart HandDrawn', () => {
class A someclass;`, class A someclass;`,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -544,7 +544,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[fa:fa-car Car]
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
); );
}); });
@@ -560,7 +560,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { rankSpacing: '100' }, flowchart: { rankSpacing: '100' },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -578,7 +578,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -603,7 +603,7 @@ describe('Flowchart HandDrawn', () => {
click E "notes://do-your-thing/id" "other protocol test" click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, securityLevel: 'loose', fontFamily: 'courier' } { look: 'handDrawn', handDrawnSeed: 1, securityLevel: 'loose', fontFamily: 'courier' }
); );
}); });
@@ -623,7 +623,7 @@ describe('Flowchart HandDrawn', () => {
click B "index.html#link-clicked" "link test" click B "index.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } } { look: 'handDrawn', handDrawnSeed: 1, flowchart: { htmlLabels: true } }
); );
}); });
@@ -645,7 +645,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -664,7 +664,7 @@ describe('Flowchart HandDrawn', () => {
class A myClass1 class A myClass1
class D myClass2 class D myClass2
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } } { look: 'handDrawn', handDrawnSeed: 1, flowchart: { htmlLabels: true } }
); );
}); });
@@ -682,7 +682,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -711,7 +711,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -728,7 +728,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -752,7 +752,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: false }, flowchart: { htmlLabels: false },
fontFamily: 'courier', fontFamily: 'courier',
} }
@@ -769,7 +769,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[fa:fa-car Car]
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { diagramPadding: 0 } } { look: 'handDrawn', handDrawnSeed: 1, flowchart: { diagramPadding: 0 } }
); );
}); });
@@ -778,7 +778,7 @@ describe('Flowchart HandDrawn', () => {
`graph TD `graph TD
A[Christmas] A[Christmas]
`, `,
{ look: 'handDrawn', handDrawnSeed: 0 } { look: 'handDrawn', handDrawnSeed: 1 }
); );
}); });
@@ -796,7 +796,7 @@ describe('Flowchart HandDrawn', () => {
C -----> E4 C -----> E4
C ======> E5 C ======> E5
`, `,
{ look: 'handDrawn', handDrawnSeed: 0 } { look: 'handDrawn', handDrawnSeed: 1 }
); );
}); });
it('FDH36: should render escaped without html labels', () => { it('FDH36: should render escaped without html labels', () => {
@@ -804,7 +804,7 @@ describe('Flowchart HandDrawn', () => {
`graph TD `graph TD
a["<strong>Haiya</strong>"]-->b a["<strong>Haiya</strong>"]-->b
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, htmlLabels: false, flowchart: { htmlLabels: false } } { look: 'handDrawn', handDrawnSeed: 1, htmlLabels: false, flowchart: { htmlLabels: false } }
); );
}); });
it('FDH37: should render non-escaped with html labels', () => { it('FDH37: should render non-escaped with html labels', () => {
@@ -814,7 +814,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
htmlLabels: true, htmlLabels: true,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
@@ -830,7 +830,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[fa:fa-car Car]
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: true } } { look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: true } }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
@@ -853,7 +853,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[fa:fa-car Car]
`, `,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: false } } { look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: false } }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
// const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
@@ -874,7 +874,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
htmlLabels: true, htmlLabels: true,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
@@ -904,7 +904,7 @@ describe('Flowchart HandDrawn', () => {
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
htmlLabels: true, htmlLabels: true,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
@@ -919,7 +919,7 @@ graph TD
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
htmlLabels: true, htmlLabels: true,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
@@ -937,7 +937,7 @@ graph TD
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
htmlLabels: true, htmlLabels: true,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
@@ -977,7 +977,7 @@ graph TD
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
htmlLabels: true, htmlLabels: true,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
@@ -999,7 +999,7 @@ graph TD
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
htmlLabels: true, htmlLabels: true,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
@@ -1016,7 +1016,7 @@ graph TD
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
htmlLabels: true, htmlLabels: true,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
@@ -1027,12 +1027,12 @@ graph TD
imgSnapshotTest( imgSnapshotTest(
` `
graph TD graph TD
classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
hello --> default hello --> default
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
htmlLabels: true, htmlLabels: true,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
@@ -1051,7 +1051,7 @@ graph TD
`, `,
{ {
look: 'handDrawn', look: 'handDrawn',
handDrawnSeed: 0, handDrawnSeed: 1,
flowchart: { htmlLabels: true }, flowchart: { htmlLabels: true },
securityLevel: 'loose', securityLevel: 'loose',
} }

21
cypress/platform/knsv2.html
View File

@@ -84,17 +84,20 @@
<div class="flex"> <div class="flex">
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
--- ---
config: title: hello2
look: handDrawn config:
layout: elk look: handDrawn
elk: layout: elk
elk:
nodePlacementStrategy: BRANDES_KOEPF nodePlacementStrategy: BRANDES_KOEPF
--- ---
flowchart TB flowchart LR
%% A --> C A[Start] --Some text--> B(Continue)
B -- sdf sdf --> C{"Evaluate"} B --> C{Evaluate}
C --> n4["salkdfjh akljd lkasdjf lkashj lksjadf klasdh"] C -- One --> D[Option 1]
C --> F C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre </pre

6
docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
View File

@@ -16,7 +16,7 @@
#### Defined in #### Defined in
[packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25) [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
--- ---
@@ -26,7 +26,7 @@
#### Defined in #### Defined in
[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24) [packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
--- ---
@@ -36,4 +36,4 @@
#### Defined in #### Defined in
[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23) [packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)

2
docs/config/setup/interfaces/mermaid.ParseOptions.md
View File

@@ -19,4 +19,4 @@ The `parseError` function will not be called.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L43) [packages/mermaid/src/types.ts:47](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L47)

2
docs/config/setup/interfaces/mermaid.ParseResult.md
View File

@@ -18,4 +18,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:50](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L50) [packages/mermaid/src/types.ts:54](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L54)

6
docs/config/setup/interfaces/mermaid.RenderResult.md
View File

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L73) [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77)
--- ---
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63) [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
--- ---
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59) [packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)

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

@@ -59,6 +59,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
- [MonsterWriter](https://www.monsterwriter.com/) ✅ - [MonsterWriter](https://www.monsterwriter.com/) ✅
- [Joplin](https://joplinapp.org) ✅ - [Joplin](https://joplinapp.org) ✅
- [LiveBook](https://livebook.dev) ✅ - [LiveBook](https://livebook.dev) ✅
- [Slidev](https://sli.dev) ✅
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅ - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅ - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
- [Mermerd](https://github.com/KarnerTh/mermerd) - [Mermerd](https://github.com/KarnerTh/mermerd)

2
docs/ecosystem/mermaid-chart.md
View File

@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
<br /> <br />
<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
## About ## About

24
docs/news/blog.md
View File

@@ -6,6 +6,30 @@
# Blog # Blog
## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
22 July 2024 · 5 mins
The Mermaid AI chat interface
## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
8 July 2024 · 6 mins
Sequence diagrams are important for communicating complex systems in a clear and concise manner.
## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
2 July 2024 · 3 mins
How to Use the New Comments Feature in Mermaid Chart
## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
21 May 2024 · 4 mins
It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/) ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
7 May 2024 · 5 mins 7 May 2024 · 5 mins

2
docs/syntax/gantt.md
View File

@@ -172,7 +172,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays". The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code. These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
#### Weekend (v\<MERMAID_RELEASE_VERSION>+) #### Weekend (v\11.0.0+)
When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday. When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`. To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.

2
docs/syntax/gitgraph.md
View File

@@ -918,7 +918,7 @@ Usage example:
commit commit
``` ```
### Bottom to Top (`BT:`) (v\<MERMAID_RELEASE_VERSION>+) ### Bottom to Top (`BT:`) (v11.0.0+)
In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side. In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.

2
docs/syntax/packet.md
View File

@@ -4,7 +4,7 @@
> >
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md). > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
# Packet Diagram (v\<MERMAID_RELEASE_VERSION>+) # Packet Diagram (v11.0.0+)
## Introduction ## Introduction

24
docs/syntax/sequenceDiagram.md
View File

@@ -208,18 +208,18 @@ Messages can be of two displayed either solid or with a dotted line.
There are ten types of arrows currently supported: There are ten types of arrows currently supported:
| Type | Description | | Type | Description |
| -------- | ------------------------------------------------------------------------ | | -------- | ---------------------------------------------------- |
| `->` | Solid line without arrow | | `->` | Solid line without arrow |
| `-->` | Dotted line without arrow | | `-->` | Dotted line without arrow |
| `->>` | Solid line with arrowhead | | `->>` | Solid line with arrowhead |
| `-->>` | Dotted line with arrowhead | | `-->>` | Dotted line with arrowhead |
| `<<->>` | Solid line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) | | `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) |
| `<<-->>` | Dotted line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) | | `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
| `-x` | Solid line with a cross at the end | | `-x` | Solid line with a cross at the end |
| `--x` | Dotted line with a cross at the end. | | `--x` | Dotted line with a cross at the end. |
| `-)` | Solid line with an open arrow at the end (async) | | `-)` | Solid line with an open arrow at the end (async) |
| `--)` | Dotted line with a open arrow at the end (async) | | `--)` | Dotted line with a open arrow at the end (async) |
## Activations ## Activations

4
packages/mermaid-layout-elk/src/render.ts
View File

@@ -6,7 +6,6 @@ import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
export const render = async ( export const render = async (
data4Layout: LayoutData, data4Layout: LayoutData,
svg: SVG, svg: SVG,
element: any,
{ {
common, common,
getConfig, getConfig,
@@ -377,6 +376,7 @@ export const render = async (
// calculate start and end points of the edge, note that the source and target // calculate start and end points of the edge, note that the source and target
// can be modified for shapes that have ports // can be modified for shapes that have ports
// @ts-ignore TODO: fix this
const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir); const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
log.debug('abc78 source and target', source, target); log.debug('abc78 source and target', source, target);
// Add the edge to the graph // Add the edge to the graph
@@ -739,7 +739,7 @@ export const render = async (
// @ts-ignore - ELK is not typed // @ts-ignore - ELK is not typed
const elk = new ELK(); const elk = new ELK();
const element = svg.select('g');
// Add the arrowheads to the svg // Add the arrowheads to the svg
insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId); insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);

8
packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
View File

@@ -2,7 +2,7 @@ import { select } from 'd3';
import { getConfig } from '../../diagram-api/diagramAPI.js'; import { getConfig } from '../../diagram-api/diagramAPI.js';
import type { DiagramStyleClassDef } from '../../diagram-api/types.js'; import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
import { log } from '../../logger.js'; import { log } from '../../logger.js';
import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js'; import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js'; import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js'; import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
import type { LayoutData } from '../../rendering-util/types.js'; import type { LayoutData } from '../../rendering-util/types.js';
@@ -35,8 +35,8 @@ export const draw = async function (text: string, id: string, _version: string,
log.debug('Before getData: '); log.debug('Before getData: ');
const data4Layout = diag.db.getData() as LayoutData; const data4Layout = diag.db.getData() as LayoutData;
log.debug('Data: ', data4Layout); log.debug('Data: ', data4Layout);
// Create the root SVG - the element is the div containing the SVG element // Create the root SVG
const { element, svg } = getDiagramElements(id, securityLevel); const svg = getDiagramElement(id, securityLevel);
const direction = getDirection(); const direction = getDirection();
data4Layout.type = diag.type; data4Layout.type = diag.type;
@@ -53,7 +53,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.diagramId = id; data4Layout.diagramId = id;
log.debug('REF1:', data4Layout); log.debug('REF1:', data4Layout);
await render(data4Layout, svg, element); await render(data4Layout, svg);
const padding = data4Layout.config.flowchart?.padding ?? 8; const padding = data4Layout.config.flowchart?.padding ?? 8;
utils.insertTitle( utils.insertTitle(
svg, svg,

8
packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View File

@@ -1,7 +1,7 @@
import { getConfig } from '../../diagram-api/diagramAPI.js'; import { getConfig } from '../../diagram-api/diagramAPI.js';
import type { DiagramStyleClassDef } from '../../diagram-api/types.js'; import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
import { log } from '../../logger.js'; import { log } from '../../logger.js';
import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js'; import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
import { render } from '../../rendering-util/render.js'; import { render } from '../../rendering-util/render.js';
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js'; import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
import type { LayoutData } from '../../rendering-util/types.js'; import type { LayoutData } from '../../rendering-util/types.js';
@@ -55,7 +55,7 @@ export const draw = async function (text: string, id: string, _version: string,
const data4Layout = diag.db.getData() as LayoutData; const data4Layout = diag.db.getData() as LayoutData;
// Create the root SVG - the element is the div containing the SVG element // Create the root SVG - the element is the div containing the SVG element
const { element, svg } = getDiagramElements(id, securityLevel); const svg = getDiagramElement(id, securityLevel);
data4Layout.type = diag.type; data4Layout.type = diag.type;
data4Layout.layoutAlgorithm = layout; data4Layout.layoutAlgorithm = layout;
@@ -67,10 +67,10 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.markers = ['barb']; data4Layout.markers = ['barb'];
data4Layout.diagramId = id; data4Layout.diagramId = id;
// console.log('REF1:', data4Layout); // console.log('REF1:', data4Layout);
await render(data4Layout, svg, element); await render(data4Layout, svg);
const padding = 8; const padding = 8;
utils.insertTitle( utils.insertTitle(
element, svg,
'statediagramTitleText', 'statediagramTitleText',
conf?.titleTopMargin ?? 25, conf?.titleTopMargin ?? 25,
diag.db.getDiagramTitle() diag.db.getDiagramTitle()

14
packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="-mt-6 mb-8">
<a
href="https://www.producthunt.com/posts/mermaid-ai-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;ai&#0045;2"
target="_blank"
><img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=465568&theme=light"
alt="Mermaid&#0032;AI - Maximize&#0032;your&#0032;diagramming&#0032;efficiency&#0032;with&#0032;Mermaid&#0032;AI | Product Hunt"
style="width: 250px; height: 54px"
width="250"
height="54"
/></a>
</div>
</template>

81
packages/mermaid/src/docs/.vitepress/components/TopBar.vue
View File

@@ -1,26 +1,65 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
interface Taglines {
label: string;
url: string;
}
const taglines: Taglines[] = [
{
label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor',
},
{
label: 'Diagram live with teammates in Mermaid Chart',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams',
},
{
label: 'Skip the rough draft with Mermaid AI in Mermaid Chart',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=mermaid_ai',
},
];
let index = ref(Math.floor(Math.random() * taglines.length));
onMounted(() => {
setInterval(() => {
index.value = (index.value + 1) % taglines.length;
}, 60_000);
});
</script>
<template> <template>
<div <div class="mb-4 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex p-1">
class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white" <p class="w-full tracking-wide fade-text">
> <transition name="fade" mode="out-in">
<p class="flex-grow text-center tracking-wide text-text"> <a
<a :key="index"
href="https://www.mermaidchart.com/landing" :href="taglines[index].url"
target="_blank" target="_blank"
class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick" class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick"
>
<span class="text-primary-50 font-semibold">{{
[
'Try diagramming with ChatGPT at Mermaid Chart',
'Try Mermaid’s Visual Editor at Mermaid Chart',
'Enjoy live collaboration with teammates at Mermaid Chart',
][Math.floor(Math.random() * 3)]
}}</span>
<button
class="ml-4 rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
> >
Try it now <span class="font-semibold">{{ taglines[index].label }}</span>
</button> <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide">
</a> Try it now
</button>
</a>
</transition>
</p> </p>
</div> </div>
</template> </template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
opacity: 1;
}
</style>

7
packages/mermaid/src/docs/.vitepress/theme/index.ts
View File

@@ -11,11 +11,11 @@ import HomePage from '../components/HomePage.vue';
import TopBar from '../components/TopBar.vue'; import TopBar from '../components/TopBar.vue';
import { getRedirect } from './redirect.js'; import { getRedirect } from './redirect.js';
// @ts-ignore Type not available // @ts-ignore Type not available
import { h } from 'vue';
import Theme from 'vitepress/theme';
import '../style/main.css';
import 'uno.css'; import 'uno.css';
import type { EnhanceAppContext } from 'vitepress'; import type { EnhanceAppContext } from 'vitepress';
import Theme from 'vitepress/theme';
import { h } from 'vue';
import '../style/main.css';
export default { export default {
...DefaultTheme, ...DefaultTheme,
@@ -24,6 +24,7 @@ export default {
// Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar. // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
'home-hero-before': () => h(TopBar), 'home-hero-before': () => h(TopBar),
'home-features-after': () => h(HomePage), 'home-features-after': () => h(HomePage),
'doc-before': () => h(TopBar),
}); });
}, },
enhanceApp({ app, router }: EnhanceAppContext) { enhanceApp({ app, router }: EnhanceAppContext) {

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

@@ -54,6 +54,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
- [MonsterWriter](https://www.monsterwriter.com/) ✅ - [MonsterWriter](https://www.monsterwriter.com/) ✅
- [Joplin](https://joplinapp.org) ✅ - [Joplin](https://joplinapp.org) ✅
- [LiveBook](https://livebook.dev) ✅ - [LiveBook](https://livebook.dev) ✅
- [Slidev](https://sli.dev) ✅
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅ - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅ - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
- [Mermerd](https://github.com/KarnerTh/mermerd) - [Mermerd](https://github.com/KarnerTh/mermerd)

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

@@ -6,7 +6,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
<br /> <br />
<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
## About ## About

24
packages/mermaid/src/docs/news/blog.md
View File

@@ -1,5 +1,29 @@
# Blog # Blog
## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
22 July 2024 · 5 mins
The Mermaid AI chat interface
## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
8 July 2024 · 6 mins
Sequence diagrams are important for communicating complex systems in a clear and concise manner.
## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
2 July 2024 · 3 mins
How to Use the New Comments Feature in Mermaid Chart
## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
21 May 2024 · 4 mins
It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/) ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
7 May 2024 · 5 mins 7 May 2024 · 5 mins

2
packages/mermaid/src/docs/syntax/gantt.md
View File

@@ -114,7 +114,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays". The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code. These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
#### Weekend (v\<MERMAID_RELEASE_VERSION>+) #### Weekend (v\11.0.0+)
When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday. When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`. To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.

2
packages/mermaid/src/docs/syntax/gitgraph.md
View File

@@ -571,7 +571,7 @@ Usage example:
commit commit
``` ```
### Bottom to Top (`BT:`) (v<MERMAID_RELEASE_VERSION>+) ### Bottom to Top (`BT:`) (v11.0.0+)
In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side. In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.

2
packages/mermaid/src/docs/syntax/packet.md
View File

@@ -1,4 +1,4 @@
# Packet Diagram (v<MERMAID_RELEASE_VERSION>+) # Packet Diagram (v11.0.0+)
## Introduction ## Introduction

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

@@ -143,18 +143,18 @@ Messages can be of two displayed either solid or with a dotted line.
There are ten types of arrows currently supported: There are ten types of arrows currently supported:
| Type | Description | | Type | Description |
| -------- | ----------------------------------------------------------------------- | | -------- | ---------------------------------------------------- |
| `->` | Solid line without arrow | | `->` | Solid line without arrow |
| `-->` | Dotted line without arrow | | `-->` | Dotted line without arrow |
| `->>` | Solid line with arrowhead | | `->>` | Solid line with arrowhead |
| `-->>` | Dotted line with arrowhead | | `-->>` | Dotted line with arrowhead |
| `<<->>` | Solid line with bidirectional arrowheads (v<MERMAID_RELEASE_VERSION>+) | | `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) |
| `<<-->>` | Dotted line with bidirectional arrowheads (v<MERMAID_RELEASE_VERSION>+) | | `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
| `-x` | Solid line with a cross at the end | | `-x` | Solid line with a cross at the end |
| `--x` | Dotted line with a cross at the end. | | `--x` | Dotted line with a cross at the end. |
| `-)` | Solid line with an open arrow at the end (async) | | `-)` | Solid line with an open arrow at the end (async) |
| `--)` | Dotted line with a open arrow at the end (async) | | `--)` | Dotted line with a open arrow at the end (async) |
## Activations ## Activations

6
packages/mermaid/src/rendering-util/insertElementsForSize.js
View File

@@ -1,7 +1,7 @@
import { select } from 'd3'; import { select } from 'd3';
import { insertNode } from '../dagre-wrapper/nodes.js'; import { insertNode } from '../dagre-wrapper/nodes.js';
export const getDiagramElements = (id, securityLevel) => { export const getDiagramElement = (id, securityLevel) => {
let sandboxElement; let sandboxElement;
if (securityLevel === 'sandbox') { if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id); sandboxElement = select('#i' + id);
@@ -15,9 +15,7 @@ export const getDiagramElements = (id, securityLevel) => {
// Run the renderer. This is what draws the final graph. // Run the renderer. This is what draws the final graph.
// @ts-ignore todo: fix this return svg;
const element = root.select('#' + id + ' g');
return { svg, element };
}; };
export function insertElementsForSize(el, data) { export function insertElementsForSize(el, data) {

4
packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View File

@@ -268,7 +268,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
return { elem, diff }; return { elem, diff };
}; };
export const render = async (data4Layout, svg, element) => { export const render = async (data4Layout, svg) => {
const graph = new graphlib.Graph({ const graph = new graphlib.Graph({
multigraph: true, multigraph: true,
compound: true, compound: true,
@@ -289,7 +289,7 @@ export const render = async (data4Layout, svg, element) => {
.setDefaultEdgeLabel(function () { .setDefaultEdgeLabel(function () {
return {}; return {};
}); });
const element = svg.select('g');
insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId); insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
clearNodes(); clearNodes();
clearEdges(); clearEdges();

5
packages/mermaid/src/rendering-util/render.ts
View File

@@ -12,7 +12,6 @@ export interface LayoutAlgorithm {
render( render(
layoutData: LayoutData, layoutData: LayoutData,
svg: SVG, svg: SVG,
element: any,
helpers: InternalHelpers, helpers: InternalHelpers,
options?: RenderOptions options?: RenderOptions
): Promise<void>; ): Promise<void>;
@@ -45,14 +44,14 @@ const registerDefaultLayoutLoaders = () => {
registerDefaultLayoutLoaders(); registerDefaultLayoutLoaders();
export const render = async (data4Layout: LayoutData, svg: SVG, element: any) => { export const render = async (data4Layout: LayoutData, svg: SVG) => {
if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) { if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`); throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
} }
const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm]; const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
const layoutRenderer = await layoutDefinition.loader(); const layoutRenderer = await layoutDefinition.loader();
return layoutRenderer.render(data4Layout, svg, element, internalHelpers, { return layoutRenderer.render(data4Layout, svg, internalHelpers, {
algorithm: layoutDefinition.algorithm, algorithm: layoutDefinition.algorithm,
}); });
}; };

1
packages/mermaid/src/rendering-util/rendering-elements/shapes/anchor.ts
View File

@@ -17,6 +17,7 @@ export const anchor = (parent: SVGAElement, node: Node): Promise<SVGAElement> =>
cssClasses = 'anchor'; cssClasses = 'anchor';
} }
const shapeSvg = parent const shapeSvg = parent
// @ts-ignore - SVGElement is not typed
.insert('g') .insert('g')
.attr('class', cssClasses) .attr('class', cssClasses)
.attr('id', node.domId || node.id); .attr('id', node.domId || node.id);