demos/sequence.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>
    <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&nbsp; $$\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>

    <hr />

    <pre class="mermaid">
    sequenceDiagram
      participant Alice
      participant Bob
      Alice<<->>Bob: Hello!
      Alice<<->>Bob: Wow, we said that at the same time!
      Bob<<-->>Alice: Bidirectional Arrows are so cool
    </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>