mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-21 06:53:17 +08:00
8d90815862
* develop: (192 commits) build(deps-dev): bump vite from 4.4.9 to 4.4.12 Changes to .prettierignore 1. Added 'demos/dev/**' to be ignored by Prettier. 2. Added '!/demos/dev/example.html' so that Prettier ensures no one changes the example.html in a way that doesn't obey the Prettier code formatting rules. build: use `tsx` instead of `ts-node-esm` chore: Downgrade node to 18.18.2 fix: #5100 Add viewbox to sankey chore(deps): update all minor dependencies chore: Rename test test: Add unit test for generic classname and namespace fix: Check if parentCommit is provided Split type from generic class name Condition of Parent Id Without Merge Commit Added Referenced the PmWiki's Cookbook recipe enabling MermaidJs schematics in wiki pages test(e2e): fix pie chart E2E tests for PR #4288 Add dummy commit to trigger GH checks chore: Revert unnecessary export refactor: Remove unnecessary calculations chore: Fix computeWidth function chore: Cleanup setupGraphViewbox Update docs update mermaidAPI to cleanup the text before passing to getDiagramFromText ...
225 lines
7.0 KiB
HTML
225 lines
7.0 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
|
|
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">
|
|
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>
|