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

Merge from Upstream

Browse Source
This commit is contained in:
Ashish Jain
2024-08-27 14:21:46 +02:00
parent 1483e9245e 75f755b823
commit ba978e86ae
20 changed files with 587 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.cspell/mermaid-terms.txt
View File

@@ -1,5 +1,6 @@
Adamiecki Adamiecki
arrowend arrowend
Bendpoints
bmatrix bmatrix
braintree braintree
catmull catmull

1
.cspell/misc-terms.txt
View File

@@ -4,3 +4,4 @@ handDrawn
KOEPF KOEPF
neato neato
newbranch newbranch
validify

41
cypress/integration/rendering/newShapes.spec.ts
View File

@@ -40,7 +40,28 @@ const newShapesSet5 = [
'card', 'card',
'shadedProcess', 'shadedProcess',
] as const; ] as const;
const newShapesSet6 = ['curlyBraces'];
const newShapesSet6 = ['roundedRect', 'squareRect', 'stateStart', 'stateEnd', 'labelRect'] as const;
const newShapesSet7 = ['forkJoin', 'choice', 'note', 'stadium'] as const;
const newShapesSet8 = [
'question',
'hexagon',
'curlyBraces',
'multiRect',
'waveEdgedRectangle',
] as const;
const newShapesSet9 = ['anchor', 'lean_right', 'lean_left', 'trapezoid', 'inv_trapezoid'] as const;
const newShapesSet10 = [
'subroutine',
'cylinder',
'circle',
'doublecircle',
'rect_left_inv_arrow',
] as const;
// Aggregate all shape sets into a single array // Aggregate all shape sets into a single array
const newShapesSets = [ const newShapesSets = [
@@ -50,6 +71,10 @@ const newShapesSets = [
newShapesSet4, newShapesSet4,
newShapesSet5, newShapesSet5,
newShapesSet6, newShapesSet6,
newShapesSet7,
newShapesSet8,
newShapesSet9,
newShapesSet10,
] as const; ] as const;
looks.forEach((look) => { looks.forEach((look) => {
@@ -67,7 +92,7 @@ looks.forEach((look) => {
it(`with label`, () => { it(`with label`, () => {
let flowchartCode = `flowchart ${direction}\n`; let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => { newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label' }@\n`; flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
}); });
imgSnapshotTest(flowchartCode, { look }); imgSnapshotTest(flowchartCode, { look });
}); });
@@ -75,7 +100,7 @@ looks.forEach((look) => {
it(`connect all shapes with each other`, () => { it(`connect all shapes with each other`, () => {
let flowchartCode = `flowchart ${direction}\n`; let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => { newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label' }@\n`; flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
}); });
for (let i = 0; i < newShapesSet.length; i++) { for (let i = 0; i < newShapesSet.length; i++) {
for (let j = i + 1; j < newShapesSet.length; j++) { for (let j = i + 1; j < newShapesSet.length; j++) {
@@ -88,7 +113,7 @@ looks.forEach((look) => {
it(`with very long label`, () => { it(`with very long label`, () => {
let flowchartCode = `flowchart ${direction}\n`; let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => { newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label' }@\n`; flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }@\n`;
}); });
imgSnapshotTest(flowchartCode, { look }); imgSnapshotTest(flowchartCode, { look });
}); });
@@ -96,7 +121,7 @@ looks.forEach((look) => {
it(`with markdown htmlLabels:true`, () => { it(`with markdown htmlLabels:true`, () => {
let flowchartCode = `flowchart ${direction}\n`; let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => { newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong>' }@\n`; flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
}); });
imgSnapshotTest(flowchartCode, { look }); imgSnapshotTest(flowchartCode, { look });
}); });
@@ -104,7 +129,7 @@ looks.forEach((look) => {
it(`with markdown htmlLabels:false`, () => { it(`with markdown htmlLabels:false`, () => {
let flowchartCode = `flowchart ${direction}\n`; let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => { newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong>' }@\n`; flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
}); });
imgSnapshotTest(flowchartCode, { imgSnapshotTest(flowchartCode, {
look, look,
@@ -116,7 +141,7 @@ looks.forEach((look) => {
it(`with styles`, () => { it(`with styles`, () => {
let flowchartCode = `flowchart ${direction}\n`; let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => { newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new shape' }@\n`; flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`; flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
}); });
imgSnapshotTest(flowchartCode, { look }); imgSnapshotTest(flowchartCode, { look });
@@ -126,7 +151,7 @@ looks.forEach((look) => {
let flowchartCode = `flowchart ${direction}\n`; let flowchartCode = `flowchart ${direction}\n`;
flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`; flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
newShapesSet.forEach((newShape, index) => { newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new shape' }@\n`; flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
flowchartCode += ` n${index}${index}:::customClazz\n`; flowchartCode += ` n${index}${index}:::customClazz\n`;
}); });
imgSnapshotTest(flowchartCode, { look }); imgSnapshotTest(flowchartCode, { look });

203
cypress/platform/knsv2.html
View File

@@ -73,7 +73,9 @@
font-family: monospace; font-family: monospace;
font-size: 72px; font-size: 72px;
} }
pre {
width: 100%;
}
/* tspan { /* tspan {
font-size: 6px !important; font-size: 6px !important;
} */ } */
@@ -88,17 +90,202 @@
config: config:
look: handDrawn look: handDrawn
layout: elk layout: elk
elk:
<!-- nodePlacementStrategy: INTERACTIVE -->
<!-- mergeEdges: true -->
---
stateDiagram-v2
direction LR
accTitle: An idealized Open Source supply-chain graph
%%
state "🟦 Importer" as author_importer
state "🟥 Supplier, Owner" as author_owner
state "🟨🟥 Maintainer, Author\n🟨 Custodian" as author
state "🟩 Distributor" as repository_distributor
state "🟦 Importer" as language_importer
state "🟦🟨 Packager" as language_packager
state "🟦🟨 OSS Steward" as language_steward
state "🟨 Curator" as language_curator
state "🟩 Distributor" as language_distributor
state "🟦 Contributor" as contributor
state "🟦 Importer" as package_importer
state "🟨 Patcher" as package_patcher
state "🟨🟦 Builder\n🟨🟦 Packager\n🟨🟦 Containerizer" as package_packager
state "🟨 Curator" as package_curator
state "🟩 Distributor" as package_distributor
state "🟦 Importer" as integrator_importer
state "🟥 Supplier, Manufacturer, Owner" as integrator_owner
state "🟦🟨🟥 Integrator, Developer" as integrator_developer
state "🟩🟨 SBOM Redactor\n🟩 Publisher" as integrator_publisher
state "🟦🟨 Builder" as integrator_builder
state "🟨 Deployer" as deployer
state "🟦 Vuln. Checker" as integrator_checker
state "🟩🟨 SBOM Redactor" as redactor
state "🟦 Consumer\n🟦 User" as consumer
state "🟦 Auditor" as auditor_internal
state "🟦 Auditor" as auditor_external
%%
classDef createsSBOM stroke:red,stroke-width:3px;
classDef updatesSBOM stroke:yellow,stroke-width:3px;
classDef assemblesSBOM stroke:yellow,stroke-width:3px;
classDef distributesSBOM stroke:green,stroke-width:3px;
classDef verifiesSBOM stroke:#07f,stroke-width:3px;
%%
class author_importer verifiesSBOM
class author_owner createsSBOM
class manufacturer_owner createsSBOM
class author assemblesSBOM
class package_importer verifiesSBOM
class package_patcher updatesSBOM
class package_packager assemblesSBOM
class package_curator distributesSBOM
class package_distributor distributesSBOM
class language_importer verifiesSBOM
class language_packager assemblesSBOM
class language_steward updatesSBOM
class language_curator distributesSBOM
class language_distributor distributesSBOM
class repository_distributor distributesSBOM
class integrator_importer verifiesSBOM
class integrator_owner createsSBOM
class integrator_developer assemblesSBOM
class integrator_publisher distributesSBOM
class integrator_builder assemblesSBOM
class integrator_checker verifiesSBOM
class deployer assemblesSBOM
class redactor distributesSBOM
class auditor_internal verifiesSBOM
class auditor_external verifiesSBOM
state "Maintainer Environment" as environment_maintainer {
[*] --> author_importer
[*] --> author
author_importer --> author
author_owner --> author
author --> language_packager
}
[*] --> environment_maintainer
state "Language Ecosystem" as ecosystem_lang {
[*] --> language_importer
[*] --> language_steward
[*] --> language_curator
[*] --> language_distributor
language_importer --> language_distributor
language_importer --> language_curator
language_steward --> language_curator
language_curator --> language_distributor
}
language_packager --> ecosystem_lang
ecosystem_lang --> ecosystem_lang
state "Public Collaboration Ecosystem" as ecosystem_repo {
[*] --> repository_distributor
}
author --> ecosystem_repo
ecosystem_repo --> author
repository_distributor --> contributor
contributor --> repository_distributor
state "Package Ecosystem" as ecosystem_package {
[*] --> package_importer
[*] --> package_packager
[*] --> package_patcher
package_importer --> package_patcher
package_importer --> package_packager
package_patcher --> package_packager
package_packager --> package_curator
package_packager --> package_distributor
package_curator --> package_distributor
}
repository_distributor --> ecosystem_package
language_distributor --> ecosystem_package
ecosystem_package --> ecosystem_package
state "Integrator Environment" as environment_integrator {
[*] --> integrator_developer
[*] --> integrator_importer
integrator_importer --> integrator_developer
integrator_owner --> integrator_developer
integrator_builder --> integrator_publisher
integrator_developer --> integrator_checker
integrator_checker --> integrator_developer
auditor_internal --> integrator_developer
integrator_developer --> integrator_builder
integrator_developer --> auditor_internal
}
repository_distributor --> environment_integrator
language_distributor --> environment_integrator
package_distributor --> environment_integrator
state "Production Environment" as environment_prod {
[*] --> deployer
deployer --> redactor
}
integrator_publisher --> [*]
integrator_developer --> environment_prod
integrator_builder --> environment_prod
integrator_publisher --> environment_prod
deployer --> auditor_external
deployer --> consumer
redactor --> consumer
</pre>
<pre id="diagram" class="mermaid2">
---
title: hello2
config:
look: handDrawn
layout: dagre
elk: elk:
nodePlacementStrategy: BRANDES_KOEPF nodePlacementStrategy: BRANDES_KOEPF
--- ---
flowchart LR stateDiagram-v2
A[Start] --Some text--> B(Continue) A --> A
B --> C{Evaluate} state A {
C -- One --> D[Option 1] B --> D
C -- Two --> E[Option 2] state B {
C -- Three --> F[fa:fa-car Option 3] C
}
state D {
E
}
}
</pre
>
<pre id="diagram" class="mermaid2">
---
title: hello2
config:
look: handDrawn
layout: dagre
elk:
nodePlacementStrategy: BRANDES_KOEPF
---
flowchart
A --> A
subgraph A
B --> B
subgraph B
C
end
end
</pre </pre
> >
@@ -196,7 +383,7 @@ flowchart TB
messageFontFamily: 'courier', messageFontFamily: 'courier',
}, },
fontSize: 12, fontSize: 12,
logLevel: 0, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {

81
docs/config/setup/interfaces/mermaid.MermaidConfig.md
View File

@@ -16,7 +16,7 @@
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:112](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L112) [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
--- ---
@@ -29,7 +29,7 @@ This matters if you are using base tag settings.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131) [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
--- ---
@@ -39,7 +39,7 @@ This matters if you are using base tag settings.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189) [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
--- ---
@@ -49,7 +49,7 @@ This matters if you are using base tag settings.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186) [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
--- ---
@@ -59,7 +59,7 @@ This matters if you are using base tag settings.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:177](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L177) [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
--- ---
@@ -69,7 +69,7 @@ This matters if you are using base tag settings.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L103) [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
--- ---
@@ -83,7 +83,7 @@ You can set this attribute to base the seed on a static string.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L171) [packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
--- ---
@@ -101,7 +101,7 @@ should not change unless content is changed.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164) [packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
--- ---
@@ -111,7 +111,7 @@ should not change unless content is changed.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190) [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
--- ---
@@ -121,10 +121,11 @@ should not change unless content is changed.
#### Type declaration #### Type declaration
| Name | Type | Description | | Name | Type | Description |
| :----------------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | | :----------------------- | :-------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mergeEdges?` | `boolean` | Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. | | `cycleBreakingStrategy?` | `"GREEDY"` \| `"DEPTH_FIRST"` \| `"INTERACTIVE"` \| `"MODEL_ORDER"` \| `"GREEDY_MODEL_ORDER"` | This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops. |
| `nodePlacementStrategy?` | `"SIMPLE"` \| `"NETWORK_SIMPLEX"` \| `"LINEAR_SEGMENTS"` \| `"BRANDES_KOEPF"` | Elk specific option affecting how nodes are placed. | | `mergeEdges?` | `boolean` | Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. |
| `nodePlacementStrategy?` | `"SIMPLE"` \| `"NETWORK_SIMPLEX"` \| `"LINEAR_SEGMENTS"` \| `"BRANDES_KOEPF"` | Elk specific option affecting how nodes are placed. |
#### Defined in #### Defined in
@@ -138,7 +139,7 @@ should not change unless content is changed.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:179](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L179) [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
--- ---
@@ -148,7 +149,7 @@ should not change unless content is changed.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172) [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
--- ---
@@ -162,7 +163,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:111](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L111) [packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
--- ---
@@ -172,7 +173,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192) [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
--- ---
@@ -186,7 +187,7 @@ If set to true, ignores legacyMathML.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L153) [packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
--- ---
@@ -196,7 +197,7 @@ If set to true, ignores legacyMathML.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174) [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
--- ---
@@ -206,7 +207,7 @@ If set to true, ignores legacyMathML.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185) [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
--- ---
@@ -228,7 +229,7 @@ Defines the seed to be used when using handDrawn look. This is important for the
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L104) [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
--- ---
@@ -238,7 +239,7 @@ Defines the seed to be used when using handDrawn look. This is important for the
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L175) [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
--- ---
@@ -265,7 +266,7 @@ fall back to legacy rendering for KaTeX.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L146) [packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
--- ---
@@ -277,7 +278,7 @@ This option decides the amount of logging to be used by mermaid.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L117) [packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
--- ---
@@ -299,7 +300,7 @@ Defines which main look to use for the diagram.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
--- ---
@@ -333,7 +334,7 @@ The maximum allowed size of the users text diagram
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184) [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
--- ---
@@ -343,7 +344,7 @@ The maximum allowed size of the users text diagram
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188) [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
--- ---
@@ -353,7 +354,7 @@ The maximum allowed size of the users text diagram
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:180](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L180) [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
--- ---
@@ -363,7 +364,7 @@ The maximum allowed size of the users text diagram
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181) [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
--- ---
@@ -373,7 +374,7 @@ The maximum allowed size of the users text diagram
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183) [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
--- ---
@@ -383,7 +384,7 @@ The maximum allowed size of the users text diagram
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187) [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
--- ---
@@ -397,7 +398,7 @@ This prevents malicious graph directives from overriding a site's default securi
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L138) [packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
--- ---
@@ -409,7 +410,7 @@ Level of trust for parsed diagram
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121) [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
--- ---
@@ -419,7 +420,7 @@ Level of trust for parsed diagram
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173) [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
--- ---
@@ -431,7 +432,7 @@ Dictates whether mermaid starts on Page load
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L125) [packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
--- ---
@@ -441,7 +442,7 @@ Dictates whether mermaid starts on Page load
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:178](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L178) [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
--- ---
@@ -454,7 +455,7 @@ This is useful when you want to control how to handle syntax errors in your appl
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)
--- ---
@@ -497,7 +498,7 @@ You may also use `themeCSS` to override this value.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L176) [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
--- ---
@@ -507,7 +508,7 @@ You may also use `themeCSS` to override this value.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191) [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
--- ---
@@ -517,4 +518,4 @@ You may also use `themeCSS` to override this value.
#### Defined in #### Defined in
[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182) [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

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

@@ -752,14 +752,34 @@ export const render = async (
'nodePlacement.strategy': data4Layout.config.elk.nodePlacementStrategy, 'nodePlacement.strategy': data4Layout.config.elk.nodePlacementStrategy,
'elk.layered.mergeEdges': data4Layout.config.elk.mergeEdges, 'elk.layered.mergeEdges': data4Layout.config.elk.mergeEdges,
'elk.direction': 'DOWN', 'elk.direction': 'DOWN',
'spacing.baseValue': 30, 'spacing.baseValue': 35,
// 'spacing.nodeNode': 40, 'elk.layered.unnecessaryBendpoints': true,
// 'spacing.nodeNodeBetweenLayers': 45, 'elk.layered.cycleBreaking.strategy': data4Layout.config.elk.cycleBreakingStrategy,
// 'spacing.edgeNode': 40, // 'spacing.nodeNode': 20,
// 'spacing.edgeNodeBetweenLayers': 30, // 'spacing.nodeNodeBetweenLayers': 25,
// 'spacing.edgeEdge': 30, // 'spacing.edgeNode': 20,
// 'spacing.edgeEdgeBetweenLayers': 40, // 'spacing.edgeNodeBetweenLayers': 10,
// 'spacing.nodeSelfLoop': 50, // 'spacing.edgeEdge': 10,
// 'spacing.edgeEdgeBetweenLayers': 20,
// 'spacing.nodeSelfLoop': 20,
// Tweaking options
// 'elk.layered.nodePlacement.favorStraightEdges': true,
// 'nodePlacement.feedbackEdges': true,
// 'elk.layered.wrapping.multiEdge.improveCuts': true,
// 'elk.layered.wrapping.multiEdge.improveWrappedEdges': true,
// 'elk.layered.wrapping.strategy': 'MULTI_EDGE',
// 'elk.layered.edgeRouting.selfLoopDistribution': 'EQUALLY',
// 'elk.layered.mergeHierarchyEdges': true,
// 'elk.layered.feedbackEdges': true,
// 'elk.layered.crossingMinimization.semiInteractive': true,
// 'elk.layered.edgeRouting.splines.sloppy.layerSpacingFactor': 1,
// 'elk.layered.edgeRouting.polyline.slopedEdgeZoneWidth': 4.0,
// 'elk.layered.wrapping.validify.strategy': 'LOOK_BACK',
// 'elk.insideSelfLoops.activate': true,
// 'elk.alg.layered.options.EdgeStraighteningStrategy': 'NONE',
// 'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES', // NODES_AND_EDGES
// 'elk.layered.wrapping.cutting.strategy': 'ARD', // NODES_AND_EDGES
}, },
children: [], children: [],
edges: [], edges: [],

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

@@ -99,6 +99,16 @@ export interface MermaidConfig {
* *
*/ */
nodePlacementStrategy?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF'; nodePlacementStrategy?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF';
/**
* This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
*
*/
cycleBreakingStrategy?:
| 'GREEDY'
| 'DEPTH_FIRST'
| 'INTERACTIVE'
| 'MODEL_ORDER'
| 'GREEDY_MODEL_ORDER';
}; };
darkMode?: boolean; darkMode?: boolean;
htmlLabels?: boolean; htmlLabels?: boolean;

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

@@ -28,7 +28,7 @@ import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js'
import { getConfig } from '../../../diagram-api/diagramAPI.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js';
const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, siteConfig) => { const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, siteConfig) => {
log.info('Graph in recursive render: IPI', id, graphlibJson.write(graph), parentCluster); log.warn('Graph in recursive render:XAX', graphlibJson.write(graph), parentCluster);
const dir = graph.graph().rankdir; const dir = graph.graph().rankdir;
log.trace('Dir in recursive render - dir:', dir); log.trace('Dir in recursive render - dir:', dir);
@@ -124,7 +124,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
clusterDb.set(node.id, { id: findNonClusterChild(node.id, graph), node }); clusterDb.set(node.id, { id: findNonClusterChild(node.id, graph), node });
// insertCluster(clusters, graph.node(v)); // insertCluster(clusters, graph.node(v));
} else { } else {
log.trace('Node - the non recursive path XAX', v, node.id, node); log.warn('Node - the non recursive path XAX', v, nodes, graph.node(v), dir);
await insertNode(nodes, graph.node(v), dir); await insertNode(nodes, graph.node(v), dir);
} }
} }
@@ -305,12 +305,64 @@ export const render = async (data4Layout, svg) => {
log.debug('Edges:', data4Layout.edges); log.debug('Edges:', data4Layout.edges);
data4Layout.edges.forEach((edge) => { data4Layout.edges.forEach((edge) => {
graph.setEdge(edge.start, edge.end, { ...edge }, edge.id); // Handle self-loops
if (edge.start === edge.end) {
const nodeId = edge.start;
const specialId1 = nodeId + '---' + nodeId + '---1';
const specialId2 = nodeId + '---' + nodeId + '---2';
const node = graph.node(nodeId);
graph.setNode(specialId1, {
domId: specialId1,
id: specialId1,
parentId: node.parentId,
labelStyle: '',
label: '',
padding: 0,
shape: 'labelRect',
// shape: 'rect',
style: '',
width: 10,
height: 10,
});
graph.setParent(specialId1, node.parentId);
graph.setNode(specialId2, {
domId: specialId2,
id: specialId2,
parentId: node.parentId,
labelStyle: '',
padding: 0,
// shape: 'rect',
shape: 'labelRect',
label: '',
style: '',
width: 10,
height: 10,
});
graph.setParent(specialId2, node.parentId);
const edge1 = structuredClone(edge);
const edgeMid = structuredClone(edge);
const edge2 = structuredClone(edge);
edge1.label = '';
edge1.arrowTypeEnd = 'none';
edge1.id = nodeId + '-cyclic-special-1';
edgeMid.arrowTypeEnd = 'none';
edgeMid.id = nodeId + '-cyclic-special-mid';
edge2.label = '';
edge1.fromCluster = nodeId;
edge2.toCluster = nodeId;
edge2.id = nodeId + '-cyclic-special-2';
graph.setEdge(nodeId, specialId1, edge1, nodeId + '-cyclic-special-0');
graph.setEdge(specialId1, specialId2, edgeMid, nodeId + '-cyclic-special-1');
graph.setEdge(specialId2, nodeId, edge2, nodeId + '-cyc<lic-special-2');
} else {
graph.setEdge(edge.start, edge.end, { ...edge }, edge.id);
}
}); });
log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph))); log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
adjustClustersAndEdges(graph); adjustClustersAndEdges(graph);
log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph))); log.warn('Graph after XAX:', JSON.stringify(graphlibJson.write(graph)));
const siteConfig = getConfig(); const siteConfig = getConfig();
await recursiveRender( await recursiveRender(
element, element,

55
packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
View File

@@ -267,51 +267,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
' --- ', ' --- ',
clusterDb.get(e.w) clusterDb.get(e.w)
); );
if (clusterDb.get(e.v) && clusterDb.get(e.w) && clusterDb.get(e.v) === clusterDb.get(e.w)) { if (clusterDb.get(e.v) || clusterDb.get(e.w)) {
log.warn('Fixing and trying link to self - removing XXX', e.v, e.w, e.name);
log.warn('Fixing and trying - removing XXX', e.v, e.w, e.name);
v = getAnchorId(e.v);
w = getAnchorId(e.w);
graph.removeEdge(e.v, e.w, e.name);
const specialId1 = e.w + '---' + e.v + '---1';
const specialId2 = e.w + '---' + e.v + '---2';
graph.setNode(specialId1, {
domId: specialId1,
id: specialId1,
labelStyle: '',
label: '',
padding: 0,
shape: 'labelRect',
style: '',
width: 10,
height: 10,
});
graph.setNode(specialId2, {
domId: specialId2,
id: specialId2,
labelStyle: '',
padding: 0,
shape: 'labelRect',
style: '',
width: 10,
height: 10,
});
const edge1 = structuredClone(edge);
const edgeMid = structuredClone(edge);
const edge2 = structuredClone(edge);
edge1.label = '';
edge1.arrowTypeEnd = 'none';
edge1.id = e.name + '-cyclic-special-1';
edgeMid.arrowTypeEnd = 'none';
edgeMid.id = e.name + '-cyclic-special-mid';
edge2.label = '';
edge1.fromCluster = e.v;
edge2.toCluster = e.v;
edge2.id = e.name + '-cyclic-special-2';
graph.setEdge(v, specialId1, edge1, e.name + '-cyclic-special-0');
graph.setEdge(specialId1, specialId2, edgeMid, e.name + '-cyclic-special-1');
graph.setEdge(specialId2, w, edge2, e.name + '-cyclic-special-2');
} else if (clusterDb.get(e.v) || clusterDb.get(e.w)) {
log.warn('Fixing and trying - removing XXX', e.v, e.w, e.name); log.warn('Fixing and trying - removing XXX', e.v, e.w, e.name);
v = getAnchorId(e.v); v = getAnchorId(e.v);
w = getAnchorId(e.w); w = getAnchorId(e.w);
@@ -334,13 +290,6 @@ export const adjustClustersAndEdges = (graph, depth) => {
extractor(graph, 0); extractor(graph, 0);
log.trace(clusterDb); log.trace(clusterDb);
// Remove references to extracted cluster
// graph.edges().forEach((edge) => {
// if (isDescendant(edge.v, clusterId) || isDescendant(edge.w, clusterId)) {
// graph.removeEdge(edge);
// }
// });
}; };
export const extractor = (graph, depth) => { export const extractor = (graph, depth) => {
@@ -441,7 +390,7 @@ export const extractor = (graph, depth) => {
for (const node of nodes) { for (const node of nodes) {
const data = graph.node(node); const data = graph.node(node);
log.warn(' Now next level', node, data); log.warn(' Now next level', node, data);
if (data.clusterNode) { if (data?.clusterNode) {
extractor(data.graph, depth + 1); extractor(data.graph, depth + 1);
} }
} }

69
packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
View File

@@ -3,20 +3,17 @@ import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js'; import type { SVG } from '$root/diagram-api/types.js';
// @ts-ignore TODO: Fix rough typings // @ts-ignore TODO: Fix rough typings
import rough from 'roughjs'; import rough from 'roughjs';
import { solidStateFill, styles2String } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { createPathFromPoints, getNodeClasses, labelHelper } from './util.js';
export const choice = (parent: SVG, node: Node) => { export const choice = async (parent: SVG, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.label = '';
const { themeVariables } = getConfig(); const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
const { lineColor } = themeVariables; const { cssStyles } = node;
const shapeSvg = parent
.insert('g') const s = Math.max(28, node.width ?? 0);
.attr('class', 'node default')
.attr('id', node.domId || node.id);
const s = 28;
const points = [ const points = [
{ x: 0, y: s / 2 }, { x: 0, y: s / 2 },
{ x: s / 2, y: 0 }, { x: s / 2, y: 0 },
@@ -24,40 +21,34 @@ export const choice = (parent: SVG, node: Node) => {
{ x: -s / 2, y: 0 }, { x: -s / 2, y: 0 },
]; ];
let choice; // @ts-ignore TODO: Fix rough typings
if (node.look === 'handDrawn') { const rc = rough.svg(shapeSvg);
// @ts-ignore TODO: Fix rough typings const options = userNodeOverrides(node, {});
const rc = rough.svg(shapeSvg);
const pointArr = points.map(function (d) { if (node.look !== 'handDrawn') {
return [d.x, d.y]; options.roughness = 0;
}); options.fillStyle = 'solid';
const roughNode = rc.polygon(pointArr, solidStateFill(lineColor));
choice = shapeSvg.insert(() => roughNode);
} else {
choice = shapeSvg.insert('polygon', ':first-child').attr(
'points',
points
.map(function (d) {
return d.x + ',' + d.y;
})
.join(' ')
);
} }
// center the circle around its coordinate const choicePath = createPathFromPoints(points);
choice const roughNode = rc.path(choicePath, options);
.attr('class', 'state-start') const choiceShape = shapeSvg.insert(() => roughNode, ':first-child');
// @ts-ignore TODO: Fix rough typings
.attr('r', 7) choiceShape.attr('class', 'basic label-container');
.attr('width', 28)
.attr('height', 28) if (cssStyles && node.look !== 'handDrawn') {
.attr('style', nodeStyles); choiceShape.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
choiceShape.selectAll('path').attr('style', nodeStyles);
}
node.width = 28; node.width = 28;
node.height = 28; node.height = 28;
node.intersect = function (point) { node.intersect = function (point) {
return intersect.circle(node, 14, point); return intersect.polygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
View File

@@ -109,7 +109,10 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
updateNodeBounds(node, cylinder); updateNodeBounds(node, cylinder);
label.attr('transform', `translate(${-bbox.width / 2}, ${h / 2 - bbox.height})`); label.attr(
'transform',
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${h / 2 - bbox.height - (bbox.y - (bbox.top ?? 0))})`
);
node.intersect = function (point) { node.intersect = function (point) {
const pos = intersect.rect(node, point); const pos = intersect.rect(node, point);

74
packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
View File

@@ -1,62 +1,50 @@
import { updateNodeBounds } from './util.js'; import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js'; import type { SVG } from '$root/diagram-api/types.js';
import rough from 'roughjs'; import rough from 'roughjs';
import { solidStateFill } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const forkJoin = (parent: SVG, node: Node, dir: string) => { export const forkJoin = async (parent: SVG, node: Node, dir: string) => {
const { themeVariables } = getConfig(); const { nodeStyles } = styles2String(node);
const { lineColor } = themeVariables; node.label = '';
const shapeSvg = parent const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
.insert('g')
.attr('class', 'node default')
.attr('id', node.domId || node.id);
let width = 70; const { cssStyles } = node;
let height = 10; let width = Math.max(70, node?.width ?? 0);
let height = Math.max(10, node?.height ?? 0);
if (dir === 'LR') { if (dir === 'LR') {
width = 10; width = Math.max(10, node?.width ?? 0);
height = 70; height = Math.max(70, node?.height ?? 0);
} }
const x = (-1 * width) / 2; const x = (-1 * width) / 2;
const y = (-1 * height) / 2; const y = (-1 * height) / 2;
let shape; // @ts-ignore TODO: Fix rough typings
if (node.look === 'handDrawn') { const rc = rough.svg(shapeSvg);
// @ts-ignore TODO: Fix rough typings const options = userNodeOverrides(node, {});
const rc = rough.svg(shapeSvg);
const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor)); if (node.look !== 'handDrawn') {
shape = shapeSvg.insert(() => roughNode); options.roughness = 0;
} else { options.fillStyle = 'solid';
shape = shapeSvg }
.append('rect')
.attr('x', x) const roughNode = rc.rectangle(x, y, width, height, options);
.attr('y', y)
.attr('width', width) const shape = shapeSvg.insert(() => roughNode, ':first-child');
.attr('height', height)
.attr('class', 'fork-join'); if (cssStyles && node.look !== 'handDrawn') {
shape.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
shape.selectAll('path').attr('style', nodeStyles);
} }
updateNodeBounds(node, shape); updateNodeBounds(node, shape);
let nodeHeight = 0;
let nodeWidth = 0;
let nodePadding = 10;
if (node.height) {
nodeHeight = node.height;
}
if (node.width) {
nodeWidth = node.width;
}
if (node.padding) {
nodePadding = node.padding;
}
node.height = nodeHeight + nodePadding / 2;
node.width = nodeWidth + nodePadding / 2;
node.intersect = function (point) { node.intersect = function (point) {
return intersect.rect(node, point); return intersect.rect(node, point);
}; };

52
packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
View File

@@ -1,4 +1,4 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import { import {
@@ -8,34 +8,37 @@ import {
import rough from 'roughjs'; import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js'; import { insertPolygonShape } from './insertPolygonShape.js';
export const createInvertedTrapezoidPathD = ( // export const createInvertedTrapezoidPathD = (
x: number, // x: number,
y: number, // y: number,
width: number, // width: number,
height: number // height: number
): string => { // ): string => {
return [ // return [
`M${x + height / 6},${y}`, // `M${x + height / 6},${y}`,
`L${x + width - height / 6},${y}`, // `L${x + width - height / 6},${y}`,
`L${x + width + (2 * height) / 6},${y - height}`, // `L${x + width + (2 * height) / 6},${y - height}`,
`L${x - (2 * height) / 6},${y - height}`, // `L${x - (2 * height) / 6},${y - height}`,
'Z', // 'Z',
].join(' '); // ].join(' ');
}; // };
export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; const nodePadding = node.padding ?? 0;
const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding * 2;
const w = bbox.width + labelPaddingY; const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2;
const h = bbox.height + labelPaddingX;
const w = Math.max(bbox.width + labelPaddingY, node?.width ?? 0);
const h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0);
const points = [ const points = [
{ x: h / 6, y: 0 }, { x: 0, y: 0 },
{ x: w - h / 6, y: 0 }, { x: w, y: 0 },
{ x: w + (2 * h) / 6, y: -h }, { x: w + (3 * h) / 6, y: -h },
{ x: (-2 * h) / 6, y: -h }, { x: (-3 * h) / 6, y: -h },
]; ];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>; let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -45,7 +48,8 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, {});
const pathData = createInvertedTrapezoidPathD(0, 0, w, h); const pathData = createPathFromPoints(points);
// const pathData = createInvertedTrapezoidPathD(0, 0, w, h);
const roughNode = rc.path(pathData, options); const roughNode = rc.path(pathData, options);
polygon = shapeSvg polygon = shapeSvg

32
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
View File

@@ -1,4 +1,4 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import { import {
@@ -8,34 +8,19 @@ import {
import rough from 'roughjs'; import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js'; import { insertPolygonShape } from './insertPolygonShape.js';
export const createLeanLeftPathD = (
x: number,
y: number,
width: number,
height: number
): string => {
return [
`M${x + (2 * height) / 6},${y}`,
`L${x + width + height / 6},${y}`,
`L${x + width - (2 * height) / 6},${y - height}`,
`L${x - height / 6},${y - height}`,
'Z',
].join(' ');
};
export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
const w = bbox.width + labelPaddingY; const w = Math.max(bbox.width + (labelPaddingY ?? 0), node?.width ?? 0);
const h = bbox.height + labelPaddingX; const h = Math.max(bbox.height + (labelPaddingX ?? 0), node?.height ?? 0);
const points = [ const points = [
{ x: (2 * h) / 6, y: 0 }, { x: 0, y: 0 },
{ x: w + h / 6, y: 0 }, { x: w + (3 * h) / 6, y: 0 },
{ x: w - (2 * h) / 6, y: -h }, { x: w, y: -h },
{ x: -h / 6, y: -h }, { x: -(3 * h) / 6, y: -h },
]; ];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>; let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -45,7 +30,8 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, {});
const pathData = createLeanLeftPathD(0, 0, w, h); const pathData = createPathFromPoints(points);
// const pathData = createLeanLeftPathD(0, 0, w, h);
const roughNode = rc.path(pathData, options); const roughNode = rc.path(pathData, options);
polygon = shapeSvg polygon = shapeSvg

32
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
View File

@@ -1,4 +1,4 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import { import {
@@ -8,21 +8,6 @@ import {
import rough from 'roughjs'; import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js'; import { insertPolygonShape } from './insertPolygonShape.js';
export const createLeanRightPathD = (
x: number,
y: number,
width: number,
height: number
): string => {
return [
`M${x - (2 * height) / 6},${y}`,
`L${x + width - height / 6},${y}`,
`L${x + width + (2 * height) / 6},${y - height}`,
`L${x + height / 6},${y - height}`,
'Z',
].join(' ');
};
export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
@@ -30,13 +15,14 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
const w = bbox.width + labelPaddingY;
const h = bbox.height + labelPaddingX; const w = Math.max(bbox.width + (labelPaddingY ?? 0), node?.width ?? 0);
const h = Math.max(bbox.height + (labelPaddingX ?? 0), node?.height ?? 0);
const points = [ const points = [
{ x: (-2 * h) / 6, y: 0 }, { x: (-3 * h) / 6, y: 0 },
{ x: w - h / 6, y: 0 }, { x: w, y: 0 },
{ x: w + (2 * h) / 6, y: -h }, { x: w + (3 * h) / 6, y: -h },
{ x: h / 6, y: -h }, { x: 0, y: -h },
]; ];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>; let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -46,7 +32,7 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, {});
const pathData = createLeanRightPathD(0, 0, w, h); const pathData = createPathFromPoints(points);
const roughNode = rc.path(pathData, options); const roughNode = rc.path(pathData, options);
polygon = shapeSvg polygon = shapeSvg

64
packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
View File

@@ -1,52 +1,46 @@
import { log } from '$root/logger.js'; import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds } from './util.js'; import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import rough from 'roughjs'; import rough from 'roughjs';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
export const note = async (parent: SVGAElement, node: Node) => { export const note = async (parent: SVGAElement, node: Node) => {
const { themeVariables, handDrawnSeed } = getConfig(); const { labelStyles, nodeStyles } = styles2String(node);
const { noteBorderColor, noteBkgColor } = themeVariables; node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
const totalHeight = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
const x = -totalWidth / 2;
const y = -totalHeight / 2;
const { cssStyles } = node;
const useHtmlLabels = node.useHtmlLabels; const useHtmlLabels = node.useHtmlLabels;
if (!useHtmlLabels) { if (!useHtmlLabels) {
node.centerLabel = true; node.centerLabel = true;
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, 'node ' + node.cssClasses);
log.info('Classes = ', node.cssClasses); log.info('Classes = ', node.cssClasses);
const { cssStyles } = node; // add the rect
let rect; // @ts-ignore TODO: Fix rough typings
const totalWidth = bbox.width + node.padding; const rc = rough.svg(shapeSvg);
const totalHeight = bbox.height + node.padding; const options = userNodeOverrides(node, {});
const x = -totalWidth / 2;
const y = -totalHeight / 2;
if (node.look === 'handDrawn') { if (node.look !== 'handDrawn') {
// add the rect options.roughness = 0;
// @ts-ignore TODO: Fix rough typings options.fillStyle = 'solid';
const rc = rough.svg(shapeSvg); }
const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, {
roughness: 0.7,
fill: noteBkgColor,
fillWeight: 3,
seed: handDrawnSeed,
// fillStyle: 'solid', // solid fill'
stroke: noteBorderColor,
});
rect = shapeSvg.insert(() => roughNode, ':first-child'); const noteShapeNode = rc.rectangle(x, y, totalWidth, totalHeight, options);
rect.attr('class', 'basic label-container').attr('style', cssStyles);
} else { const rect = shapeSvg.insert(() => noteShapeNode, ':first-child');
rect = shapeSvg.insert('rect', ':first-child'); rect.attr('class', 'basic label-container');
rect
.attr('rx', node.rx) if (cssStyles && node.look !== 'handDrawn') {
.attr('ry', node.ry) rect.selectAll('path').attr('style', cssStyles);
.attr('x', x) }
.attr('y', y)
.attr('width', totalWidth) if (nodeStyles && node.look !== 'handDrawn') {
.attr('height', totalHeight); rect.selectAll('path').attr('style', nodeStyles);
} }
updateNodeBounds(node, rect); updateNodeBounds(node, rect);

81
packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
View File

@@ -1,4 +1,4 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import { import {
@@ -6,18 +6,6 @@ import {
userNodeOverrides, userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
export const createPolygonPathD = (x: number, y: number, width: number, height: number): string => {
return [
`M${x - height / 2},${y}`,
`L${x + width},${y}`,
`L${x + width},${y - height}`,
`L${x - height / 2},${y - height}`,
`L${x},${y - height / 2}`,
'Z',
].join(' ');
};
export const rect_left_inv_arrow = async ( export const rect_left_inv_arrow = async (
parent: SVGAElement, parent: SVGAElement,
@@ -28,42 +16,53 @@ export const rect_left_inv_arrow = async (
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding;
const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding;
const w = bbox.width + labelPaddingY;
const h = bbox.height + labelPaddingX; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(bbox.width + (labelPaddingY ?? 0), node?.width ?? 0);
const h = Math.max(bbox.height + (labelPaddingX ?? 0), node?.height ?? 0);
const x = -w / 2;
const y = -h / 2;
const notch = y / 2;
const points = [ const points = [
{ x: -h / 2, y: 0 }, { x: x + notch, y },
{ x: w, y: 0 }, { x: x, y: 0 },
{ x: w, y: -h }, { x: x + notch, y: -y },
{ x: -h / 2, y: -h }, { x: -x, y: -y },
{ x: 0, y: -h / 2 }, { x: -x, y },
]; ];
let polygon;
const { cssStyles } = node; const { cssStyles } = node;
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
if (node.look === 'handDrawn') { if (node.look !== 'handDrawn') {
// @ts-ignore - rough is not typed options.roughness = 0;
const rc = rough.svg(shapeSvg); options.fillStyle = 'solid';
const options = userNodeOverrides(node, {});
const pathData = createPolygonPathD(0, 0, w, h);
const roughNode = rc.path(pathData, options);
polygon = shapeSvg
.insert(() => roughNode, ':first-child')
.attr('transform', `translate(${-w / 2}, ${h / 2})`);
if (cssStyles) {
polygon.attr('style', cssStyles);
}
} else {
polygon = insertPolygonShape(shapeSvg, w, h, points);
} }
if (nodeStyles) { const pathData = createPathFromPoints(points);
polygon.attr('style', nodeStyles); const roughNode = rc.path(pathData, options);
}
node.width = w + h;
node.height = h;
const polygon = shapeSvg.insert(() => roughNode, ':first-child');
polygon.attr('class', 'basic label-container');
if (cssStyles && node.look !== 'handDrawn') {
polygon.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
polygon.selectAll('path').attr('style', nodeStyles);
}
polygon.attr('transform', `translate(${-notch / 2},0)`);
label.attr(
'transform',
`translate(${-w / 2 + -notch / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
);
updateNodeBounds(node, polygon); updateNodeBounds(node, polygon);
node.intersect = function (point) { node.intersect = function (point) {

13
packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
View File

@@ -10,10 +10,10 @@ import rough from 'roughjs';
export const shadedProcess = async (parent: SVGAElement, node: Node) => { export const shadedProcess = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const halfPadding = (node?.padding || 0) / 2; const halfPadding = node?.padding ?? 0;
const w = bbox.width + node.padding; const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
const h = bbox.height + node.padding; const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
const x = -bbox.width / 2 - halfPadding; const x = -bbox.width / 2 - halfPadding;
const y = -bbox.height / 2 - halfPadding; const y = -bbox.height / 2 - halfPadding;
@@ -43,6 +43,11 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
rect.selectAll('path').attr('style', nodeStyles); rect.selectAll('path').attr('style', nodeStyles);
} }
label.attr(
'transform',
`translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})`
);
updateNodeBounds(node, rect); updateNodeBounds(node, rect);
node.intersect = function (point) { node.intersect = function (point) {

40
packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
View File

@@ -1,4 +1,4 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import { import {
@@ -8,20 +8,20 @@ import {
import rough from 'roughjs'; import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js'; import { insertPolygonShape } from './insertPolygonShape.js';
export const createTrapezoidPathD = ( // export const createTrapezoidPathD = (
x: number, // x: number,
y: number, // y: number,
width: number, // width: number,
height: number // height: number
): string => { // ): string => {
return [ // return [
`M${x - (2 * height) / 6},${y}`, // `M${x - (2 * height) / 6},${y}`,
`L${x + width + (2 * height) / 6},${y}`, // `L${x + width + (2 * height) / 6},${y}`,
`L${x + width - height / 6},${y - height}`, // `L${x + width - height / 6},${y - height}`,
`L${x + height / 6},${y - height}`, // `L${x + height / 6},${y - height}`,
'Z', // 'Z',
].join(' '); // ].join(' ');
}; // };
export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
@@ -32,10 +32,10 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
const w = bbox.width + labelPaddingY; const w = bbox.width + labelPaddingY;
const h = bbox.height + labelPaddingX; const h = bbox.height + labelPaddingX;
const points = [ const points = [
{ x: (-2 * h) / 6, y: 0 }, { x: (-3 * h) / 6, y: 0 },
{ x: w + (2 * h) / 6, y: 0 }, { x: w + (3 * h) / 6, y: 0 },
{ x: w - h / 6, y: -h }, { x: w, y: -h },
{ x: h / 6, y: -h }, { x: 0, y: -h },
]; ];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>; let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
@@ -45,7 +45,7 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, {});
const pathData = createTrapezoidPathD(0, 0, w, h); const pathData = createPathFromPoints(points);
const roughNode = rc.path(pathData, options); const roughNode = rc.path(pathData, options);
polygon = shapeSvg polygon = shapeSvg

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

@@ -123,6 +123,17 @@ properties:
- LINEAR_SEGMENTS - LINEAR_SEGMENTS
- BRANDES_KOEPF - BRANDES_KOEPF
default: BRANDES_KOEPF default: BRANDES_KOEPF
cycleBreakingStrategy:
description: |
This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
type: string
enum:
- GREEDY
- DEPTH_FIRST
- INTERACTIVE
- MODEL_ORDER
- GREEDY_MODEL_ORDER
default: GREEDY_MODEL_ORDER
darkMode: darkMode:
type: boolean type: boolean
default: false default: false