mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-04 12:54:08 +01:00
182 lines
5.3 KiB
HTML
182 lines
5.3 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>
|
|
|
|
<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>
|