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
			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>