mermaid画图

Mermaid 使用教程：从入门到精通 - 知乎 mermaid 画图示例 - gantt

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

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

- graph LR

graph LR
A[开始] --> B(处理)
B --> C{决策}
C -->|是| D[结束]
C -->|否| B

- 时序图 sequenceDiagram

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Hi Alice, I'm doing well, thank you!

• 类图 classDiagram

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

• 实体关系图 erDiagram

  erDiagram
      CUSTOMER ||--o{ ORDER : places
      ORDER ||--|{ LINE-ITEM : contains
      CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

• pie

  pie
    title Example Pie Chart
    "Apples" : 45.0
    "Oranges" : 25.0
    "Bananas" : 15.0
    "Grapes" : 10.0
    "Pears" : 5.0

[!info]- 更多的 Mermaid 支持多种类型的图表，包括: 1. 流程图 (Flowchart) : 展示过程、决策和操作流程 2. 序列图 (Sequence Diagram) : 展示对象之间的交互顺序 3. 甘特图(Gantt Chart) : 展示项目计划和进度 4. 词云图 (Class Diagram) : 展示类的结构和关系 5. 饼图 (Pie Chart) : 展示数据占比。 6. 捷径图 (Shortcut) : 简单展示快捷方式 7. 状态图 (State Diagram) : 展示对象状态的转换 8. 用户旅程图 (Journey) : 展示用户如何与应用程序交互

classDiagram
    class Vehicle {
      String vehicleId
      String vehicleType
      double basePrice
      String state
      --
      Vehicle()
      Vehicle(String, String, double)
      Vehicle(String, String)
      Vehicle(String, String, double, String)
      String getVehicleId()
      void setVehicleId(String)
      String getVehicleType()
      void setVehicleType(String)
      double getBasePrice()
      void setBasePrice(double)
      String getState()
      void setState(String)
      String toString()    
    }
    Vehicle <|-- Bus
    Vehicle <|-- Car
    Vehicle <|-- Truck

    class User {
      String userId
      String userName
      String password
      --
      User(String, String, String)
      User()
      boolean performOperations()
      String getUserName()
      void setUserName(String)
    }

    class Admin {
      Scanner scanner
      Database database
      --
      Admin(String, String, String)
      Admin()
      void viewVehicle()
      void addVehicle()
      void modifyVehicle()
      void deleteVehicle()
      void viewRevenue()
      boolean performOperations()    
    }
    Admin "uses" --|> User

    class AdminOperation {
      void viewVehicle()
      void addVehicle()
      void modifyVehicle()
      void deleteVehicle()
      void viewRevenue()
    }
    Admin <|-- AdminOperation

    class Customer {
      Scanner scanner
      Database database
      --
      Customer(String, String, String)
      Customer()
      void viewVehicle()
      void rentVehicle()
      void changeVehicle()
      boolean performOperations()
    }
    Customer "uses" --|> User

    class CustomerOperation {
      void viewVehicle()
      void rentVehicle()
      void changeVehicle()
    }
    Customer <|-- CustomerOperation

    class TransactionRecord {
      String userId
      double amount
      Date transactionTime
      --
      TransactionRecord(String, double)
      String getUserId()
      double getAmount()
      Date getTransactionTime()
      String toString()
    }