markdown画流程图

1.mermaid

mermaid是一种类似于markdown的脚本语言,通过javascript语言将文本转化为图片

1.流程图

graph TD;
    A-->B;
    A-->C;
    B-->D;

实际效果

graph TD;
    A-->B;
    A-->C;
    B-->D;

2.时序图

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

实际效果

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

3.状态图

stateDiagram
    [*] --> s1
    s1 --> [*]

stateDiagram
    [*] --> s1
    s1 --> [*]

4.类图

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

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

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

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

参考于:https://zhuanlan.zhihu.com/p/355997933