From 38ee4f556e4e9d9d85307c1a9a73defee7ddc2cd Mon Sep 17 00:00:00 2001 From: Danny Shemesh Date: Thu, 23 Apr 2020 18:39:23 +0300 Subject: [PATCH] Added (& pretty-printed) sequence diagram docs This commit adds documentation to new config variables that were introduced as part of this PR, namely, the font settings for actors, messages and notes. I've also linted the markdown document. --- docs/sequenceDiagram.md | 147 +++++++++++++++++++++++----------------- 1 file changed, 84 insertions(+), 63 deletions(-) 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: + ```