ChartDB 数据库架构图编辑器完全指南：Smart Query 即时可视化、跨方言 SQL 导出与本地/自托管部署

数据库前端数据可视化AI 应用【免费下载链接】chartdbDatabase diagrams editor that allows you to visualize and design your DB with a single query.项目地址https://gitcode.com/GitHub_Trending/ch/chartdb点击查看免费下载ChartDB 是一个开源的、基于 Web 的数据库图表ER Diagram编辑器它的核心亮点是一次查询即刻可视化在任意支持的数据库中运行一段Smart Query即可把整个数据库 schema 以 JSON 形式抓取出来并粘贴进编辑器瞬间生成可视化图表全程不需要安装任何桌面客户端也无需提供数据库密码。本指南将以仓库 README.md 为主线结合源码带你掌握 ChartDB 的核心工作流Smart Query 导入、AI 驱动的跨方言 SQL 导出、以及本地开发、生产构建和 Docker 自托管部署的完整配置方法。项目概览一个面向快速可视化与设计的数据库图表编辑器ChartDB 的目标用户画像非常清晰需要快速理解现有数据库结构文档化、团队评审、需要把数据库从一个方言迁移到另一个方言如 MySQL → PostgreSQL、SQLite → MariaDB、或者需要在图形界面中微调与批注复杂表结构的开发者。从 package.json 可以看到它基于React 18 Vite 7 TypeScript构建图表画布使用xyflow/reactReact FlowSQL 编辑与高亮使用 Monaco Editor内置i18next支持 20 多种语言并集成ai/ai-sdk/openaiSDK 用于 AI 导出能力。README 将它的三大核心能力概括为Instant Schema Import即时 schema 导入在数据库中运行一条查询即可将整个 schema 以 JSON 形式瞬间抓取回来用于文档化、团队讨论或理解数据AI-Powered ExportAI 驱动导出借助 LLM 生成目标方言的 DDL 脚本简化跨数据库迁移Interactive Editing交互式编辑通过直观的编辑器对表、字段、关系进行细粒度调整与批注。支持的数据库README 明确列出以下数据库获得官方支持✅ PostgreSQL含 Supabase、Timescale✅ MySQL✅ SQL Server✅ MariaDB✅ SQLite含 Cloudflare D1✅ CockroachDB✅ ClickHouse从源码看支持范围比 README 列举的更宽src/lib/databases.ts 的databaseTypeToLabelMap中共有 9 种类型Generic、PostgreSQL、MySQL、SQL Server、MariaDB、SQLite、ClickHouse、CockroachDB、Oracle其中Oracle 也拥有完整的 Smart Query 抓取脚本与 logo 资源见 scripts.ts 中的oracleDBQuery可以推断 Oracle 属于源码中已实现但 README 未列出的数据库类型。每种数据库在 src/assets 下都配有亮色/暗色两套 logo*_logo.png/*_logo_dark.png用于界面中区分显示。核心工作流一Smart Query 一键导入 Schema这是 ChartDB 区别于传统连接数据库读取元数据方案的关键设计——你不需要把数据库账号、密码交给 ChartDB而是由 ChartDB 给你一段查询脚本你在自己的数据库客户端里执行把返回的 JSON 结果粘贴回 ChartDB 即可。整个流程README 的Try it on our website部分是打开 ChartDB点击 Go to app选择你正在使用的数据库类型拿到对应的magic query并在你的数据库中执行将查询返回的 JSON 结果复制粘贴到 ChartDB开始查看与编辑图表。底层实现脚本注册表与动态加载这个magic query并非写死的前端字符串而是按数据库类型组织的脚本生成器。在 src/lib/data/import-metadata/scripts/scripts.ts 中importMetadataScripts是一个以DatabaseType为键的注册表每种数据库对应一个生成查询文本的函数export const importMetadataScripts: ImportMetadataScripts { [DatabaseType.POSTGRESQL]: getPostgresQuery, [DatabaseType.MYSQL]: getMySQLQuery, [DatabaseType.SQLITE]: getSQLiteQuery, [DatabaseType.SQL_SERVER]: getSqlServerQuery, [DatabaseType.MARIADB]: () mariaDBQuery, [DatabaseType.CLICKHOUSE]: () clickhouseQuery, [DatabaseType.COCKROACHDB]: () cockroachdbQuery, [DatabaseType.ORACLE]: () oracleDBQuery, };各个脚本生成器位于 src/lib/data/import-metadata/scripts 目录postgres-script.ts、mysql-script.ts、sqlserver-script.ts等通过 SQL 查询系统目录如 information_schema 类视图把表、字段、主键、外键、索引、Check 约束等信息一次性取出并序列化为 JSON。导入侧的元数据解析由 src/lib/data/import-metadata 完成其子目录metadata-types/定义了完整的 JSON 元数据结构table-info.ts、column-info.ts、foreign-key-info.ts、index-info.ts、check-constraint-info.ts等import/下的tables.ts、fields.ts、relationships.ts、indexes.ts、dependencies.ts负责把 JSON 还原成 ChartDB 内部图表模型。在 UI 层面smart-query-instructions.tsx 是导入向导的核心它会根据用户选中的databaseType与可选的databaseEdition如 SQL Server 需要区分版本与 SSMS 客户端动态import(/lib/data/import-metadata/scripts/scripts)加载脚本生成器并通过 CodeSnippet 组件展示带语法高亮的可复制代码。对于支持多种客户端的数据库例如 PostgreSQL 的 psql、Supabase、Timescale界面会提供DB Client 标签页切换不同客户端生成对应的查询片段minimizeQuery用于压缩空白以保持展示整洁而codeToCopy保留完整可执行文本。核心工作流二AI 驱动的跨方言 SQL 导出README 强调的AI-Powered Export解决的是方言迁移场景同一份图表可以按需导出为 MySQL、PostgreSQL、SQL Server、SQLite 等任意受支持方言的 DDL。其核心实现位于 src/lib/data/sql-export/export-sql-script.ts采用了确定性生成 LLM 转换的两段式架构exportBaseSQL()完全不依赖 LLM从图表模型确定性地产出基础 DDL——CREATE SCHEMA、CREATE TYPE ... AS ENUMPostgreSQL 自定义类型、CREATE SEQUENCE、CREATE TABLE含字段类型/长度/精度、NOT NULL、UNIQUE、AUTO_INCREMENT、DEFAULT、主键与复合主键、CHECK约束、COMMENT ON、排序后的CREATE INDEX以及按基数规则决定外键落在哪一侧的ALTER TABLE ... ADD CONSTRAINT ... FOREIGN KEY多对多关系需要连接表会被跳过。exportSQL()当目标方言与图表原始方言不同且存在确定性的跨方言转换路径时优先走无 LLM 路径如 PostgreSQL → MySQL/MariaDB 与 PostgreSQL → SQL Server见 src/lib/data/sql-export/cross-dialect其余场景则调用 LLM把exportBaseSQL生成的脚本连同generateSQLPrompt()的方言指令一起交给模型改写。两种 AI 配置方式不可混用exportSQL()在调用 LLM 前会执行validateConfiguration()export-sql-script.ts逻辑是若配置了自定义 endpoint 模型名则走自定义推理服务不要求 OpenAI API Key若配置了OpenAI API Key则使用 OpenAI 官方服务两者都未配置则直接抛出配置错误。README 对此的表述是你必须配置 Option 1OpenAI API Key或Option 2自定义 endpoint 和 model name两者之一AI 能力才能生效不要混用。模型的默认值是gpt-4o-mini-2024-07-18当未显式指定LLM_MODEL_NAME时。LLM 转换结果还会以 schema 与 SQL 文本为键做缓存export-sql-cache.ts相同输入二次导出无需重复调用模型。本地开发与生产构建README 的Getting Started部分给出了最简路径。ChartDB 是标准 Vite 前端项目无需后端服务即可运行npm install npm run devnpm run dev对应vite见 package.json 的 scripts 字段默认启动本地开发服务器。生产构建则需先通过 lint 与 TypeScript 编译检查npm install npm run buildbuild脚本实际执行npm run lint tsc -b vite build即ESLint零警告门槛→ TypeScript 项目编译 → Vite 产物打包三步串联。如果你的部署需要 AI 能力README 给出的构建命令是在 build 时注入 OpenAI Keynpm install VITE_OPENAI_API_KEYYOUR_OPEN_AI_KEY npm run build这里的VITE_前缀变量会被 Vite 在编译期写入产物读取入口在 src/lib/env.tsOPENAI_API_KEY对应import.meta.env.VITE_OPENAI_API_KEY同理还有OPENAI_API_ENDPOINT、LLM_MODEL_NAME、HIDE_CHARTDB_CLOUD、DISABLE_ANALYTICS。需要说明的是以VITE_前缀注入的变量是构建期固化进 JS 产物的适合私有部署而 Docker 方案下文额外提供了运行期注入的window.env机制。Docker 部署一行命令跑起来ChartDB 官方发布 Docker 镜像README 给出的最快方式是直接拉取运行docker run -e OPENAI_API_KEYYOUR_OPEN_AI_KEY -p 8080:80 ghcr.io/chartdb/chartdb:latest如果你希望本地构建自己的镜像docker build -t chartdb . docker run -e OPENAI_API_KEYYOUR_OPEN_AI_KEY -p 8080:80 chartdb构建完成后浏览器访问http://localhost:8080即可使用。这里有两个值得展开的细节1. 镜像的构建结构多阶段Dockerfile 采用两阶段构建builder 阶段基于node:24-alpine通过ARG声明VITE_OPENAI_API_KEY、VITE_OPENAI_API_ENDPOINT、VITE_LLM_MODEL_NAME、VITE_HIDE_CHARTDB_CLOUD、VITE_DISABLE_ANALYTICS五个构建参数安装依赖npm ci后把参数写入.env再执行npm run buildproduction 阶段基于nginx:stable-alpine把构建产物复制到/usr/share/nginx/html拷入 default.conf.template 与 entrypoint.sh暴露 80 端口以 entrypoint 启动。2. 运行期环境变量Nginx 动态注入与构建期VITE_变量不同docker run -e传入的同名无 VITE_ 前缀环境变量是在容器启动时由 entrypoint.sh 处理的它用envsubst把 Nginx 模板里$OPENAI_API_KEY、$OPENAI_API_ENDPOINT、$LLM_MODEL_NAME、$HIDE_CHARTDB_CLOUD、$DISABLE_ANALYTICS等占位符替换成真实值然后启动 Nginx。其中关键的机制是 default.conf.template 里的/config.js路由——它动态返回一段 JavaScript把环境变量挂到window.env上window.env { OPENAI_API_KEY: ..., OPENAI_API_ENDPOINT: ..., LLM_MODEL_NAME: ..., HIDE_CHARTDB_CLOUD: ..., DISABLE_ANALYTICS: ... };前端在 src/lib/env.ts 读取时优先取window?.env?.[key]运行期注入回退到import.meta.env.VITE_*构建期注入。同时 default.conf.template 中的try_files $uri $uri/ /index.html保证了前端路由在刷新时不会 404SPA fallback。仓库根目录的 public/config.js 是一个空占位文件Docker 部署场景下实际生效的是 Nginx 动态生成的/config.js。使用自定义推理服务器本地 vLLM 等README 提供了完整的自定义推理服务器接入示例适用于不想依赖 OpenAI 官方服务、希望在自托管环境中接入本地 LLM如 vLLM、Ollama 等 OpenAI 兼容接口的场景# Build docker build \ --build-arg VITE_OPENAI_API_ENDPOINTYOUR_ENDPOINT \ --build-arg VITE_LLM_MODEL_NAMEYOUR_MODEL_NAME \ -t chartdb . # Run docker run \ -e OPENAI_API_ENDPOINTYOUR_ENDPOINT \ -e LLM_MODEL_NAMEYOUR_MODEL_NAME \ -p 8080:80 chartdbREADME 给出的本地 vLLM 服务器示例配置VITE_OPENAI_API_ENDPOINThttp://localhost:8000/v1 VITE_LLM_MODEL_NAMEQwen/Qwen2.5-32B-Instruct-AWQ结合源码中的validateConfiguration()逻辑这条路径的生效条件是endpoint 与 model name 同时存在——满足后即走createOpenAI({ apiKey, baseUrl })的自定义 baseUrl 分支export-sql-script.ts此时不再强制要求 OpenAI API Key。隐私与可观测性Fathom Analytics 的开关README 的隐私说明指出ChartDB 内置了基于 Fathom Analytics 的隐私友好型分析无 Cookie、不采集个人身份信息。如果你不希望上报任何分析数据有两种方式关闭运行容器时追加环境变量-e DISABLE_ANALYTICStrue构建镜像时传入构建参数--build-arg VITE_DISABLE_ANALYTICStrue在源码层面src/lib/env.ts 中DISABLE_ANALYTICS同时兼容运行期window.env.DISABLE_ANALYTICS与构建期VITE_DISABLE_ANALYTICS两种来源以true字符串判定。与此类似的还有HIDE_CHARTDB_CLOUD用于在自托管界面中隐藏指向 ChartDB 云服务的入口。进阶内置模板与示例除了从零导入 schemaChartDB 还内置了大量可直接加载的示例数据库模板便于快速体验编辑器能力模板数据位于 src/templates-data/templates包含 50 个真实项目的数据库结构如wordpress-db.ts、airbnb-db.ts、django-db.ts、pokemon-db.ts、twitter-db.ts等对应页面实现见 src/pages/templates-page 与 src/pages/template-page另有一组教学示例图在 src/pages/examples-page/examples-databike stores、dvd rental、employees 等配套图片位于 src/assets/examples 与 src/assets/templates。状态、社区与许可README 声明 ChartDB 当前处于Public Beta阶段。项目欢迎社区贡献PR 指南见 CONTRIBUTING.md参与者行为准则见 CODE_OF_CONDUCT.md并以GNU Affero General Public License v3.0AGPL-3.0开源许可全文见 LICENSE。从 CHANGELOG.md 可以跟踪版本演进当前仓库 package.json 标注版本为 1.20.1。小结ChartDB 用一条巧妙的Smart Query绕开了传统数据库图表工具需要数据库直连与凭证的痛点抓取在用户侧完成、可视化在浏览器完成兼顾了安全与便捷。其 SQL 导出采用确定性引擎兜底 LLM 方言改写增强的设计迁移路径可预测部署方面同时支持npm直接构建和Docker自托管且 AI 能力既可用 OpenAI 官方服务、也可通过自定义 endpoint 接入本地推理服务器并提供了构建期VITE_与运行期window.env两套配置注入方式。无论你是想快速理解一个陌生库的表结构、给团队产出文档化 ER 图还是规划一次跨方言数据库迁移ChartDB 都提供了一条低摩擦的路径。赞分享数据库前端数据可视化AI 应用【免费下载链接】chartdbDatabase diagrams editor that allows you to visualize and design your DB with a single query.项目地址https://gitcode.com/GitHub_Trending/ch/chartdb点击查看免费下载相关推荐如何让不同品牌的摄像机进同一个平台WVP-GB28181-Pro 接入与调优指南如何让不同品牌的摄像机进同一个平台WVP GB28181 Pro 接入与调优指南 WVP GB28181 Pro 是一个基于国标 GB28181 2016 与后端音视频前端ChartDB实时架构设计无密码安全数据库可视化ChartDB实时架构设计无密码安全数据库可视化 引言数据库可视化的安全革命 还在为数据库密码管理而头疼吗还在担心敏感凭证泄露的风险吗ChartDB带来数据库前端数据可视化AI 应用【亲测免费】 chartdb开源数据库图表编辑器轻松管理数据库架构chartdb开源数据库图表编辑器轻松管理数据库架构 在现代软件开发中数据库的设计和管理是至关重要的环节。一个清晰、准确的数据库架构可以帮助开发者更好地理数据库前端数据可视化AI 应用上一篇NanaZip完全指南Windows上终极免费压缩工具快速上手下一篇3步解锁虚幻引擎游戏资源FModel让游戏文件探索变得如此简单创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考