Markdown code drawing tutorial

1. Flowchart

First in Typora, enter```mermaidThen press Enter to initialize a blank image.

Grammatical explanation: graphThe keyword is to declare a flow chart, TDdown and LRto the right, the meaning here is Top-Down from top to bottom.

graph TD
	A[Hard edge] -->B(Round edge)
    B --> C{
    
    Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

2. Timing diagram

First in Typora, enter```mermaidThen press Enter to initialize a blank image.

Grammar explanation: ->>if it represents a solid arrow, -->>it represents a dotted line.

sequenceDiagram
    Alice-->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end
    Bob->>Alice: Thanks 

3. State diagram

First in Typora, enter```mermaidThen press Enter to initialize a blank image.

Grammatical explanation: [*]it means the beginning or the end, if it is on the right side of the arrow, it means the end.

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

4. Class diagram

First in Typora, enter```mermaidThen press Enter to initialize a blank image.

Grammar explanation: <|--Indicates inheritance, +expresses public, -expresses private.

classDiagram
      Animal <|--Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

5. Gantt chart

Gantt charts are generally used to represent project schedules and are often used in work.

First in Typora, enter```mermaidThen press Enter to initialize a blank image.

The grammar is also very simple, from top to bottom are the tasks of picture title, date format, project, and project subdivision.

gantt
    title 工作计划
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2020-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2020-01-12  , 12d
    another task      : 24d

6. Pie chart

First in Typora, enter```mermaidThen press Enter to initialize a blank image.

Pie charts pieare represented using , with the area name and its percentage below the title, respectively.

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5