Begin with Markdown 3 Diagrams

Mermaid and flow create diagrams.

Mermaid

Pie

• Start with ```mermaid. Three elements:

  • type: pie
  • title: no ‘:’
  • content and number

• Codes

```mermaid
pie
    title LYX is ACE
    "Dance": 100
    "Sing": 90
    "Rap": 95
```

• Result

Gantt

• Start with ```mermaid. Four elements:

  • type: gantt

  • title: no ‘:’ after ‘title’

  • dataFormat: no ‘:’ after ‘dataFormat’

  • section: no ‘:’ after ‘section’

    • task name: no space after ‘task:’

    • state: 4states

      state	meaning
      done	did/have done
      active	be doing
      blank	be to do
      crit	important task

    • id

    • starting date

    • ending date/length

• Code

```mermaid
gantt

    title LYX's Performances in YouthWithYou II

    dateFormat  YYYY-MM-DD

    section syntax
    task1-done      :done, des1,2020-03-12,2020-04-01
    task2-be doing  :active, des2, after des1, 15d
    task3-important :crit,des3, 2020-04-10, 30d
    task4-be to do  :des4,2020-05-08,17d

    section 1st stage
    《No joke》        :done, des1, 2020-03-12,2020-03-19
    《破风(The Eve)》   :active, des2, after des1, 6d
    《想见你*3》        :done,des3,2020-03-25,12d
    section 2nd stage
    《十面埋伏2 》      :des4, after des3, 7d
    《Lion》           :des5, after des4, 12d
    《溯》             :des6, after des5, 9d
    《I'm not yours》  :des7, after des6, 8d
    section 3rd stage
    Center of The 9    :crit,des8,2020-05-30,1d
```

• Result

Flowchart

Shape

Variable shapes with different symbols.

```mermaid
graph TB
    A
    B[nameB]
    C(nameC)
    D((nameD))
    E>nameeE]
    F{nameF}
    G[(nameG)]
```

Ralations from top to bottom

Variable connecting types with different points, lines and arrows.

``` mermaid
graph TB
    %%this is a commet, you can't see me.
    A1-->B1
    A2---B2
    A3-.->B3
    A4-.-B4
    A5==>B5
    A6===B6
    A7--text7-->B7
    A8--text8---B8
    A9-.text9.->B9
    A10==text10==>B10-.text2.-B2
```

Relations from left to right

```mermaid
graph LR
    A1-->B1
    A2-.->B2
    A3==>B3
```

Example

• example of binary tree (bt)
  Take DLR of bt as an example.In this tree diagram, the uppercase means different nodes of binary tree. The number means order of traversing. Circles with “none” mean there’s nothing, just to adjust the position of left and right nodes.

```mermaid
graph TB
    A((A_1))---B((B_2))
    B((B_2))---D((D_3))
    B((B_2))---F((F_4))
    F((F_4))-.-J((null))
    F((F_4))---E((E_5))
    A((A_1))---C((C_6))
    C((C_6))---G((G_7))
    G((G_7))---H((H_8))
    G((G_7))-.-K((null))
    C((C_6))---I((I_9))
```

• example of flowchart

```mermaid
graph LR
    A(Start)-->Z[/time=23:30/]
    Z-->B[go to sleep]
    B-->C{asleep?}
    C--Yes-->Y[/good dream/]
    Y-->E(end)
    C--No-->D[listen to music]
    D-->F{asleep?}
    F--Yes-->Y
    F--No-->X[read The Economist]
    X-->G{sleepy?}
    G--Yes-->Y
    G--No-->W[/that's terrible!/]
    W-->E
```

We can see that mermaid has some limits when make charts through above example. For instance, it can’t create specific left and right node of tree. It looks good with common flowchart but seems a little weird with algorithm flowchart. Here’s another method to draw a flowchart with syntax and structure of flow in the following section.

Flow

Elements include start, inputoutput, operation, condition and end, see above.
syntax:

• DefName=>keyword: text description
• defName1->Defname2
• CondName(yes/no)->Defname

```flow

    st=>start: start 
    in=>inputoutput: input
    op1=>operation: operation1
    cond=>condition: Yes or No?
    op2=>operation: operation2
    ou=>inputoutput: output
    ed=>end: End

    st->in->op1->cond
    cond(yes)->op2
    op2->op1
    cond(no)->ou->ed
```