markdown图表

• • • **流程图**
    • **时序图**
    • **状态图**
    • **类图**
    • **甘特图**
    • **饼图**
    • **导出**

graph 关键字就是声明一张流程图，TD 表示的是方向，这里的含义是 Top-Down 由上至下。

graph TD;
    client-->VIP1_keepalived;
    client-->VIP2_keepalived;
    VIP1_keepalived-->数据库mysql_1;
    VIP1_keepalived-->数据库mysql_2;
    VIP1_keepalived-->数据库mysql_3;
    VIP2_keepalived-->数据库mysql_1;
    VIP2_keepalived-->数据库mysql_2;
    VIP2_keepalived-->数据库mysql_3;

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

sequenceDiagram	
 master->>slave: grant 权限 XXX
 slave-->>master: change master to XXX

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

stateDiagram
  [*] --> 修改
    修改 --> [*] 

语法解释：<|-- 表示继承，+ 表示 public，- 表示 private，学过 Java 的应该都知道。

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()
      }

从上到下依次是图片标题、日期格式、项目、项目细分的任务。

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

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

pie
    title Key elements in Product X
    "win7" : 1
    "win8" : 1
    "win9" : 1
    "win10" :  1

Product X
“win7” : 1
“win8” : 1
“win9” : 1
“win10” : 1

### **导出**

绘制好的图片可以选择菜单/文件/导出，导出为图片或者网页格式。在网页中图片是以 SVG 格式渲染的，你可以复制 SVG 内容，导入到 SVG 的图片编辑器中进一步操作。