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

#815 Adding possibility to configure elk as renderer for flowcharts

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-12-22 10:33:41 +01:00
parent bb9b0b015e
commit 913ba34386
6 changed files with 99 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
cypress/platform/knsv2.html
View File

@@ -55,8 +55,9 @@
</head> </head>
<body> <body>
<div>Security check</div> <div>Security check</div>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
cyto TB %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid %% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU] subgraph ibm[IBM Espresso CPU]
core0[IBM PowerPC Broadway Core 0] core0[IBM PowerPC Broadway Core 0]
@@ -109,8 +110,65 @@ cyto TB
rtc{{rtc}} rtc{{rtc}}
</pre </pre
> >
<br />
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
cyto LR flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
core0[IBM PowerPC Broadway Core 0]
core1[IBM PowerPC Broadway Core 1]
core2[IBM PowerPC Broadway Core 2]
rom[16 KB ROM]
core0 --- core2
rom --> core2
end
subgraph amd[AMD Latte GPU]
mem[Memory & I/O Bridge]
dram[DRAM Controller]
edram[32 MB EDRAM MEM1]
rom[512 B SEEPROM]
sata[SATA IF]
exi[EXI]
subgraph gx[GX]
sram[3 MB 1T-SRAM]
end
radeon[AMD Radeon R7xx GX2]
mem --- gx
mem --- radeon
rom --- mem
mem --- sata
mem --- exi
dram --- sata
dram --- exi
end
ddr3[2 GB DDR3 RAM MEM2]
mem --- ddr3
dram --- ddr3
edram --- ddr3
core1 --- mem
exi --- rtc
rtc{{rtc}}
</pre
>
<br />
&nbsp;
<pre id="diagram" class="mermaid2">
flowchart LR
B1 --be be--x B2 B1 --be be--x B2
B1 --bo bo--o B3 B1 --bo bo--o B3
subgraph Ugge subgraph Ugge
@@ -142,24 +200,19 @@ cyto LR
B6 --> B5 B6 --> B5
</pre </pre
> >
inside1 --> inside2 & inside3 & inside4 & inside5 & inside6 a(letter a<br />a) ---> b(letter
b)--> c(letter c) --> d -->e(letter e<br />e) --> a b <--> d(letter b<br />d)
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
mindmap sequenceDiagram
root Customer->>+Stripe: Makes a payment request
child1((Circle)) Stripe->>+Bank: Forwards the payment request to the bank
grandchild 1 Bank->>+Customer: Asks for authorization
grandchild 2 Customer->>+Bank: Provides authorization
child2(Round rectangle) Bank->>+Stripe: Sends a response with payment details
grandchild 3 Stripe->>+Merchant: Sends a notification of payment receipt
grandchild 4 Merchant->>+Stripe: Confirms the payment
child3[Square] Stripe->>+Customer: Sends a confirmation of payment
grandchild 5 Customer->>+Merchant: Receives goods or services
::icon(mdi mdi-fire) </pre
gc6((grand<br/>child 6)) >
::icon(mdi mdi-fire)
gc7((grand<br/>grand<br/>child 8))
</pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
gantt gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue) title Style today marker (vertical line should be 5px wide and half-transparent blue)
@@ -186,10 +239,11 @@ cyto LR
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'dark', // theme: 'forest',
startOnLoad: true, startOnLoad: true,
logLevel: 0, logLevel: 0,
flowchart: { flowchart: {
// defaultRenderer: 'elk',
useMaxWidth: false, useMaxWidth: false,
htmlLabels: true, htmlLabels: true,
}, },

2
docs/config/setup/modules/defaultConfig.md
View File

@@ -14,7 +14,7 @@
#### Defined in #### Defined in
[defaultConfig.ts:1933](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1933) [defaultConfig.ts:1934](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1934)
--- ---

11
packages/mermaid-flowchart-v3/src/detector.ts
View File

@@ -3,11 +3,18 @@ import type { ExternalDiagramDefinition } from 'mermaid';
const id = 'flowchart-v3'; const id = 'flowchart-v3';
const detector = (txt: string, config) => { const detector = (txt: string, config) => {
if (config?.flowchart?.defaultRenderer === 'dagre-d3') {
return false;
}
if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
return false;
}
// If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram // If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram
if (config?.flowchart?.defaultRenderer === 'cytoscape' && txt.match(/^\s*graph/) !== null) { if (txt.match(/^\s*graph/) !== null) {
return true; return true;
} }
return txt.match(/^\s*cyto/) !== null; return txt.match(/^\s*flowchart/) !== null;
}; };
const loader = async () => { const loader = async () => {

5
packages/mermaid/src/defaultConfig.ts
View File

@@ -247,12 +247,13 @@ const config: Partial<MermaidConfig> = {
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | --------------- | ----------- | ------- | -------- | ----------------------- | * | --------------- | ----------- | ------- | -------- | ----------------------- |
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper | * | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper, elk |
* *
* **Notes:** * **Notes:**
* *
* Decides which rendering engine that is to be used for the rendering. Legal values are: * Decides which rendering engine that is to be used for the rendering. Legal values are:
* dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using
* elkjs
* *
* Default value: 'dagre-wrapper' * Default value: 'dagre-wrapper'
*/ */

9
packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
View File

@@ -1,8 +1,15 @@
import type { DiagramDetector } from '../../diagram-api/types'; import type { DiagramDetector } from '../../diagram-api/types';
export const flowDetectorV2: DiagramDetector = (txt, config) => { export const flowDetectorV2: DiagramDetector = (txt, config) => {
if (config?.flowchart?.defaultRenderer === 'dagre-d3') {
return false;
}
if (config?.flowchart?.defaultRenderer === 'elk') {
return false;
}
// If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram // If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram
if (config?.flowchart?.defaultRenderer === 'dagre-wrapper' && txt.match(/^\s*graph/) !== null) { if (txt.match(/^\s*graph/) !== null) {
return true; return true;
} }
return txt.match(/^\s*flowchart/) !== null; return txt.match(/^\s*flowchart/) !== null;

3
packages/mermaid/src/diagrams/flowchart/flowDetector.ts
View File

@@ -6,5 +6,8 @@ export const flowDetector: DiagramDetector = (txt, config) => {
if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') { if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
return false; return false;
} }
if (config?.flowchart?.defaultRenderer === 'elk') {
return false;
}
return txt.match(/^\s*graph/) !== null; return txt.match(/^\s*graph/) !== null;
}; };