Skip to main content

Mermaid 图表示例

1 分钟 19 words

Mermaid 是一个强大的图表和可视化工具,可以让您使用文本创建图表。以下是一些示例。

流程图

graph TD
    A[开始] --> B{需要决策?}
    B -->|是| C[选择选项 A]
    B -->|否| D[选择选项 B]
    C --> E[执行任务]
    D --> E
    E --> F[结束]

时序图

sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    participant 数据库
    
    用户->>浏览器: 输入 URL
    浏览器->>服务器: HTTP 请求
    服务器->>数据库: 查询数据
    数据库-->>服务器: 返回数据
    服务器-->>浏览器: HTML 响应
    浏览器-->>用户: 显示页面

甘特图

gantt
    title 项目时间表
    dateFormat YYYY-MM-DD
    section 设计阶段
    需求分析      :a1, 2025-01-01, 7d
    设计方案      :a2, after a1, 10d
    section 开发阶段
    前端开发      :b1, after a2, 15d
    后端开发      :b2, after a2, 15d
    section 测试阶段
    功能测试      :c1, after b1, 5d
    性能测试      :c2, after b2, 5d

类图

classDiagram
    class 动物 {
        +String 名称
        +int 年龄
        +吃()
        +睡觉()
    }
    class 狗 {
        +String 品种
        +叫()
    }
    class 猫 {
        +String 颜色
        +喵()
    }
    动物 <|-- 狗
    动物 <|-- 猫

状态图

stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动
    运行 --> 暂停: 暂停
    暂停 --> 运行: 继续
    运行 --> 停止: 停止
    停止 --> [*]

饼图

pie title 编程语言使用占比
    "JavaScript" : 35
    "Python" : 25
    "Java" : 20
    "Go" : 10
    "其他" : 10

实体关系图

erDiagram
    用户 ||--o{ 订单 : 下单
    用户 {
        int 用户ID
        string 用户名
        string 邮箱
    }
    订单 ||--|{ 订单项 : 包含
    订单 {
        int 订单ID
        date 下单日期
        float 总金额
    }
    订单项 }o--|| 产品 : 引用
    订单项 {
        int 数量
        float 单价
    }
    产品 {
        int 产品ID
        string 产品名
        float 价格
    }

用户旅程图

journey
    title 用户购物体验
    section 浏览
      访问网站: 5: 用户
      搜索产品: 4: 用户
    section 购买
      添加到购物车: 4: 用户
      结账: 3: 用户
      支付: 3: 用户
    section 配送
      等待发货: 2: 用户
      收到产品: 5: 用户
      评价: 4: 用户

Git 图

gitgraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

总结

Mermaid 提供了丰富的图表类型,可以帮助您可视化各种概念和流程。在 Markdown 中使用 Mermaid 代码块即可轻松创建这些图表。