mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
review comment fixes
This commit is contained in:
parent
ba0d21682a
commit
d4d7ca7d65
@ -9,7 +9,7 @@ elems
|
||||
gantt
|
||||
gitgraph
|
||||
gzipped
|
||||
handdrawn
|
||||
handDrawn
|
||||
knsv
|
||||
Knut
|
||||
marginx
|
||||
|
@ -1,6 +1,6 @@
|
||||
BRANDES
|
||||
circo
|
||||
handdrawn
|
||||
handDrawn
|
||||
KOEPF
|
||||
neato
|
||||
newbranch
|
||||
|
@ -896,10 +896,10 @@ describe('Title and arrow styling #4813', () => {
|
||||
cy.get('svg').should((svg) => {
|
||||
const edges = svg[0].querySelectorAll('.edges path');
|
||||
// console.log(edges);
|
||||
// expect(edges[0]).to.have.attr('pattern', 'solid');
|
||||
// expect(edges[1]).to.have.attr('pattern', 'dotted');
|
||||
// expect(edges[2]).to.have.css('stroke-width', '3.5px');
|
||||
// expect(edges[3]).to.have.css('stroke-width', '1.5px');
|
||||
expect(edges[0]).to.have.attr('pattern', 'solid');
|
||||
expect(edges[1]).to.have.attr('pattern', 'dotted');
|
||||
expect(edges[2]).to.have.css('stroke-width', '3.5px');
|
||||
expect(edges[3]).to.have.css('stroke-width', '1.5px');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -134,7 +134,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart LR
|
||||
id1([This is the text in the box])
|
||||
</pre
|
||||
@ -142,7 +142,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1([This is the text in the box])
|
||||
</pre
|
||||
@ -150,7 +150,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1([This is the text in the box])
|
||||
</pre
|
||||
@ -185,7 +185,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram6" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart LR
|
||||
id1[[This is the text in the box]]
|
||||
</pre
|
||||
@ -193,7 +193,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram7" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1[[This is the text in the box]]
|
||||
</pre
|
||||
@ -201,7 +201,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram8" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1[[This is the text in the box]]
|
||||
</pre
|
||||
@ -236,7 +236,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram10" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart LR
|
||||
id1[(Database)]
|
||||
</pre
|
||||
@ -244,7 +244,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram11" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1[(Database)]
|
||||
</pre
|
||||
@ -252,7 +252,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram12" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1[(Database)]
|
||||
</pre
|
||||
@ -287,7 +287,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram14" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart LR
|
||||
id1((This is the text in the circle))
|
||||
</pre
|
||||
@ -295,7 +295,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram15" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1((This is the text in the circle))
|
||||
</pre
|
||||
@ -303,7 +303,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram16" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1((This is the text in the circle))
|
||||
</pre
|
||||
@ -338,7 +338,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram18" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart TD
|
||||
id1(((This is the text in the circle)))
|
||||
</pre
|
||||
@ -346,7 +346,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram19" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
id1(((This is the text in the circle)))
|
||||
</pre
|
||||
@ -354,7 +354,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram20" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
id1(((This is the text in the circle)))
|
||||
</pre
|
||||
@ -389,7 +389,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram22" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart LR
|
||||
id1>This is the text in the box]
|
||||
</pre
|
||||
@ -397,7 +397,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram23" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1>This is the text in the box]
|
||||
</pre
|
||||
@ -405,7 +405,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram24" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1>This is the text in the box]
|
||||
</pre
|
||||
@ -440,7 +440,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram26" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart LR
|
||||
id1{This is the text in the box}
|
||||
</pre
|
||||
@ -448,7 +448,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram27" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1{This is the text in the box}
|
||||
</pre
|
||||
@ -456,7 +456,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram28" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1{This is the text in the box}
|
||||
</pre
|
||||
@ -491,7 +491,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram31" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1{{This is the text in the box}}
|
||||
</pre
|
||||
@ -499,7 +499,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram32" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1{{This is the text in the box}}
|
||||
</pre
|
||||
@ -534,7 +534,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram34" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart TD
|
||||
id1[/This is the text in the box/]
|
||||
</pre
|
||||
@ -542,7 +542,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram35" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
id1[/This is the text in the box/]
|
||||
</pre
|
||||
@ -550,7 +550,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram36" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
id1[/This is the text in the box/]
|
||||
</pre
|
||||
@ -585,7 +585,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram38" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart TD
|
||||
id1[\This is the text in the box\]
|
||||
</pre
|
||||
@ -593,7 +593,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram39" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
id1[\This is the text in the box\]
|
||||
</pre
|
||||
@ -601,7 +601,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram40" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
id1[\This is the text in the box\]
|
||||
|
||||
@ -637,7 +637,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram42" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart TD
|
||||
A[/Christmas\]
|
||||
</pre
|
||||
@ -645,7 +645,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram43" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
A[/Christmas\]
|
||||
</pre
|
||||
@ -653,7 +653,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram44" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
A[/Christmas\]
|
||||
</pre
|
||||
@ -688,7 +688,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram46" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart TD
|
||||
A[\Christmas/]
|
||||
</pre
|
||||
@ -696,7 +696,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram47" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
A[\Christmas/]
|
||||
</pre
|
||||
@ -704,7 +704,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram48" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart TD
|
||||
A[\Christmas/]
|
||||
</pre
|
||||
@ -739,7 +739,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram50" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart LR
|
||||
id1(This is the text in the box)
|
||||
</pre
|
||||
@ -747,7 +747,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram51" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1(This is the text in the box)
|
||||
</pre
|
||||
@ -755,7 +755,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram52" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1(This is the text in the box)
|
||||
</pre
|
||||
@ -790,7 +790,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram54" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart LR
|
||||
id1[This is the text in the box]
|
||||
</pre
|
||||
@ -798,7 +798,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram55" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1[This is the text in the box]
|
||||
</pre
|
||||
@ -806,7 +806,7 @@ flowchart LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram56" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
flowchart LR
|
||||
id1[This is the text in the box]
|
||||
</pre
|
||||
@ -827,7 +827,7 @@ flowchart LR
|
||||
mermaid.parseError = function (err, hash) {};
|
||||
|
||||
mermaid.initialize({
|
||||
handdrawn: false,
|
||||
handDrawn: false,
|
||||
mergeEdges: true,
|
||||
layout: 'dagre',
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
@ -125,7 +125,7 @@
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
stateA
|
||||
|
||||
@ -134,7 +134,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
flowchart LR
|
||||
id1[[This is the text in the box]]
|
||||
|
||||
@ -152,7 +152,7 @@ flowchart LR
|
||||
mermaid.parseError = function (err, hash) {};
|
||||
|
||||
mermaid.initialize({
|
||||
handdrawn: false,
|
||||
handDrawn: false,
|
||||
mergeEdges: true,
|
||||
layout: 'dagre',
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
@ -36,12 +36,15 @@
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
|
||||
@ -54,6 +57,7 @@
|
||||
10px 10px;
|
||||
background-repeat: repeat; */
|
||||
}
|
||||
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -69,13 +73,19 @@
|
||||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
---
|
||||
config:
|
||||
look: handDrawn
|
||||
---
|
||||
flowchart
|
||||
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
|
||||
a_a --> c --> d_d --> c_c
|
||||
@ -85,7 +95,7 @@ flowchart
|
||||
click c_c callback "new tooltip"
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
<pre id="diagram2" class="mermaid2">
|
||||
flowchart LR
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
@ -94,7 +104,7 @@ flowchart LR
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram3" class="mermaid">
|
||||
<pre id="diagram3" class="mermaid2">
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
@ -105,7 +115,7 @@ flowchart LR
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
stateDiagram
|
||||
A:::foo
|
||||
B:::bar --> C:::foobar
|
||||
@ -127,8 +137,8 @@ flowchart LR
|
||||
};
|
||||
mermaid.initialize({
|
||||
// theme: 'base',
|
||||
// handdrawnSeed: 12,
|
||||
// look: 'handdrawn',
|
||||
// handDrawnSeed: 12,
|
||||
// look: 'handDrawn',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
|
@ -115,7 +115,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
stateId
|
||||
|
||||
@ -123,7 +123,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
stateId
|
||||
|
||||
@ -131,7 +131,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
stateId
|
||||
|
||||
@ -162,21 +162,21 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
state "This is a state description" as s3
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
state "This is a state description" as s4
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
state "This is a state description" as s5
|
||||
</pre>
|
||||
@ -206,7 +206,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
s22 : This is a state description
|
||||
|
||||
@ -214,7 +214,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
s23 : This is a state description
|
||||
|
||||
@ -222,7 +222,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
s24 : This is a state description
|
||||
|
||||
@ -258,7 +258,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
s41 --> s42
|
||||
@ -268,7 +268,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
s51 --> s52
|
||||
|
||||
@ -277,7 +277,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
s61 --> s62
|
||||
|
||||
@ -316,7 +316,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
a3 --> a4: A transition
|
||||
@ -326,7 +326,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
a5 --> a6: A transition
|
||||
|
||||
@ -335,7 +335,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
a7 --> a8: A transition
|
||||
|
||||
@ -376,7 +376,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
[*] --> test
|
||||
@ -387,7 +387,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> test
|
||||
test --> [*]
|
||||
@ -397,7 +397,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> test
|
||||
test --> [*]
|
||||
@ -445,7 +445,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
@ -459,7 +459,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
state First {
|
||||
@ -472,7 +472,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
state First {
|
||||
@ -547,7 +547,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
[*] --> Level1
|
||||
@ -572,7 +572,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> Level1
|
||||
|
||||
@ -595,7 +595,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> Level1
|
||||
|
||||
@ -676,7 +676,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
[*] --> B1
|
||||
@ -699,7 +699,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> B1
|
||||
B1 --> B2
|
||||
@ -722,7 +722,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> B1
|
||||
B1 --> B2
|
||||
@ -784,7 +784,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
state if_state <<choice>>
|
||||
@ -796,7 +796,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
state if_state <<choice>>
|
||||
[*] --> IsPositive
|
||||
@ -807,7 +807,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
state if_state <<choice>>
|
||||
[*] --> IsPositive
|
||||
@ -865,7 +865,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
state fork_state <<fork>>
|
||||
[*] --> fork_state
|
||||
@ -882,7 +882,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
state fork_state <<fork>>
|
||||
[*] --> fork_state
|
||||
@ -899,7 +899,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
state fork_state <<fork>>
|
||||
[*] --> fork_state
|
||||
@ -955,7 +955,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
TN3: The state with a note
|
||||
note right of TN3
|
||||
@ -968,7 +968,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
TN5: The state with a note
|
||||
note right of TN5
|
||||
@ -982,7 +982,7 @@ stateDiagram-v2
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
TN7: The state with a note
|
||||
note right of TN7
|
||||
@ -1052,7 +1052,7 @@ state Active {
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
@ -1073,7 +1073,7 @@ state Active {
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
@ -1095,7 +1095,7 @@ state Active {
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
@ -1159,7 +1159,7 @@ direction LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handdrawn"} }%%
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
direction LR
|
||||
[*] --> D1
|
||||
@ -1174,7 +1174,7 @@ direction LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
direction LR
|
||||
[*] --> D1
|
||||
@ -1189,7 +1189,7 @@ direction LR
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
direction LR
|
||||
[*] --> D1
|
||||
@ -1229,7 +1229,7 @@ direction LR
|
||||
};
|
||||
|
||||
mermaid.initialize({
|
||||
handdrawn: false,
|
||||
handDrawn: false,
|
||||
mergeEdges: true,
|
||||
layout: 'dagre',
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
@ -1254,7 +1254,7 @@ direction LR
|
||||
|
||||
let coll = document.getElementsByClassName("collapsible");
|
||||
for (const element of coll) {
|
||||
element.addEventListener("click", function () {
|
||||
element.addEventListener("click", function () {
|
||||
this.classList.toggle("active");
|
||||
let content = this.nextElementSibling;
|
||||
if (content.style.maxHeight) {
|
||||
|
@ -210,11 +210,11 @@ If set to true, ignores legacyMathML.
|
||||
|
||||
---
|
||||
|
||||
### handdrawnSeed
|
||||
### handDrawnSeed
|
||||
|
||||
• `Optional` **handdrawnSeed**: `number`
|
||||
• `Optional` **handDrawnSeed**: `number`
|
||||
|
||||
Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
|
||||
Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
|
||||
|
||||
#### Defined in
|
||||
|
||||
@ -283,7 +283,7 @@ This option decides the amount of logging to be used by mermaid.
|
||||
|
||||
### look
|
||||
|
||||
• `Optional` **look**: `"classic"` | `"handdrawn"`
|
||||
• `Optional` **look**: `"classic"` | `"handDrawn"`
|
||||
|
||||
Defines which main look to use for the diagram.
|
||||
|
||||
|
@ -68,12 +68,12 @@ export interface MermaidConfig {
|
||||
* Defines which main look to use for the diagram.
|
||||
*
|
||||
*/
|
||||
look?: 'classic' | 'handdrawn';
|
||||
look?: 'classic' | 'handDrawn';
|
||||
/**
|
||||
* Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
|
||||
* Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
|
||||
*
|
||||
*/
|
||||
handdrawnSeed?: number;
|
||||
handDrawnSeed?: number;
|
||||
/**
|
||||
* Defines which layout algorithm to use for rendering the diagram.
|
||||
*
|
||||
|
@ -23,7 +23,7 @@ export interface FlowEdge {
|
||||
end: string;
|
||||
interpolate?: string;
|
||||
type?: string;
|
||||
stroke?: 'normal' | 'thick' | 'invisible';
|
||||
stroke?: 'normal' | 'thick' | 'invisible' | 'dotted';
|
||||
style?: string[];
|
||||
length?: number;
|
||||
text: string;
|
||||
|
@ -11,12 +11,12 @@ import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
|
||||
const rect = async (parent, node) => {
|
||||
log.info('Creating subgraph rect for ', node.id, node);
|
||||
const siteConfig = getConfig();
|
||||
const { themeVariables, handdrawnSeed } = siteConfig;
|
||||
const { themeVariables, handDrawnSeed } = siteConfig;
|
||||
const { clusterBkg, clusterBorder } = themeVariables;
|
||||
|
||||
const { labelStyles, nodeStyles } = styles2String(node);
|
||||
@ -63,7 +63,7 @@ const rect = async (parent, node) => {
|
||||
|
||||
log.trace('Data ', node, JSON.stringify(node));
|
||||
let rect;
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore TODO: Fix rough typings
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {
|
||||
@ -72,7 +72,7 @@ const rect = async (parent, node) => {
|
||||
// fill: 'red',
|
||||
stroke: clusterBorder,
|
||||
fillWeight: 3,
|
||||
seed: handdrawnSeed,
|
||||
seed: handDrawnSeed,
|
||||
});
|
||||
const roughNode = rc.path(createRoundedRectPathD(x, y, width, height, 0), options);
|
||||
rect = shapeSvg.insert(() => {
|
||||
@ -162,7 +162,7 @@ const noteGroup = (parent, node) => {
|
||||
const roundedWithTitle = async (parent, node) => {
|
||||
const siteConfig = getConfig();
|
||||
|
||||
const { themeVariables, handdrawnSeed } = siteConfig;
|
||||
const { themeVariables, handDrawnSeed } = siteConfig;
|
||||
const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } =
|
||||
themeVariables;
|
||||
|
||||
@ -218,7 +218,7 @@ const roundedWithTitle = async (parent, node) => {
|
||||
|
||||
// add the rect
|
||||
let rect;
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
const isAlt = node.cssClasses.includes('statediagram-cluster-alt');
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const roughOuterNode =
|
||||
@ -228,16 +228,16 @@ const roundedWithTitle = async (parent, node) => {
|
||||
fill: compositeTitleBackground,
|
||||
fillStyle: 'solid',
|
||||
stroke: nodeBorder,
|
||||
seed: handdrawnSeed,
|
||||
seed: handDrawnSeed,
|
||||
})
|
||||
: rc.rectangle(x, y, width, height, { seed: handdrawnSeed });
|
||||
: rc.rectangle(x, y, width, height, { seed: handDrawnSeed });
|
||||
|
||||
rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
|
||||
const roughInnerNode = rc.rectangle(x, innerY, width, innerHeight, {
|
||||
fill: isAlt ? altBackground : compositeBackground,
|
||||
fillStyle: isAlt ? 'hachure' : 'solid',
|
||||
stroke: nodeBorder,
|
||||
seed: handdrawnSeed,
|
||||
seed: handDrawnSeed,
|
||||
});
|
||||
|
||||
rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
|
||||
@ -283,7 +283,7 @@ const roundedWithTitle = async (parent, node) => {
|
||||
const divider = (parent, node) => {
|
||||
const siteConfig = getConfig();
|
||||
|
||||
const { themeVariables, handdrawnSeed } = siteConfig;
|
||||
const { themeVariables, handDrawnSeed } = siteConfig;
|
||||
const { nodeBorder } = themeVariables;
|
||||
|
||||
// Add outer g element
|
||||
@ -310,14 +310,14 @@ const divider = (parent, node) => {
|
||||
|
||||
// add the rect
|
||||
let rect;
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const roughOuterNode = rc.rectangle(x, y, width, height, {
|
||||
fill: 'lightgrey',
|
||||
roughness: 0.5,
|
||||
strokeLineDash: [5],
|
||||
stroke: nodeBorder,
|
||||
seed: handdrawnSeed,
|
||||
seed: handDrawnSeed,
|
||||
});
|
||||
|
||||
rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
|
||||
|
@ -423,7 +423,7 @@ const fixCorners = function (lineData) {
|
||||
};
|
||||
|
||||
export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
|
||||
const { handdrawnSeed } = getConfig();
|
||||
const { handDrawnSeed } = getConfig();
|
||||
let points = edge.points;
|
||||
let pointsHasChanged = false;
|
||||
const tail = startNode;
|
||||
@ -510,13 +510,13 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
||||
let svgPath;
|
||||
let linePath = lineFunction(lineData);
|
||||
const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
|
||||
if (edge.look === 'handdrawn') {
|
||||
if (edge.look === 'handDrawn') {
|
||||
const rc = rough.svg(elem);
|
||||
Object.assign([], lineData);
|
||||
|
||||
const svgPathNode = rc.path(linePath, {
|
||||
roughness: 0.3,
|
||||
seed: handdrawnSeed,
|
||||
seed: handDrawnSeed,
|
||||
});
|
||||
|
||||
strokeClasses += ' transition';
|
||||
|
@ -3,7 +3,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import type { SVG } from '$root/diagram-api/types.js';
|
||||
// @ts-ignore TODO: Fix rough typings
|
||||
import rough from 'roughjs';
|
||||
import { solidStateFill, styles2String } from './handdrawnStyles.js';
|
||||
import { solidStateFill, styles2String } from './handDrawnStyles.js';
|
||||
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||
|
||||
export const choice = (parent: SVG, node: Node) => {
|
||||
@ -25,7 +25,7 @@ export const choice = (parent: SVG, node: Node) => {
|
||||
];
|
||||
|
||||
let choice;
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore TODO: Fix rough typings
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const pointArr = points.map(function (d) {
|
||||
|
@ -5,7 +5,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
|
||||
export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
|
||||
@ -17,7 +17,7 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
|
||||
let circleElem;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
|
||||
export const createCylinderPathD = (
|
||||
@ -63,7 +63,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
|
||||
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
|
||||
|
@ -5,7 +5,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
|
||||
export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
|
||||
@ -19,7 +19,7 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
|
||||
let circleGroup;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 });
|
||||
|
@ -5,7 +5,7 @@ import { createRoundedRectPathD } from './roundedRectPath.js';
|
||||
import {
|
||||
userNodeOverrides,
|
||||
styles2String,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
|
||||
export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
|
||||
@ -31,7 +31,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
|
||||
ry = options.ry;
|
||||
}
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore TODO: Fix rough typings
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -3,7 +3,7 @@ import intersect from '../intersect/index.js';
|
||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import type { SVG } from '$root/diagram-api/types.js';
|
||||
import rough from 'roughjs';
|
||||
import { solidStateFill } from './handdrawnStyles.js';
|
||||
import { solidStateFill } from './handDrawnStyles.js';
|
||||
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||
|
||||
export const forkJoin = (parent: SVG, node: Node, dir: string) => {
|
||||
@ -25,7 +25,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
|
||||
const y = (-1 * height) / 2;
|
||||
|
||||
let shape;
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore TODO: Fix rough typings
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor));
|
||||
|
@ -3,7 +3,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
|
||||
// Striped fill like start or fork nodes in state diagrams
|
||||
export const solidStateFill = (color: string) => {
|
||||
const { handdrawnSeed } = getConfig();
|
||||
const { handDrawnSeed } = getConfig();
|
||||
return {
|
||||
fill: color,
|
||||
hachureAngle: 120, // angle of hachure,
|
||||
@ -11,7 +11,7 @@ export const solidStateFill = (color: string) => {
|
||||
fillWeight: 2,
|
||||
roughness: 0.7,
|
||||
stroke: color,
|
||||
seed: handdrawnSeed,
|
||||
seed: handDrawnSeed,
|
||||
};
|
||||
};
|
||||
|
||||
@ -72,7 +72,7 @@ export const styles2String = (node: Node) => {
|
||||
// Striped fill like start or fork nodes in state diagrams
|
||||
// TODO remove any
|
||||
export const userNodeOverrides = (node: Node, options: any) => {
|
||||
const { themeVariables, handdrawnSeed } = getConfig();
|
||||
const { themeVariables, handDrawnSeed } = getConfig();
|
||||
const { nodeBorder, mainBkg } = themeVariables;
|
||||
const { stylesMap } = compileStyles(node);
|
||||
|
||||
@ -84,7 +84,7 @@ export const userNodeOverrides = (node: Node, options: any) => {
|
||||
fillStyle: 'hachure', // solid fill
|
||||
fillWeight: 4,
|
||||
stroke: stylesMap.get('stroke') || nodeBorder,
|
||||
seed: handdrawnSeed,
|
||||
seed: handDrawnSeed,
|
||||
strokeWidth: 1.3,
|
||||
},
|
||||
options
|
||||
|
@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
|
||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||
@ -48,7 +48,7 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
|
||||
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||
|
||||
@ -40,7 +40,7 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
|
||||
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||
|
||||
@ -40,7 +40,7 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
|
||||
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||
|
||||
@ -40,7 +40,7 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
|
||||
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -6,7 +6,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import rough from 'roughjs';
|
||||
|
||||
export const note = async (parent: SVGAElement, node: Node) => {
|
||||
const { themeVariables, handdrawnSeed } = getConfig();
|
||||
const { themeVariables, handDrawnSeed } = getConfig();
|
||||
const { noteBorderColor, noteBkgColor } = themeVariables;
|
||||
|
||||
const useHtmlLabels = node.useHtmlLabels;
|
||||
@ -23,7 +23,7 @@ export const note = async (parent: SVGAElement, node: Node) => {
|
||||
const x = -totalWidth / 2;
|
||||
const y = -totalHeight / 2;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// add the rect
|
||||
// @ts-ignore TODO: Fix rough typings
|
||||
const rc = rough.svg(shapeSvg);
|
||||
@ -31,7 +31,7 @@ export const note = async (parent: SVGAElement, node: Node) => {
|
||||
roughness: 0.7,
|
||||
fill: noteBkgColor,
|
||||
fillWeight: 3,
|
||||
seed: handdrawnSeed,
|
||||
seed: handDrawnSeed,
|
||||
// fillStyle: 'solid', // solid fill'
|
||||
stroke: noteBorderColor,
|
||||
});
|
||||
|
@ -5,7 +5,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||
|
||||
@ -38,7 +38,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
|
||||
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||
|
||||
@ -40,7 +40,7 @@ export const rect_left_inv_arrow = async (
|
||||
let polygon;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -7,7 +7,7 @@ import intersect from '../intersect/index.js';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||
import { createRoundedRectPathD } from './roundedRectPath.js';
|
||||
@ -104,7 +104,7 @@ export const rectWithTitle = async (parent: SVGElement, node: Node) => {
|
||||
const y = -bbox.height / 2 - halfPadding;
|
||||
let rect;
|
||||
let innerLine;
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore No typings for rough
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { createRoundedRectPathD } from './roundedRectPath.js';
|
||||
|
||||
@ -63,7 +63,7 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
|
||||
|
||||
let rect;
|
||||
const { cssStyles } = node;
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -3,7 +3,7 @@ import intersect from '../intersect/index.js';
|
||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import type { SVG } from '$root/diagram-api/types.js';
|
||||
import rough from 'roughjs';
|
||||
import { solidStateFill } from './handdrawnStyles.js';
|
||||
import { solidStateFill } from './handDrawnStyles.js';
|
||||
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||
|
||||
export const stateEnd = (parent: SVG, node: Node) => {
|
||||
@ -16,7 +16,7 @@ export const stateEnd = (parent: SVG, node: Node) => {
|
||||
|
||||
let circle;
|
||||
let innerCircle;
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore TODO: Fix rough typings
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 });
|
||||
|
@ -3,7 +3,7 @@ import intersect from '../intersect/index.js';
|
||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import type { SVG } from '$root/diagram-api/types.js';
|
||||
import rough from 'roughjs';
|
||||
import { solidStateFill } from './handdrawnStyles.js';
|
||||
import { solidStateFill } from './handDrawnStyles.js';
|
||||
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||
|
||||
export const stateStart = (parent: SVG, node: Node) => {
|
||||
@ -16,7 +16,7 @@ export const stateStart = (parent: SVG, node: Node) => {
|
||||
.attr('id', node.domId || node.id);
|
||||
|
||||
let circle;
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore TODO: Fix rough typings
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));
|
||||
|
@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||
|
||||
@ -58,7 +58,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
|
||||
{ x: -8, y: 0 },
|
||||
];
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
|
||||
import {
|
||||
styles2String,
|
||||
userNodeOverrides,
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||
|
||||
@ -40,7 +40,7 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
|
||||
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
|
||||
const { cssStyles } = node;
|
||||
|
||||
if (node.look === 'handdrawn') {
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-ignore - rough is not typed
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@ -133,4 +133,4 @@ export function insertPolygonShape(parent, w, h, points) {
|
||||
}
|
||||
|
||||
export const getNodeClasses = (node, extra) =>
|
||||
(node.look === 'handdrawn' ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');
|
||||
(node.look === 'handDrawn' ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');
|
||||
|
@ -79,11 +79,11 @@ properties:
|
||||
type: string
|
||||
enum:
|
||||
- classic
|
||||
- handdrawn
|
||||
- handDrawn
|
||||
default: 'classic'
|
||||
handdrawnSeed:
|
||||
handDrawnSeed:
|
||||
description: |
|
||||
Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
|
||||
Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
|
||||
type: number
|
||||
default: 0
|
||||
layout:
|
||||
|
18007
pnpm-lock.yaml
generated
18007
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user