Markdown用代码画图教程

1、流程图

先在 Typora 中，输入 ```mermaid然后敲击回车，即可初始化一张空白图。

语法解释：graph 关键字就是声明一张流程图，TD 向下、LR 向右边，这里的含义是 Top-Down 由上至下。

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

2、时序图

先在 Typora 中，输入 ```mermaid然后敲击回车，即可初始化一张空白图。

语法解释：->> 代表实线箭头，-->> 则代表虚线。

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、状态图

先在 Typora 中，输入 ```mermaid然后敲击回车，即可初始化一张空白图。

语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束。

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

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

4、类图

先在 Typora 中，输入 ```mermaid然后敲击回车，即可初始化一张空白图。

语法解释：<|-- 表示继承，+ 表示 public，- 表示 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、甘特图

甘特图一般用来表示项目的计划排期，目前在工作中经常会用到。

先在 Typora 中，输入 ```mermaid然后敲击回车，即可初始化一张空白图。

语法也非常简单，从上到下依次是图片标题、日期格式、项目、项目细分的任务。

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、饼图

先在 Typora 中，输入 ```mermaid然后敲击回车，即可初始化一张空白图。

饼图使用 pie 表示，标题下面分别是区域名称及其百分比。

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