mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-14 17:54:13 +01:00
Tweaking spacings for elk and confurinable network placement strategy
This commit is contained in:
Knut Sveidqvist
@@ -76,13 +76,89 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<pre id="diagram" class="mermaid2">
|
<pre id="diagram" class="mermaid2">
|
||||||
|
%%{
|
||||||
|
init: {
|
||||||
|
"theme":"base",
|
||||||
|
"fontFamily": "Kalam",
|
||||||
|
"themeVariables": {
|
||||||
|
"background": "#FFFFFF",
|
||||||
|
"primaryColor": "#7bdfa7",
|
||||||
|
"primaryTextColor": "#3c3c3b",
|
||||||
|
"secondaryColor": "#642470",
|
||||||
|
"secondaryTextColor": "#3c3c3b",
|
||||||
|
"tertiaryColor": "#1c736D",
|
||||||
|
"tertiaryTextColor": "#3c3c3b",
|
||||||
|
"noteBkgColor": "#9fd8ef",
|
||||||
|
"loopTextColor": "#636362",
|
||||||
|
"labelBoxBkgColor": "#642470",
|
||||||
|
"labelBoxBorderColor": "#642470",
|
||||||
|
"labelTextColor": "#d4d4d4",
|
||||||
|
"signalTextColor": "#636362",
|
||||||
|
"signalColor": "#642470"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}%%
|
||||||
|
sequenceDiagram
|
||||||
|
Alice->>+John: Hello John, how are you?
|
||||||
|
Alice->>+John: John, can you hear me?
|
||||||
|
John-->>-Alice: Hi Alice, I can hear you!
|
||||||
|
John-->>-Alice: I feel great!
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
|
%%{
|
||||||
|
init: {
|
||||||
|
"theme":"base",
|
||||||
|
"fontFamily": "Forth Bold",
|
||||||
|
"themeVariables": {
|
||||||
|
"background": "#FFFFFF",
|
||||||
|
"primaryColor": "#7bdfa7",
|
||||||
|
"primaryTextColor": "#3c3c3b",
|
||||||
|
"secondaryColor": "#642470",
|
||||||
|
"secondaryTextColor": "#3c3c3b",
|
||||||
|
"tertiaryColor": "#1c736D",
|
||||||
|
"tertiaryTextColor": "#3c3c3b",
|
||||||
|
"noteBkgColor": "#9fd8ef",
|
||||||
|
"loopTextColor": "#636362",
|
||||||
|
"labelBoxBkgColor": "#642470",
|
||||||
|
"labelBoxBorderColor": "#642470",
|
||||||
|
"labelTextColor": "#d4d4d4",
|
||||||
|
"signalTextColor": "#636362",
|
||||||
|
"signalColor": "#642470"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}%%
|
||||||
|
sequenceDiagram
|
||||||
|
Alice->>+John: Hello John, how are you?
|
||||||
|
Alice->>+John: John, can you hear me?
|
||||||
|
John-->>-Alice: Hi Alice, I can hear you!
|
||||||
|
John-->>-Alice: I feel great!
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
|
||||||
|
<pre id="diagram" class="mermaid">
|
||||||
%%{init: {"layout": "elk", "mergeEdges": true} }%%
|
%%{init: {"layout": "elk", "mergeEdges": true} }%%
|
||||||
stateDiagram
|
stateDiagram
|
||||||
direction TB
|
direction TB
|
||||||
T00 --> T0
|
T00 --> T0
|
||||||
|
T00 --> T1
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
|
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "NETWORK_SIMPLEX"} }%%
|
||||||
|
stateDiagram
|
||||||
|
State T0 {
|
||||||
|
direction LR
|
||||||
|
A --> B
|
||||||
|
}
|
||||||
|
State T1 {
|
||||||
|
[*] --> NumLockOff
|
||||||
|
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||||
|
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||||
|
}
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<pre id="diagram" class="mermaid2">
|
||||||
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
|
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
|
||||||
stateDiagram
|
stateDiagram
|
||||||
direction TB
|
direction TB
|
||||||
@@ -91,7 +167,7 @@ stateDiagram
|
|||||||
}
|
}
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid2">
|
||||||
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
|
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
|
||||||
stateDiagram
|
stateDiagram
|
||||||
State T1 {
|
State T1 {
|
||||||
@@ -101,7 +177,7 @@ State T1 {
|
|||||||
}
|
}
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid2">
|
||||||
%%{init: {"layout": "elk", "mergeEdges": true} }%%
|
%%{init: {"layout": "elk", "mergeEdges": true} }%%
|
||||||
stateDiagram
|
stateDiagram
|
||||||
direction TB
|
direction TB
|
||||||
@@ -110,7 +186,7 @@ stateDiagram
|
|||||||
}
|
}
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid2">
|
||||||
%%{init: {"layout": "elk", "mergeEdges": true} }%%
|
%%{init: {"layout": "elk", "mergeEdges": true} }%%
|
||||||
stateDiagram
|
stateDiagram
|
||||||
State T1 {
|
State T1 {
|
||||||
@@ -161,439 +237,25 @@ stateDiagram-v2
|
|||||||
%% Outer --> Inner
|
%% Outer --> Inner
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
stateDiagram
|
|
||||||
direction TB
|
|
||||||
|
|
||||||
accTitle: This is the accessible title
|
|
||||||
accDescr: This is an accessible description
|
|
||||||
|
|
||||||
classDef notMoving fill:white,color:#000
|
|
||||||
classDef movement font-style:italic;
|
|
||||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
|
|
||||||
|
|
||||||
[*] --> Still:::notMoving
|
|
||||||
Still --> [*]
|
|
||||||
Still --> Moving:::movement
|
|
||||||
Moving --> Still
|
|
||||||
Moving --> Crash:::movement
|
|
||||||
Crash:::badBadEvent --> [*]
|
|
||||||
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
%%{init: {"look": "classic"} }%%
|
|
||||||
stateDiagram-v2
|
|
||||||
TN3: The state with a note
|
|
||||||
note right of TN3
|
|
||||||
Important information! You can write
|
|
||||||
notes.
|
|
||||||
end note
|
|
||||||
TN3 --> TN4
|
|
||||||
note left of TN4 : This is the note to the left.
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
block-beta
|
|
||||||
A["square"]
|
|
||||||
B("rounded")
|
|
||||||
C(("circle"))
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
block-beta
|
|
||||||
A>"rect_left_inv_arrow"]
|
|
||||||
B{"diamond"}
|
|
||||||
C{{"hexagon"}}
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
block-beta
|
|
||||||
A(["stadium"])
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
block-beta
|
|
||||||
%% A[["subroutine"]]
|
|
||||||
%% B[("cylinder")]
|
|
||||||
C>"surprise"]
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
block-beta
|
|
||||||
A[/"lean right"/]
|
|
||||||
B[\"lean left"\]
|
|
||||||
C[/"trapezoid"\]
|
|
||||||
D[\"trapezoid"/]
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
flowchart
|
|
||||||
B
|
|
||||||
style B fill:#f9F,stroke:#333,stroke-width:4px
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
flowchart LR
|
|
||||||
a1 -- apa --> b1
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
flowchart RL
|
|
||||||
subgraph "`one`"
|
|
||||||
a1 -- l1 --> a2
|
|
||||||
a1 -- l2 --> a2
|
|
||||||
end
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
flowchart RL
|
|
||||||
subgraph "`one`"
|
|
||||||
a1 -- l1 --> a2
|
|
||||||
a1 -- l2 --> a2
|
|
||||||
end
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
flowchart
|
|
||||||
id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
flowchart LR
|
|
||||||
A[A text that needs to be wrapped wraps to another line]
|
|
||||||
B[A text that needs to be<br/>wrapped wraps to another line]
|
|
||||||
C["`A text that needs to be wrapped to another line`"]</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
flowchart LR
|
|
||||||
C["`A text
|
|
||||||
that needs
|
|
||||||
to be wrapped
|
|
||||||
in another
|
|
||||||
way`"]
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
classDiagram-v2
|
|
||||||
note "I love this diagram!\nDo you love it?"
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
stateDiagram-v2
|
|
||||||
State1: The state with a note with minus - and plus + in it
|
|
||||||
note left of State1
|
|
||||||
Important information! You can write
|
|
||||||
notes with . and in them.
|
|
||||||
end note </pre
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
mindmap
|
|
||||||
root
|
|
||||||
Child3(A node with an icon and with a long text that wraps to keep the node size in check)
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
%%{init: {"theme": "forest"} }%%
|
|
||||||
mindmap
|
|
||||||
id1[**Start2**<br/>end]
|
|
||||||
id2[**Start2**<br />end]
|
|
||||||
%% Another comment
|
|
||||||
id3[**Start2**<br>end] %% Comment
|
|
||||||
id4[**Start2**<br >end<br >the very end]
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
mindmap
|
|
||||||
id1["`**Start2**
|
|
||||||
second line 😎 with long text that is wrapping to the next line`"]
|
|
||||||
id2["`Child **with bold** text`"]
|
|
||||||
id3["`Children of which some
|
|
||||||
is using *italic type of* text`"]
|
|
||||||
id4[Child]
|
|
||||||
id5["`Child
|
|
||||||
Row
|
|
||||||
and another
|
|
||||||
`"]
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
mindmap
|
|
||||||
id1("`**Root**`"]
|
|
||||||
id2["`A formatted text... with **bold** and *italics*`"]
|
|
||||||
id3[Regular labels works as usual]
|
|
||||||
id4["`Emojis and unicode works too: 🤓
|
|
||||||
शान्तिः سلام 和平 `"]
|
|
||||||
|
|
||||||
</pre>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
|
||||||
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
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
|
|
||||||
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 />
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
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 />
|
|
||||||
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
flowchart LR
|
|
||||||
B1 --be be--x B2
|
|
||||||
B1 --bo bo--o B3
|
|
||||||
subgraph Ugge
|
|
||||||
B2
|
|
||||||
B3
|
|
||||||
subgraph inner
|
|
||||||
B4
|
|
||||||
B5
|
|
||||||
end
|
|
||||||
subgraph inner2
|
|
||||||
subgraph deeper
|
|
||||||
C4
|
|
||||||
C5
|
|
||||||
end
|
|
||||||
C6
|
|
||||||
end
|
|
||||||
|
|
||||||
B4 --> C4
|
|
||||||
|
|
||||||
B3 -- X --> B4
|
|
||||||
B2 --> inner
|
|
||||||
|
|
||||||
C4 --> C5
|
|
||||||
end
|
|
||||||
|
|
||||||
subgraph outer
|
|
||||||
B6
|
|
||||||
end
|
|
||||||
B6 --> B5
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
sequenceDiagram
|
|
||||||
Customer->>+Stripe: Makes a payment request
|
|
||||||
Stripe->>+Bank: Forwards the payment request to the bank
|
|
||||||
Bank->>+Customer: Asks for authorization
|
|
||||||
Customer->>+Bank: Provides authorization
|
|
||||||
Bank->>+Stripe: Sends a response with payment details
|
|
||||||
Stripe->>+Merchant: Sends a notification of payment receipt
|
|
||||||
Merchant->>+Stripe: Confirms the payment
|
|
||||||
Stripe->>+Customer: Sends a confirmation of payment
|
|
||||||
Customer->>+Merchant: Receives goods or services
|
|
||||||
</pre
|
|
||||||
>
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
mindmap
|
|
||||||
root((mindmap))
|
|
||||||
Origins
|
|
||||||
Long history
|
|
||||||
::icon(fa fa-book)
|
|
||||||
Popularisation
|
|
||||||
British popular psychology author Tony Buzan
|
|
||||||
Research
|
|
||||||
On effectiveness<br/>and features
|
|
||||||
On Automatic creation
|
|
||||||
Uses
|
|
||||||
Creative techniques
|
|
||||||
Strategic planning
|
|
||||||
Argument mapping
|
|
||||||
Tools
|
|
||||||
Pen and paper
|
|
||||||
Mermaid
|
|
||||||
</pre>
|
|
||||||
<br />
|
|
||||||
<pre id="diagram" class="mermaid2">
|
|
||||||
example-diagram
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<!-- <div id="cy"></div> -->
|
|
||||||
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
|
|
||||||
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
|
|
||||||
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
|
||||||
<!-- <script src="./mermaid.js"></script> -->
|
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
// import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
|
||||||
// import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
|
|
||||||
import mermaid from './mermaid.esm.mjs';
|
import mermaid from './mermaid.esm.mjs';
|
||||||
import { layouts } from './mermaid-layout-elk.esm.mjs';
|
import { layouts } from './mermaid-layout-elk.esm.mjs';
|
||||||
mermaid.registerLayoutLoaders(layouts);
|
mermaid.registerLayoutLoaders(layouts);
|
||||||
// await mermaid.registerExternalDiagrams([example]);
|
|
||||||
mermaid.parseError = function (err, hash) {
|
mermaid.parseError = function (err, hash) {
|
||||||
// console.error('Mermaid error: ', err);
|
console.error('Mermaid error: ', err);
|
||||||
};
|
};
|
||||||
// mermaid.initialize({
|
|
||||||
// // theme: 'forest',
|
|
||||||
// startOnLoad: true,
|
|
||||||
// logLevel: 0,
|
|
||||||
// flowchart: {
|
|
||||||
// // defaultRenderer: 'elk',
|
|
||||||
// useMaxWidth: false,
|
|
||||||
// // htmlLabels: false,
|
|
||||||
// htmlLabels: true,
|
|
||||||
// },
|
|
||||||
// // htmlLabels: false,
|
|
||||||
// gantt: {
|
|
||||||
// useMaxWidth: false,
|
|
||||||
// },
|
|
||||||
// useMaxWidth: false,
|
|
||||||
// });
|
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
theme: 'base',
|
theme: 'base',
|
||||||
handdrawnSeed: 12,
|
handdrawnSeed: 12,
|
||||||
// look: 'handdrawn',
|
look: 'handdrawn',
|
||||||
|
'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||||
// layout: 'dagre',
|
// layout: 'dagre',
|
||||||
layout: 'elk',
|
layout: 'elk',
|
||||||
flowchart: { titleTopMargin: 10 },
|
flowchart: { titleTopMargin: 10 },
|
||||||
// fontFamily: 'Caveat',
|
// fontFamily: 'Caveat',
|
||||||
fontFamily: 'Kalam',
|
// fontFamily: 'Kalam',
|
||||||
|
fontFamily: 'courier',
|
||||||
sequence: {
|
sequence: {
|
||||||
actorFontFamily: 'courier',
|
actorFontFamily: 'courier',
|
||||||
noteFontFamily: 'courier',
|
noteFontFamily: 'courier',
|
||||||
|
|||||||
@@ -1229,6 +1229,7 @@ direction LR
|
|||||||
|
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
handdrawn: false,
|
handdrawn: false,
|
||||||
|
mergeEdges: true,
|
||||||
layout: 'dagre',
|
layout: 'dagre',
|
||||||
flowchart: { titleTopMargin: 10 },
|
flowchart: { titleTopMargin: 10 },
|
||||||
// fontFamily: 'Caveat',
|
// fontFamily: 'Caveat',
|
||||||
@@ -1251,8 +1252,8 @@ direction LR
|
|||||||
|
|
||||||
|
|
||||||
let coll = document.getElementsByClassName("collapsible");
|
let coll = document.getElementsByClassName("collapsible");
|
||||||
for (let i = 0; i < coll.length; i++) {
|
for (const element of coll) {
|
||||||
coll[i].addEventListener("click", function () {
|
element.addEventListener("click", function () {
|
||||||
this.classList.toggle("active");
|
this.classList.toggle("active");
|
||||||
let content = this.nextElementSibling;
|
let content = this.nextElementSibling;
|
||||||
if (content.style.maxHeight) {
|
if (content.style.maxHeight) {
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { curveLinear } from 'd3';
|
|||||||
import ELK from 'elkjs/lib/elk.bundled.js';
|
import ELK from 'elkjs/lib/elk.bundled.js';
|
||||||
import mermaid from 'mermaid';
|
import mermaid from 'mermaid';
|
||||||
import { findCommonAncestor } from './find-common-ancestor.js';
|
import { findCommonAncestor } from './find-common-ancestor.js';
|
||||||
|
import config from '../../mermaid/src/defaultConfig';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
common,
|
common,
|
||||||
@@ -460,18 +461,11 @@ export const render = async (data4Layout, svg, element, algorithm) => {
|
|||||||
id: 'root',
|
id: 'root',
|
||||||
layoutOptions: {
|
layoutOptions: {
|
||||||
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
|
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
|
||||||
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
|
|
||||||
'elk.layered.spacing.edgeNodeBetweenLayers': '30',
|
|
||||||
'elk.algorithm': algorithm,
|
'elk.algorithm': algorithm,
|
||||||
'nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
'nodePlacement.strategy': data4Layout.config['elk.nodePlacement.strategy'],
|
||||||
|
'elk.layered.mergeEdges': data4Layout.config.mergeEdges,
|
||||||
'spacing.nodeNode': 20,
|
'elk.direction': 'DOWN',
|
||||||
'spacing.nodeNodeBetweenLayers': 25,
|
'spacing.baseValue': 30,
|
||||||
'spacing.edgeNode': 10,
|
|
||||||
'spacing.edgeNodeBetweenLayers': 20,
|
|
||||||
'spacing.edgeEdge': 20,
|
|
||||||
'spacing.edgeEdgeBetweenLayers': 20,
|
|
||||||
'spacing.nodeSelfLoop': 20,
|
|
||||||
},
|
},
|
||||||
children: [],
|
children: [],
|
||||||
edges: [],
|
edges: [],
|
||||||
@@ -521,8 +515,12 @@ export const render = async (data4Layout, svg, element, algorithm) => {
|
|||||||
height: node?.labelData?.height || 0,
|
height: node?.labelData?.height || 0,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
node.layoutOptions = {
|
||||||
|
'spacing.baseValue': 30,
|
||||||
|
};
|
||||||
if (node.dir) {
|
if (node.dir) {
|
||||||
node.layoutOptions = {
|
node.layoutOptions = {
|
||||||
|
...node.layoutOptions,
|
||||||
'elk.direction': dir2ElkDirection(node.dir),
|
'elk.direction': dir2ElkDirection(node.dir),
|
||||||
'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
|
'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -92,7 +92,12 @@ export interface MermaidConfig {
|
|||||||
* Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
|
* Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
mergeEdges?: boolean;
|
'elk.mergeEdges'?: boolean;
|
||||||
|
/**
|
||||||
|
* Elk specific option affedcting how nodes are placed.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
'elk.nodePlacement.strategy'?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF';
|
||||||
darkMode?: boolean;
|
darkMode?: boolean;
|
||||||
htmlLabels?: boolean;
|
htmlLabels?: boolean;
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -581,11 +581,11 @@ export const getData = () => {
|
|||||||
// }
|
// }
|
||||||
extract(getRootDocV2());
|
extract(getRootDocV2());
|
||||||
const diagramStates = getStates();
|
const diagramStates = getStates();
|
||||||
|
const config = getConfig();
|
||||||
const useRough = getConfig().look === 'handdrawn';
|
const useRough = config.look === 'handdrawn';
|
||||||
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
|
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
|
||||||
|
|
||||||
return { nodes, edges, other: {} };
|
return { nodes, edges, other: {}, config };
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@@ -100,11 +100,21 @@ properties:
|
|||||||
type: integer
|
type: integer
|
||||||
default: 500
|
default: 500
|
||||||
minimum: 0
|
minimum: 0
|
||||||
mergeEdges:
|
elk.mergeEdges:
|
||||||
description: |
|
description: |
|
||||||
Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
|
Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
|
||||||
type: boolean
|
type: boolean
|
||||||
default: false
|
default: false
|
||||||
|
elk.nodePlacement.strategy:
|
||||||
|
description: |
|
||||||
|
Elk specific option affedcting how nodes are placed.
|
||||||
|
type: string
|
||||||
|
enum:
|
||||||
|
- SIMPLE
|
||||||
|
- NETWORK_SIMPLEX
|
||||||
|
- LINEAR_SEGMENTS
|
||||||
|
- BRANDES_KOEPF
|
||||||
|
default: SIMPLE
|
||||||
darkMode:
|
darkMode:
|
||||||
type: boolean
|
type: boolean
|
||||||
default: false
|
default: false
|
||||||
|
|||||||
Reference in New Issue
Block a user