Usage

1Andrew->China: Says Hello
2Note right of China: China thinks\nabout it
3China-->Andrew: How are you?
4Andrew->>China: I am good thanks!

 1    Andrew->China: Says Hello
 2    Note right of China: China thinks\nabout it
 3    China-->Andrew: How are you?
 4    Andrew->>China: I am good thanks!
 5    ```
 6
 7## Configuration
 8
 9Configure for all home and regular pages:
10
11```toml
12[params.sequenceDiagrams]
13  enable = true
14  options = "{theme: 'hand'}"

Configure for a single post in the front matter (Params in front matter have higher precedence):

1sequenceDiagrams: 
2  enable: true
3  options: "{theme: 'hand'}"

Options

1options = {
2  // Change the styling of the diagram, typically one of 'simple', 'hand'. New themes can be registered with registerTheme(...).
3  theme: string,
4
5  // CSS style to apply to the diagram's svg tag. (Only supported if using snap.svg)
6  css_class: string,
7}

See more information from https://github.com/bramp/js-sequence-diagrams.

Examples

1Title: Here is a title
2A->B: Normal line
3B-->C: Dashed line
4C->>D: Open arrow
5D-->>A: Dashed open arrow

```sequence
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
```

1# Example of a comment.
2Note left of A: Note to the\n left of A
3Note right of A: Note to the\n right of A
4Note over A: Note over A
5Note over A,B: Note over both A and B

```sequence
# Example of a comment.
Note left of A: Note to the\n left of A
Note right of A: Note to the\n right of A
Note over A: Note over A
Note over A,B: Note over both A and B
```