- 分组
- 技术 · 数据模型
- 组件
SchemaEr·#schema-er- 交互
- build 模式下每按一次 → 出现下一张表和连向它的线
适合
- 讲数据模型、外键约束、接口对象之间的引用
- 表和列都不多，能一屏放下
不适合
- 超过 4 张表或每张超过 6 列：只画关键表
- 关系跨越不相邻的表：调整顺序或拆页
内容上限
| 1 | tables 2–4 张；name ≤ 14 个字符；cols 2–6 列，name ≤ 14 个字符，type ≤ 12 个字符 |
| 2 | drop 0–3 |
| 3 | links ≤ 4 条，只连相邻的表；label ≤ 6 个字符 |
| 4 | note ≤ 50 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
tables · 必填 | { name, cols: { name, type, key? }[], drop? }[] | 表，按从左到右的顺序 |
links · 必填 | { from, to, label? }[] | 外键，写成 'table.column' |
note | string | 图下方的一句解读 |
示例代码
<SchemaEr kicker="一致性" title="…" tables={[{ name: 'customers', cols: [{ name: 'id', type: 'bigint', key: 'pk' }, …] }, …]} links={[{ from: 'orders.customer_id', to: 'customers.id', label: 'N:1' }]} />