跳转到主要内容

Mermaid 图表

1 分钟 20 words

本文测试了 Mermaid 图表集成与各种图表类型,以确保正确渲染和主题兼容性。

流程图

graph TD
    A[开始] --> B{是吗?}
    B -->|是| C[好的]
    C --> D[重新思考]
    D --> B
    B ---->|否| E[结束]

序列图

sequenceDiagram
    participant 小明
    participant 小红
    participant 小李
    小明->>小李: 你好小李,你好吗?
    loop 健康检查
        小李->>小李: 对抗疑病症
    end
    Note right of 小李: 理性思考占上风!
    小李-->>小明: 很好!
    小李->>小红: 你呢?
    小红-->>小李: 很好!

类图

classDiagram
    class 动物 {
        +String 名称
        +int 年龄
        +makeSound()
    }
    class 狗 {
        +String 品种
        +bark()
    }
    class 猫 {
        +String 颜色
        +meow()
    }
    动物 <|-- 狗
    动物 <|-- 猫

状态图

stateDiagram-v2
    [*] --> 静止
    静止 --> [*]
    静止 --> 移动
    移动 --> 静止
    移动 --> 撞击
    撞击 --> [*]

实体关系图

erDiagram
    客户 ||--o{ 订单 : 下单
    订单 ||--|{ 订单项 : 包含
    客户 }|..|{ 配送地址 : 使用

用户旅程

journey
    title 我的工作日
    section 去上班
      泡茶: 5: 我
      上楼: 3: 我
      工作: 1: 我, 猫
    section 回家
      下楼: 5: 我
      坐下: 5: 我

甘特图

gantt
    title 甘特图示例
    dateFormat  YYYY-MM-DD
    section 第一部分
    任务一           :a1, 2024-01-01, 30d
    任务二           :after a1  , 20d
    section 第二部分
    第三部分任务      :2024-01-12  , 12d
    另一个任务       : 24d

饼图

pie title 志愿者领养的宠物
    "狗" : 386
    "猫" : 85
    "鼠" : 15

Git 图

    gitGraph
       commit
	   commit
	   branch develop
	   checkout develop
	   commit
	   commit
	   checkout main
	   merge develop
	   commit
	   commit

带样式的复杂流程图

graph TD
    A[圣诞节] -->|拿钱| B(去购物)
    B --> C{让我想想}
    C -->|一| D[笔记本电脑]
    C -->|二| E[iPhone]
    C -->|三| F[fa:fa-car 汽车]
    D --> G[fa:fa-laptop fa:fa-code 笔记本电脑]
    E --> H[fa:fa-mobile iPhone]
    F --> I[fa:fa-car 汽车]

错误处理测试

这应该显示一个错误状态:

graph TD
    A[无效语法
    B --> C
    INVALID_COMMAND

主题集成

图表应自动适应当前主题(亮/暗模式)并使用主题颜色,以便与整体设计更好地集成。

响应式设计

所有图表都应该是响应式的,在移动设备上也能良好工作,具有适当的缩放和溢出处理。

评论加载中...