20230506-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. 时序图

语法解释 ->> 代表实线箭头 –>> 则代表虚线

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

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

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

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

4. 类图

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

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

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

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 表示，标题下面分别是区域名称及其百分比

打赏