ChartDB 快速上手：一条查询生成 10+ 数据库的可视化 ER 图- 惊觉

ChartDB 快速上手：一条查询生成 10+ 数据库的可视化 ER 图

【免费下载链接】chartdb Database diagrams editor that allows you to visualize and design your DB with a single query. 项目地址: https://gitcode.com/GitHub_Trending/ch/chartdb

半夜上线出故障，你得同时看 MySQL 的订单表和 PostgreSQL 的日志表，表间关系全靠记忆和截图。ChartDB 是一个开源数据库 ER 图编辑器，一条查询就能把库结构变成可视化关系图，覆盖 MySQL、PostgreSQL、SQL Server 等 10+ 种数据库。

快速上手

本地跑起来最短路径，三步：

git clone https://gitcode.com/GitHub_Trending/ch/chartdb
cd chartdb
npm install
npm run dev

浏览器打开本地地址即可。不想装 Node 环境的话，docker run -p 8080:80 ghcr.io/chartdb/chartdb:latest 也能直接起服务。

核心能力拆解

数据库连接配置怎么填

它帮你省了要数据库密码这一步：不需要给 ChartDB 开任何权限，你自己把查询结果带回来就行。做法是它按你选的库类型生成一条"智能查询"（读 INFORMATION_SCHEMA 元数据的只读 SQL），你在常用客户端执行后把结果粘贴回界面。不同库的差异——Supabase、Timescale、MySQL 5.7、Cloudflare D1——在 src/lib/domain/ 的类型与版本定义里都有对应适配。

元数据怎么导入

它帮你省了手写文档的时间：粘贴即出图，表、字段、索引、外键一次到位。它支持三种输入：查询结果、DDL 建表脚本、DBML 文件（一种用文本描述数据库结构的标记语言）。导入入口的核心分发逻辑长这样：

if (importMethod === 'ddl') {
  // DDL 建表脚本：走对应方言的解析器
  diagram = await sqlImportToDiagram({ sqlContent, databaseType });
} else if (importMethod === 'dbml') {
  diagram = await importDBMLToDiagram(scriptResult);
} else {
  // 查询结果：直接解析 JSON 元数据
  diagram = await loadFromDatabaseMetadata(loadDatabaseMetadata(scriptResult));
}

输入类型由 detectImportMethod 自动识别，粘贴前不用自己判断格式。

出图后怎么调、怎么导出

它帮你省了画文档的时间：图本身就是文档。拖拽表节点调布局、用画布过滤隐藏无关表、给模块上色加注释，然后导出 PNG/SVG 和 DBML。若要迁库，还能直接导出目标方言的建表脚本，跨方言时自动做类型映射，并在脚本头部标出转换不了的特性。

一个真实场景：电商订单库走一遍

拿一个典型的电商订单库练手：

新建图，选 MySQL 作为数据库类型。
复制界面里生成的智能查询，用只读账号在你的客户端执行，把返回的 JSON 粘贴回对话框，点导入。
图上自动画出 customers、orders、order_items、products 等表和连线。
用画布过滤只保留订单链路，导出 PNG 放进文档。
计划迁到 PostgreSQL？导出目标方言脚本，timestamp 对 datetime、自增列写法差异都已转换，不兼容的语法会在脚本头部明确标出。

进阶与调优

智能查询只做 SELECT 读元数据，用只读账号执行最稳妥，不给任何写权限。
导入超过 2MB 的脚本或 DDL 时会提示体积较大，解析会变慢，必要时按 schema 拆分。
跨方言导出前先读脚本头部的不兼容警告，涉及枚举、自增、JSON 列的特性要人工确认后再执行。

把仓库拉下来，五分钟就能看到第一张图：git clone https://gitcode.com/GitHub_Trending/ch/chartdb。DBA 用它快速摸清陌生库，后端用它评审建表变更，架构师用它给团队留一份能随代码走的结构文档。

【免费下载链接】chartdb Database diagrams editor that allows you to visualize and design your DB with a single query. 项目地址: https://gitcode.com/GitHub_Trending/ch/chartdb

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/gitblog_00315/article/details/156547035

ChartDB 快速上手：一条查询生成 10+ 数据库的可视化 ER 图