Mermaid 图表
• 1 分钟阅读 1 分钟 • 20 words 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
主题集成
图表应自动适应当前主题(亮/暗模式)并使用主题颜色,以便与整体设计更好地集成。
响应式设计
所有图表都应该是响应式的,在移动设备上也能良好工作,具有适当的缩放和溢出处理。
评论加载中...