|
@@ -74,79 +74,141 @@ Academic supports a Markdown extension for diagrams. You can enable this feature
|
|
|
An example **flowchart**:
|
|
|
|
|
|
```mermaid
|
|
|
- graph TD;
|
|
|
- A-->B;
|
|
|
- A-->C;
|
|
|
- B-->D;
|
|
|
- C-->D;
|
|
|
+ graph TD
|
|
|
+ A[Hard] -->|Text| B(Round)
|
|
|
+ B --> C{Decision}
|
|
|
+ C -->|One| D[Result 1]
|
|
|
+ C -->|Two| E[Result 2]
|
|
|
```
|
|
|
|
|
|
renders as
|
|
|
|
|
|
```mermaid
|
|
|
-graph TD;
|
|
|
- A-->B;
|
|
|
- A-->C;
|
|
|
- B-->D;
|
|
|
- C-->D;
|
|
|
+graph TD
|
|
|
+A[Hard] -->|Text| B(Round)
|
|
|
+B --> C{Decision}
|
|
|
+C -->|One| D[Result 1]
|
|
|
+C -->|Two| E[Result 2]
|
|
|
```
|
|
|
|
|
|
An example **sequence diagram**:
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
- participant Alice
|
|
|
- participant Bob
|
|
|
- Alice->John: Hello John, how are you?
|
|
|
- loop Healthcheck
|
|
|
- John->John: Fight against hypochondria
|
|
|
- end
|
|
|
- Note right of John: Rational thoughts <br/>prevail...
|
|
|
- John-->Alice: Great!
|
|
|
- John->Bob: How about you?
|
|
|
- Bob-->John: Jolly good!
|
|
|
+ Alice->>John: Hello John, how are you?
|
|
|
+ loop Healthcheck
|
|
|
+ John->>John: Fight against hypochondria
|
|
|
+ end
|
|
|
+ Note right of John: Rational thoughts!
|
|
|
+ John-->>Alice: Great!
|
|
|
+ John->>Bob: How about you?
|
|
|
+ Bob-->>John: Jolly good!
|
|
|
```
|
|
|
|
|
|
renders as
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
- participant Alice
|
|
|
- participant Bob
|
|
|
- Alice->John: Hello John, how are you?
|
|
|
- loop Healthcheck
|
|
|
- John->John: Fight against hypochondria
|
|
|
- end
|
|
|
- Note right of John: Rational thoughts <br/>prevail...
|
|
|
- John-->Alice: Great!
|
|
|
- John->Bob: How about you?
|
|
|
- Bob-->John: Jolly good!
|
|
|
+Alice->>John: Hello John, how are you?
|
|
|
+loop Healthcheck
|
|
|
+ John->>John: Fight against hypochondria
|
|
|
+end
|
|
|
+Note right of John: Rational thoughts!
|
|
|
+John-->>Alice: Great!
|
|
|
+John->>Bob: How about you?
|
|
|
+Bob-->>John: Jolly good!
|
|
|
```
|
|
|
|
|
|
An example **Gantt diagram**:
|
|
|
|
|
|
```mermaid
|
|
|
gantt
|
|
|
- dateFormat YYYY-MM-DD
|
|
|
- section Section
|
|
|
- A task :a1, 2014-01-01, 30d
|
|
|
- Another task :after a1 , 20d
|
|
|
- section Another
|
|
|
- Task in sec :2014-01-12 , 12d
|
|
|
- another task : 24d
|
|
|
+ section Section
|
|
|
+ Completed :done, des1, 2014-01-06,2014-01-08
|
|
|
+ Active :active, des2, 2014-01-07, 3d
|
|
|
+ Parallel 1 : des3, after des1, 1d
|
|
|
+ Parallel 2 : des4, after des1, 1d
|
|
|
+ Parallel 3 : des5, after des3, 1d
|
|
|
+ Parallel 4 : des6, after des4, 1d
|
|
|
```
|
|
|
|
|
|
renders as
|
|
|
|
|
|
```mermaid
|
|
|
gantt
|
|
|
- dateFormat YYYY-MM-DD
|
|
|
- section Section
|
|
|
- A task :a1, 2014-01-01, 30d
|
|
|
- Another task :after a1 , 20d
|
|
|
- section Another
|
|
|
- Task in sec :2014-01-12 , 12d
|
|
|
- another task : 24d
|
|
|
+section Section
|
|
|
+Completed :done, des1, 2014-01-06,2014-01-08
|
|
|
+Active :active, des2, 2014-01-07, 3d
|
|
|
+Parallel 1 : des3, after des1, 1d
|
|
|
+Parallel 2 : des4, after des1, 1d
|
|
|
+Parallel 3 : des5, after des3, 1d
|
|
|
+Parallel 4 : des6, after des4, 1d
|
|
|
+```
|
|
|
+
|
|
|
+An example **class diagram**:
|
|
|
+
|
|
|
+ ```mermaid
|
|
|
+ classDiagram
|
|
|
+ Class01 <|-- AveryLongClass : Cool
|
|
|
+ <<interface>> Class01
|
|
|
+ Class09 --> C2 : Where am i?
|
|
|
+ Class09 --* C3
|
|
|
+ Class09 --|> Class07
|
|
|
+ Class07 : equals()
|
|
|
+ Class07 : Object[] elementData
|
|
|
+ Class01 : size()
|
|
|
+ Class01 : int chimp
|
|
|
+ Class01 : int gorilla
|
|
|
+ class Class10 {
|
|
|
+ <<service>>
|
|
|
+ int id
|
|
|
+ size()
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+renders as
|
|
|
+
|
|
|
+```mermaid
|
|
|
+classDiagram
|
|
|
+Class01 <|-- AveryLongClass : Cool
|
|
|
+<<interface>> Class01
|
|
|
+Class09 --> C2 : Where am i?
|
|
|
+Class09 --* C3
|
|
|
+Class09 --|> Class07
|
|
|
+Class07 : equals()
|
|
|
+Class07 : Object[] elementData
|
|
|
+Class01 : size()
|
|
|
+Class01 : int chimp
|
|
|
+Class01 : int gorilla
|
|
|
+class Class10 {
|
|
|
+ <<service>>
|
|
|
+ int id
|
|
|
+ size()
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+An example **state diagram**:
|
|
|
+
|
|
|
+ ```mermaid
|
|
|
+ stateDiagram
|
|
|
+ [*] --> Still
|
|
|
+ Still --> [*]
|
|
|
+ Still --> Moving
|
|
|
+ Moving --> Still
|
|
|
+ Moving --> Crash
|
|
|
+ Crash --> [*]
|
|
|
+ ```
|
|
|
+
|
|
|
+renders as
|
|
|
+
|
|
|
+```mermaid
|
|
|
+stateDiagram
|
|
|
+[*] --> Still
|
|
|
+Still --> [*]
|
|
|
+Still --> Moving
|
|
|
+Moving --> Still
|
|
|
+Moving --> Crash
|
|
|
+Crash --> [*]
|
|
|
```
|
|
|
|
|
|
### Todo lists
|