diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md index bc8262ebe..16948a9cb 100755 --- a/docs/sequenceDiagram.md +++ b/docs/sequenceDiagram.md @@ -9,6 +9,7 @@ sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! ``` + ```mermaid sequenceDiagram Alice->>John: Hello John, how are you? @@ -31,6 +32,7 @@ sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! ``` + ```mermaid sequenceDiagram participant John @@ -50,6 +52,7 @@ sequenceDiagram A->>J: Hello John, how are you? J->>A: Great! ``` + ```mermaid sequenceDiagram participant A as Alice @@ -68,14 +71,14 @@ Messages can be of two displayed either solid or with a dotted line. There are six types of arrows currently supported: -Type | Description ---- | --- --> | Solid line without arrow ---> | Dotted line without arrow -->> | Solid line with arrowhead --->> | Dotted line with arrowhead --x | Solid line with a cross at the end (async) ---x | Dotted line with a cross at the end (async) +| Type | Description | +| ---- | ------------------------------------------- | +| -> | Solid line without arrow | +| --> | Dotted line without arrow | +| ->> | Solid line with arrowhead | +| -->> | Dotted line with arrowhead | +| -x | Solid line with a cross at the end (async) | +| --x | Dotted line with a cross at the end (async) | ## Activations @@ -88,6 +91,7 @@ sequenceDiagram John-->>Alice: Great! deactivate John ``` + ```mermaid sequenceDiagram Alice->>John: Hello John, how are you? @@ -103,6 +107,7 @@ sequenceDiagram Alice->>+John: Hello John, how are you? John-->>-Alice: Great! ``` + ```mermaid sequenceDiagram Alice->>+John: Hello John, how are you? @@ -118,6 +123,7 @@ sequenceDiagram John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great! ``` + ```mermaid sequenceDiagram Alice->>+John: Hello John, how are you? @@ -138,6 +144,7 @@ sequenceDiagram participant John Note right of John: Text in note ``` + ```mermaid sequenceDiagram participant John @@ -151,6 +158,7 @@ sequenceDiagram Alice->John: Hello John, how are you? Note over Alice,John: A typical interaction ``` + ```mermaid sequenceDiagram Alice->John: Hello John, how are you? @@ -176,6 +184,7 @@ sequenceDiagram John-->Alice: Great! end ``` + ```mermaid sequenceDiagram Alice->John: Hello John, how are you? @@ -218,6 +227,7 @@ sequenceDiagram Bob->>Alice: Thanks for asking end ``` + ```mermaid sequenceDiagram Alice->>Bob: Hello Bob, how are you? @@ -281,11 +291,13 @@ sequenceDiagram It is possible to highlight flows by providing colored background rects. This is done by the notation The colors are defined using rgb and rgba syntax. + ``` rect rgb(0, 255, 0) ... content ... end ``` + ``` rect rgba(0, 0, 255, .1) ... content ... @@ -327,6 +339,7 @@ sequenceDiagram ## sequenceNumbers It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below: + ```