JS Sequence Diagrams

Reading time: 1 minutes and 9 seconds with 256 words. 本文总阅读量

Usage

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

## Configuration

Configure for all home and regular pages:

toml [params.sequenceDiagrams] enable = true options = “{theme: ‘hand’}”


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

yaml sequenceDiagrams: enable: true options: “{theme: ‘hand’}”


### Options

js options = { // Change the styling of the diagram, typically one of ‘simple’, ‘hand’. New themes can be registered with registerTheme(…). theme: string,

// CSS style to apply to the diagram’s svg tag. (Only supported if using snap.svg) css_class: string, }


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

## Examples

sequence Title: Here is a title A->B: Normal line B–>C: Dashed line C->>D: Open arrow D–>>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
    ```

---

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

```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
```
Avatar
Ye Zhaoliang
Engineer of offshore wind turbine technique research

My research interests include distributed energy, wind turbine power generation technique , Computational fluid dynamic and programmable matter.

本站访问量: