mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-21 06:53:17 +08:00
d1178c490b
* develop: (47 commits) Changes to gantt.html 1. Added a Gantt diagram that demonstrates to users that hashtages and semicolons can be added to titles, sections, and task data. Changes to gantt.spec.js 1. Added unit tests to ensure that semicolons and hashtags didn't break the functionality of the gantt diagram when used in titles, sections or task data. Changes to /parser/gantt.spec.js 1. Added rendering tests to ensure that semicolons and hashtags in titles, sections, and task data didn't break the rendering of Gantt diagrams. Lint Remove echo RefTest Echo event Update cypress Fix applitools docs: fix lint docs: move community to Discord Swap condition blocks to avoid using negation Reposition const declaration to ideal place Change repetitive values into consts docs: fix swimm link add sequenceDiagram link e2e test Fix Update Browserslist Use pnpm/action-setup@v2 Fix lint Delete docs/syntax/gantt.html Add more detailed docs for Gantt tasks Update docs ...
249 lines
7.8 KiB
HTML
249 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>Mermaid Quick Test Page</title>
|
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
|
<style>
|
|
div.mermaid {
|
|
/* font-family: 'trebuchet ms', verdana, arial; */
|
|
font-family: 'Courier New', Courier, monospace !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Sequence diagram demos</h1>
|
|
<pre class="mermaid">
|
|
sequenceDiagram
|
|
accTitle: test the accTitle
|
|
accDescr: Test a description
|
|
|
|
participant Alice
|
|
participant Bob
|
|
participant John as John<br />Second Line
|
|
link Alice: Dashboard @ https://dashboard.contoso.com/alice
|
|
link Alice: Wiki @ https://wiki.contoso.com/alice
|
|
link John: Dashboard @ https://dashboard.contoso.com/john
|
|
link John: Wiki @ https://wiki.contoso.com/john
|
|
autonumber 10 10
|
|
rect rgb(200, 220, 100)
|
|
rect rgb(200, 255, 200)
|
|
|
|
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-->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>
|
|
<hr />
|
|
<pre class="mermaid">
|
|
---
|
|
title: With forced menus
|
|
config:
|
|
sequence:
|
|
forceMenus: true
|
|
---
|
|
sequenceDiagram
|
|
participant Alice
|
|
participant John
|
|
link Alice: Dashboard @ https://dashboard.contoso.com/alice
|
|
link Alice: Wiki @ https://wiki.contoso.com/alice
|
|
link John: Dashboard @ https://dashboard.contoso.com/john
|
|
link John: Wiki @ https://wiki.contoso.com/john
|
|
Alice->>John: Hello John, how are you?
|
|
John-->>Alice: Great!
|
|
Alice-)John: See you later!
|
|
</pre
|
|
>
|
|
<hr />
|
|
<pre class="mermaid">
|
|
sequenceDiagram
|
|
accTitle: Sequence diagram title is here
|
|
accDescr: Hello friends
|
|
|
|
participant Alice
|
|
participant Bob
|
|
participant John as John<br />Second Line
|
|
rect rgb(200, 220, 100)
|
|
rect rgb(200, 255, 200)
|
|
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-->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
|
|
alt either this
|
|
Alice->>John: Yes
|
|
else or this
|
|
Alice->>John: No
|
|
else or this will happen
|
|
Alice->John: Maybe
|
|
end
|
|
par this happens in parallel
|
|
Alice -->> Bob: Parallel message 1
|
|
and
|
|
Alice -->> John: Parallel message 2
|
|
end
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
sequenceDiagram
|
|
participant 1 as multiline<br>using #lt;br#gt;
|
|
participant 2 as multiline<br />using #lt;br/#gt;
|
|
participant 3 as multiline<br />using #lt;br /#gt;
|
|
participant 4 as multiline<br />using #lt;br /#gt;
|
|
1->>2: multiline<br>using #lt;br#gt;
|
|
note right of 2: multiline<br>using #lt;br#gt;
|
|
2->>3: multiline<br />using #lt;br/#gt;
|
|
note right of 3: multiline<br />using #lt;br/#gt;
|
|
3->>4: multiline<br />using #lt;br /#gt;
|
|
note right of 4: multiline<br />using #lt;br /#gt;
|
|
4->>1: multiline<br />using #lt;br /#gt;
|
|
note right of 1: multiline<br />using #lt;br /#gt;
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
sequenceDiagram
|
|
autonumber
|
|
Alice->>John: Hello John,<br>how are you?
|
|
autonumber 50 10
|
|
Alice->>John: John,<br />can you hear me?
|
|
John-->>Alice: Hi Alice,<br />I can hear you!
|
|
autonumber off
|
|
John-->>Alice: I feel great!
|
|
</pre>
|
|
<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
|
|
>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
sequenceDiagram
|
|
participant Alice
|
|
participant Bob
|
|
participant John
|
|
par_over Section title
|
|
Alice ->> Bob: Message 1<br>Second line
|
|
Bob ->> John: Message 2
|
|
end
|
|
par_over Two line<br>section title
|
|
Note over Alice: Alice note
|
|
Note over Bob: Bob note<br>Second line
|
|
Note over John: John note
|
|
end
|
|
par_over Mixed section
|
|
Alice ->> Bob: Message 1
|
|
Note left of Bob: Alice/Bob Note
|
|
end
|
|
</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({
|
|
theme: 'base',
|
|
// themeCSS: '.node rect { fill: red; }',
|
|
logLevel: 3,
|
|
securityLevel: 'loose',
|
|
flowchart: { curve: 'basis' },
|
|
gantt: { axisFormat: '%m/%d/%Y' },
|
|
sequence: { actorMargin: 50 },
|
|
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|