一图看懂数据库结构PostgreSQL Playground ERD 关系图生成与 SVG 导出完整教程【免费下载链接】pgIn Browser PostgreSQL Playground, no server, just client and pglite (postgresql wasm)项目地址: https://gitcode.com/gh_mirrors/pg2/pg在PostgreSQL Playground中你完全不需要安装任何服务器——它基于 PGLitePostgreSQL 的 WASM 版本直接在浏览器里运行并内置了ERD 关系图生成功能自动扫描数据库的表、字段和外键用 Mermaid 渲染出可视化结构图还能一键导出为 SVG 矢量图方便写文档、做汇报。本文将带你完整走一遍从建库到导出 ERD 图的全流程。为什么你需要一张 ERD 关系图面对十几张表的数据库光靠 SQL 语句很难搞清楚哪张表和哪张表有关联外键指向谁每张表有哪些字段、是什么类型多对多关系是通过哪张中间表实现的ERDEntity-Relationship Diagram实体关系图就是为了解决这个问题用一张图展示所有表和它们之间的连线一图看懂整个数据库结构。快速上手3 步生成你的第一张 ERD 图第 1 步创建或导入一个数据库打开页面后点击右上角的Database按钮创建空白数据库输入名称即可随后可在查询区自由建表导入示例数据项目内置了两套示例库强烈推荐新手直接使用示例库表结构适合学习Order Database订单系统users、orders、product、order_items一对多关系Schools Database学校管理teachers、students、subjects 及 2 张中间表多对多关系示例库的建表脚本分别位于src/postgres/sample-data/orders-database.sql和src/postgres/sample-data/schools-database.sql其中 schools 库的teacher_subjects、student_subjects两张中间表正是展示多对多关系的经典范例。第 2 步切换到 ERD 视图点击左侧导航栏中的ERD图标层次结构图标界面会切换为两大区域左侧Schema 树——以折叠面板列出所有 public schema 下的表和字段右侧ERD 关系图——自动渲染的 Mermaid 实体关系图支持缩放和拖拽。桌面端两个面板可以自由拖动分隔线调整宽度移动端则自动隐藏左侧树只展示关系图本身。第 3 步查看并刷新ERD 图在创建、导入或连接数据库时自动首次生成之后你执行了CREATE TABLE、ALTER TABLE等结构变更后只需点击 Schema 面板右上角的Reload刷新按钮关系图即会重新扫描生成。读懂 ERD 图表、字段与关系线以 schools 示例库为例ERD 图中你会看到每个方框 一张表框内逐行列出字段名与数据类型如integer teacher_id、character varying(100) name表之间的连线 外键约束线上标注了约束名称例如teacher_subjects_teacher_id_fkey关系符号遵循 Mermaid 标准}o--||表示零或多 对 一}|..||表示一 对一图中 schools 库的教师—科目关联即由此类符号表达。阅读技巧先从最大的方框字段最多的表入手沿连线向外追踪几分钟就能理清students → student_subjects → subjects这条多对多链路的走向。一键导出 SVG3 步完成关系图导出SVG 是矢量格式放大到任意尺寸都不失真还能直接嵌入 Markdown 文档或网页。导出操作只需在 ERD 视图底部工具条中点击最右侧的Export下载按钮浏览器会自动下载一个以数据库命名的 SVG 文件例如schools-28056.svg用任意图片查看器、浏览器或设计软件打开即可也可以直接插入文档。该按钮的行为定义在src/components/interfaces/schema-erd.tsx中——它会将 Mermaid 重新渲染为纯 SVG打包成image/svgxml文件触发下载无需任何截图或第三方转换工具。导出的 ERD 图适合放在哪里 项目设计文档 / 数据库设计说明书 技术评审与答辩的演示 PPT️ 团队知识库帮助新成员快速理解表结构ERD 图是如何生成的背后的 Mermaid 机制进阶了解这个功能的核心是一段巧妙的 SQL程序直接向浏览器里的 PostgreSQL 发起查询读取pg_class、pg_attribute、pg_constraint等系统目录自动拼装出 Mermaid 的erDiagram语法文本形如erDiagram teachers { ~integer~ teacher_id ~character varying(100)~ name } teacher_subjects }|..|| teachers : teacher_subjects_teacher_id_fkey随后由前端引入的mermaid.js将这段文本渲染成漂亮的 SVG 图形。整个过程涉及三个关键文件src/postgres/setup.ts—— 核心 SQL 查询generateMermaidErd与getDatabaseSchema负责从数据库元数据中提取蓝图src/components/interfaces/schema-erd.tsx—— 渲染 Mermaid 图形、提供缩放/居中/导出工具条src/stores.ts—— 状态管理负责在创建、导入、连接和刷新时触发 ERD 重新生成。值得一提的是该查询会自动过滤掉pg_前缀的内部 schema 和information_schema因此图上只展示你自己的业务表干净清爽。实用技巧与常见问题 缩放与浏览底部工具条提供了 5 个按钮放大、缩小、复位Reset、居中Center、导出Export配合鼠标滚轮缩放最高 50 倍超大关系图也能从容浏览。❓ FAQ 速答问题解答建了新表ERD 图没更新点击 Schema 面板右上角的 Reload 按钮即可重新生成导出的 SVG 打不开SVG 是标准矢量图浏览器、Figma、Illustrator 均可直接打开数据会上传到服务器吗不会。PGLite 完全在浏览器本地运行数据持久化在 IndexedDB 中隐私安全手机上能用吗可以界面做了响应式适配小屏自动切换为纯关系图视图本地运行 PostgreSQL Playground可选如果你想亲手体验源码只需三步无需 Docker、无需装 PostgreSQLgit clone https://gitcode.com/gh_mirrors/pg2/pg cd pg pnpm install pnpm dev启动后打开终端提示的本地地址即可进入浏览器内的 PostgreSQL 游乐场执行 SQL、查询历史、ERD 生成与 SVG 导出一个页面全部搞定。总结PostgreSQL Playground 把数据库可视化做到了极致——零安装、零服务器用一段 SQL 就能把 PostgreSQL 的结构自动变成 Mermaid ERD 关系图再用一个按钮导出 SVG。无论是学习数据库设计、梳理遗留系统还是为项目补充文档它都能帮你一图看懂数据库结构。【免费下载链接】pgIn Browser PostgreSQL Playground, no server, just client and pglite (postgresql wasm)项目地址: https://gitcode.com/gh_mirrors/pg2/pg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
