mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-14 17:54:13 +01:00
Merge branch 'develop' into origin/3258_Flowchart_nodeSpacing_Subgraph
This commit is contained in:
rowanfr
139
demos/block.html
Normal file
139
demos/block.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Mermaid Block diagram demo page</title>
|
||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Block diagram demos</h1>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
columns 1
|
||||
db(("DB"))
|
||||
blockArrowId6<[" "]>(down)
|
||||
block:ID
|
||||
A
|
||||
B["A wide one in the middle"]
|
||||
C
|
||||
end
|
||||
space
|
||||
D
|
||||
ID --> D
|
||||
C --> D
|
||||
style B fill:#f9F,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
A1["square"]
|
||||
B1("rounded")
|
||||
C1(("circle"))
|
||||
A2>"rect_left_inv_arrow"]
|
||||
B2{"diamond"}
|
||||
C2{{"hexagon"}}
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
A1(["stadium"])
|
||||
A2[["subroutine"]]
|
||||
B1[("cylinder")]
|
||||
C1>"surprise"]
|
||||
A3[/"lean right"/]
|
||||
B2[\"lean left"\]
|
||||
C2[/"trapezoid"\]
|
||||
D2[\"trapezoid"/]
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block:e:4
|
||||
columns 2
|
||||
f
|
||||
g
|
||||
end
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
block:e:4
|
||||
columns 2
|
||||
f
|
||||
g
|
||||
h
|
||||
end
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
columns 3
|
||||
a:3
|
||||
block:e:3
|
||||
f
|
||||
g
|
||||
end
|
||||
h
|
||||
i
|
||||
j
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
columns 4
|
||||
a b c d
|
||||
block:e:4
|
||||
columns 2
|
||||
f
|
||||
g
|
||||
h
|
||||
end
|
||||
i:4
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart LR
|
||||
X-- "a label" -->z
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
columns 5
|
||||
A space B
|
||||
A --x B
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
columns 3
|
||||
a["A wide one"] b:2 c:2 d
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
columns 3
|
||||
a b c
|
||||
e:3
|
||||
f g h
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
|
||||
A1:3
|
||||
A2:1
|
||||
A3
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
block: {
|
||||
padding: 10,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1102,6 +1102,57 @@
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h2>Sample 20</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
|
||||
A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
|
||||
B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
|
||||
C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
|
||||
A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
|
||||
B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
|
||||
C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h2>Sample 21</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h2>Sample 22</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
@@ -1524,11 +1575,11 @@
|
||||
F{Flow 2} == Choice 2.1 ==> H[Feedback node]
|
||||
H[Feedback node] ==> B[Step 1]
|
||||
F{Flow 2} == Choice 2.2 ==> G((Finish))
|
||||
|
||||
|
||||
linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
|
||||
|
||||
classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
|
||||
classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
|
||||
classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
|
||||
classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
|
||||
classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px
|
||||
|
||||
|
||||
@@ -81,6 +81,9 @@
|
||||
<li>
|
||||
<h2><a href="./sankey.html">Sankey</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./block.html">Layered Blocks</a></h2>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<body>
|
||||
<h1>Pie chart demos</h1>
|
||||
<pre class="mermaid">
|
||||
pie title Pets adopted by volunteers
|
||||
pie title Default text position: Animal adoption
|
||||
accTitle: simple pie char demo
|
||||
accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
|
||||
"Dogs": 386
|
||||
@@ -27,7 +27,7 @@
|
||||
<pre class="mermaid">
|
||||
%%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
|
||||
pie
|
||||
title Key elements in Product X
|
||||
title Offset labels close to border: Product X
|
||||
accTitle: Key elements in Product X
|
||||
accDescr: This is a pie chart showing the key elements in Product X.
|
||||
"Calcium": 42.96
|
||||
@@ -36,6 +36,19 @@
|
||||
"Iron": 5
|
||||
</pre>
|
||||
|
||||
<pre class="mermaid">
|
||||
%%{init: {"pie": {"textPosition": 0.45}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
|
||||
pie
|
||||
title Centralized labels: Languages
|
||||
accTitle: Key elements in Product X
|
||||
accDescr: This is a pie chart showing the key elements in Product X.
|
||||
"JavaScript": 30
|
||||
"Python": 25
|
||||
"Java": 20
|
||||
"C#": 15
|
||||
"Others": 10
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
|
||||
@@ -16,9 +16,9 @@
|
||||
<body>
|
||||
<h1>Sequence diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
accTitle: test the accTitle
|
||||
accDescr: Test a description
|
||||
sequenceDiagram
|
||||
accTitle: test the accTitle
|
||||
accDescr: Test a description
|
||||
|
||||
participant Alice
|
||||
participant Bob
|
||||
@@ -31,39 +31,39 @@
|
||||
rect rgb(200, 220, 100)
|
||||
rect rgb(200, 255, 200)
|
||||
|
||||
Alice ->> Bob: Hello Bob, how are you?
|
||||
Bob-->>John: How about you John?
|
||||
end
|
||||
Alice ->> Bob: Hello Bob, how are you?
|
||||
Bob-->>John: How about you John?
|
||||
end
|
||||
|
||||
Bob--x Alice: I am good thanks!
|
||||
Bob-x John: I am good thanks!
|
||||
Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
|
||||
Bob--x Alice: I am good thanks!
|
||||
Bob-x John: I am good thanks!
|
||||
Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
|
||||
|
||||
Bob-->Alice: Checking with John...
|
||||
Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
|
||||
Bob-x John: Hey John - we're still waiting to know<br />how you're doing
|
||||
Note over John:nowrap: John's trying hard not to break his train of thought.
|
||||
Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
|
||||
Note over John: After a few more moments, John<br />finally snaps out of it.
|
||||
end
|
||||
Bob-->Alice: Checking with John...
|
||||
Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
|
||||
Bob-x John: Hey John - we're still waiting to know<br />how you're doing
|
||||
Note over John:nowrap: John's trying hard not to break his train of thought.
|
||||
Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
|
||||
Note over John: After a few more moments, John<br />finally snaps out of it.
|
||||
end
|
||||
|
||||
autonumber off
|
||||
alt either this
|
||||
Alice->>+John: Yes
|
||||
John-->>-Alice: OK
|
||||
else or this
|
||||
autonumber
|
||||
Alice->>John: No
|
||||
else or this will happen
|
||||
Alice->John: Maybe
|
||||
end
|
||||
autonumber 200
|
||||
par this happens in parallel
|
||||
Alice -->> Bob: Parallel message 1
|
||||
and
|
||||
Alice -->> John: Parallel message 2
|
||||
end
|
||||
</pre>
|
||||
autonumber off
|
||||
alt either this
|
||||
Alice->>+John: Yes
|
||||
John-->>-Alice: OK
|
||||
else or this
|
||||
autonumber
|
||||
Alice->>John: No
|
||||
else or this will happen
|
||||
Alice->John: Maybe
|
||||
end
|
||||
autonumber 200
|
||||
par this happens in parallel
|
||||
Alice -->> Bob: Parallel message 1
|
||||
and
|
||||
Alice -->> John: Parallel message 2
|
||||
end
|
||||
</pre>
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
---
|
||||
@@ -153,18 +153,18 @@
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
box lightgreen Alice & John
|
||||
participant A
|
||||
participant J
|
||||
end
|
||||
box Another Group very very long description not wrapped
|
||||
participant B
|
||||
end
|
||||
A->>J: Hello John, how are you?
|
||||
J->>A: Great!
|
||||
A->>B: Hello Bob, how are you ?
|
||||
</pre
|
||||
sequenceDiagram
|
||||
box lightgreen Alice & John
|
||||
participant A
|
||||
participant J
|
||||
end
|
||||
box Another Group very very long description not wrapped
|
||||
participant B
|
||||
end
|
||||
A->>J: Hello John, how are you?
|
||||
J->>A: Great!
|
||||
A->>B: Hello Bob, how are you ?
|
||||
</pre
|
||||
>
|
||||
<hr />
|
||||
|
||||
@@ -187,7 +187,57 @@
|
||||
Note left of Bob: Alice/Bob Note
|
||||
end
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
actor Alice
|
||||
actor John
|
||||
Alice-xJohn: Hello John, how are you?
|
||||
John--xAlice: Great!
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
participant 1 as $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
|
||||
participant 2 as $$\beta$$
|
||||
participant 3 as $$\delta$$
|
||||
participant 4 as $$\frac{\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}}{\frac{\text{d}}{\text{d}x}{x^2}}$$
|
||||
1->>2: $$\sqrt{2}$$
|
||||
note right of 2: $$\frac{1+\frac{1+\frac{1+\frac{1}{2}}{2}}{2}}{2}+\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
|
||||
2->>3: $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
|
||||
note right of 3: $$\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
|
||||
3->>4: $$\lim_{x\rightarrow0}{\frac{1}{x}}$$;
|
||||
note right of 4: multiline
|
||||
4->>1: multiline<br />using #lt;br /#gt;
|
||||
note right of 1: multiline<br />$$\frac{1}{2}$$<br />3rd line
|
||||
</pre>
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
participant 1 as $$\alpha$$lex
|
||||
participant 2 as $$\beta$$ob
|
||||
participant 3 as $$\theta$$iffany
|
||||
1->>2: Hello John, does $$\frac{1}{2}+1=2$$?
|
||||
loop $$\frac{1}{2}+1=2$$
|
||||
2->>2: $$\frac{1}{2}+1=\frac{3}{2}$$
|
||||
end
|
||||
Note right of 2: $$x = \begin{cases} 1 &\text{if } \frac{1}{2}+1=2 \\ 0 &\text{if } \frac{1}{2}+1\ne2 \end{cases}$$
|
||||
2-->>1: $$\frac{1}{2}+1\ne2\implies 1$$
|
||||
2->>3: $$\frac{\text{d}}{\text{d}x}{3x^2+2x+1}$$
|
||||
3-->>2: $$6x+2$$
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
actor Alice
|
||||
actor John
|
||||
Alice-xJohn: Hello John, how are you?
|
||||
John--xAlice: Great!
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
|
||||
@@ -137,7 +137,7 @@ config:
|
||||
plotReservedSpacePercent: 60
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revene"
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
@@ -163,7 +163,7 @@ config:
|
||||
plotColorPalette: "#008000, #faba63"
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revene"
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
|
||||
Reference in New Issue
Block a user