數(shù)據(jù)庫前端數(shù)據(jù)可視化AI 應(yīng)用【免費下載鏈接】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 的數(shù)據(jù)庫圖表ER Diagram編輯器它的核心亮點是一次查詢即刻可視化在任意支持的數(shù)據(jù)庫中運行一段Smart Query即可把整個數(shù)據(jù)庫 schema 以 JSON 形式抓取出來并粘貼進(jìn)編輯器瞬間生成可視化圖表全程不需要安裝任何桌面客戶端也無需提供數(shù)據(jù)庫密碼。本指南將以倉庫 README.md 為主線結(jié)合源碼帶你掌握 ChartDB 的核心工作流Smart Query 導(dǎo)入、AI 驅(qū)動的跨方言 SQL 導(dǎo)出、以及本地開發(fā)、生產(chǎn)構(gòu)建和 Docker 自托管部署的完整配置方法。項目概覽一個面向快速可視化與設(shè)計的數(shù)據(jù)庫圖表編輯器ChartDB 的目標(biāo)用戶畫像非常清晰需要快速理解現(xiàn)有數(shù)據(jù)庫結(jié)構(gòu)文檔化、團(tuán)隊評審、需要把數(shù)據(jù)庫從一個方言遷移到另一個方言如 MySQL → PostgreSQL、SQLite → MariaDB、或者需要在圖形界面中微調(diào)與批注復(fù)雜表結(jié)構(gòu)的開發(fā)者。從 package.json 可以看到它基于React 18 Vite 7 TypeScript構(gòu)建圖表畫布使用xyflow/reactReact FlowSQL 編輯與高亮使用 Monaco Editor內(nèi)置i18next支持 20 多種語言并集成ai/ai-sdk/openaiSDK 用于 AI 導(dǎo)出能力。README 將它的三大核心能力概括為Instant Schema Import即時 schema 導(dǎo)入在數(shù)據(jù)庫中運行一條查詢即可將整個 schema 以 JSON 形式瞬間抓取回來用于文檔化、團(tuán)隊討論或理解數(shù)據(jù)AI-Powered ExportAI 驅(qū)動導(dǎo)出借助 LLM 生成目標(biāo)方言的 DDL 腳本簡化跨數(shù)據(jù)庫遷移Interactive Editing交互式編輯通過直觀的編輯器對表、字段、關(guān)系進(jìn)行細(xì)粒度調(diào)整與批注。支持的數(shù)據(jù)庫README 明確列出以下數(shù)據(jù)庫獲得官方支持? 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 屬于源碼中已實現(xiàn)但 README 未列出的數(shù)據(jù)庫類型。每種數(shù)據(jù)庫在 src/assets 下都配有亮色/暗色兩套 logo*_logo.png/*_logo_dark.png用于界面中區(qū)分顯示。核心工作流一Smart Query 一鍵導(dǎo)入 Schema這是 ChartDB 區(qū)別于傳統(tǒng)連接數(shù)據(jù)庫讀取元數(shù)據(jù)方案的關(guān)鍵設(shè)計——你不需要把數(shù)據(jù)庫賬號、密碼交給 ChartDB而是由 ChartDB 給你一段查詢腳本你在自己的數(shù)據(jù)庫客戶端里執(zhí)行把返回的 JSON 結(jié)果粘貼回 ChartDB 即可。整個流程README 的Try it on our website部分是打開 ChartDB點擊 Go to app選擇你正在使用的數(shù)據(jù)庫類型拿到對應(yīng)的magic query并在你的數(shù)據(jù)庫中執(zhí)行將查詢返回的 JSON 結(jié)果復(fù)制粘貼到 ChartDB開始查看與編輯圖表。底層實現(xiàn)腳本注冊表與動態(tài)加載這個magic query并非寫死的前端字符串而是按數(shù)據(jù)庫類型組織的腳本生成器。在 src/lib/data/import-metadata/scripts/scripts.ts 中importMetadataScripts是一個以DatabaseType為鍵的注冊表每種數(shù)據(jù)庫對應(yīng)一個生成查詢文本的函數(shù)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 查詢系統(tǒng)目錄如 information_schema 類視圖把表、字段、主鍵、外鍵、索引、Check 約束等信息一次性取出并序列化為 JSON。導(dǎo)入側(cè)的元數(shù)據(jù)解析由 src/lib/data/import-metadata 完成其子目錄metadata-types/定義了完整的 JSON 元數(shù)據(jù)結(jié)構(gòu)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負(fù)責(zé)把 JSON 還原成 ChartDB 內(nèi)部圖表模型。在 UI 層面smart-query-instructions.tsx 是導(dǎo)入向?qū)У暮诵乃鼤鶕?jù)用戶選中的databaseType與可選的databaseEdition如 SQL Server 需要區(qū)分版本與 SSMS 客戶端動態(tài)import(/lib/data/import-metadata/scripts/scripts)加載腳本生成器并通過 CodeSnippet 組件展示帶語法高亮的可復(fù)制代碼。對于支持多種客戶端的數(shù)據(jù)庫例如 PostgreSQL 的 psql、Supabase、Timescale界面會提供DB Client 標(biāo)簽頁切換不同客戶端生成對應(yīng)的查詢片段minimizeQuery用于壓縮空白以保持展示整潔而codeToCopy保留完整可執(zhí)行文本。核心工作流二AI 驅(qū)動的跨方言 SQL 導(dǎo)出README 強(qiáng)調(diào)的AI-Powered Export解決的是方言遷移場景同一份圖表可以按需導(dǎo)出為 MySQL、PostgreSQL、SQL Server、SQLite 等任意受支持方言的 DDL。其核心實現(xiàn)位于 src/lib/data/sql-export/export-sql-script.ts采用了確定性生成 LLM 轉(zhuǎn)換的兩段式架構(gòu)exportBaseSQL()完全不依賴 LLM從圖表模型確定性地產(chǎn)出基礎(chǔ) DDL——CREATE SCHEMA、CREATE TYPE ... AS ENUMPostgreSQL 自定義類型、CREATE SEQUENCE、CREATE TABLE含字段類型/長度/精度、NOT NULL、UNIQUE、AUTO_INCREMENT、DEFAULT、主鍵與復(fù)合主鍵、CHECK約束、COMMENT ON、排序后的CREATE INDEX以及按基數(shù)規(guī)則決定外鍵落在哪一側(cè)的ALTER TABLE ... ADD CONSTRAINT ... FOREIGN KEY多對多關(guān)系需要連接表會被跳過。exportSQL()當(dāng)目標(biāo)方言與圖表原始方言不同且存在確定性的跨方言轉(zhuǎn)換路徑時優(yōu)先走無 LLM 路徑如 PostgreSQL → MySQL/MariaDB 與 PostgreSQL → SQL Server見 src/lib/data/sql-export/cross-dialect其余場景則調(diào)用 LLM把exportBaseSQL生成的腳本連同generateSQLPrompt()的方言指令一起交給模型改寫。兩種 AI 配置方式不可混用exportSQL()在調(diào)用 LLM 前會執(zhí)行validateConfiguration()export-sql-script.ts邏輯是若配置了自定義 endpoint 模型名則走自定義推理服務(wù)不要求 OpenAI API Key若配置了OpenAI API Key則使用 OpenAI 官方服務(wù)兩者都未配置則直接拋出配置錯誤。README 對此的表述是你必須配置 Option 1OpenAI API Key或Option 2自定義 endpoint 和 model name兩者之一AI 能力才能生效不要混用。模型的默認(rèn)值是gpt-4o-mini-2024-07-18當(dāng)未顯式指定LLM_MODEL_NAME時。LLM 轉(zhuǎn)換結(jié)果還會以 schema 與 SQL 文本為鍵做緩存export-sql-cache.ts相同輸入二次導(dǎo)出無需重復(fù)調(diào)用模型。本地開發(fā)與生產(chǎn)構(gòu)建README 的Getting Started部分給出了最簡路徑。ChartDB 是標(biāo)準(zhǔn) Vite 前端項目無需后端服務(wù)即可運行npm install npm run devnpm run dev對應(yīng)vite見 package.json 的 scripts 字段默認(rèn)啟動本地開發(fā)服務(wù)器。生產(chǎn)構(gòu)建則需先通過 lint 與 TypeScript 編譯檢查npm install npm run buildbuild腳本實際執(zhí)行npm run lint tsc -b vite build即ESLint零警告門檻→ TypeScript 項目編譯 → Vite 產(chǎn)物打包三步串聯(lián)。如果你的部署需要 AI 能力README 給出的構(gòu)建命令是在 build 時注入 OpenAI Keynpm install VITE_OPENAI_API_KEYYOUR_OPEN_AI_KEY npm run build這里的VITE_前綴變量會被 Vite 在編譯期寫入產(chǎn)物讀取入口在 src/lib/env.tsOPENAI_API_KEY對應(yīng)import.meta.env.VITE_OPENAI_API_KEY同理還有OPENAI_API_ENDPOINT、LLM_MODEL_NAME、HIDE_CHARTDB_CLOUD、DISABLE_ANALYTICS。需要說明的是以VITE_前綴注入的變量是構(gòu)建期固化進(jìn) JS 產(chǎn)物的適合私有部署而 Docker 方案下文額外提供了運行期注入的window.env機(jī)制。Docker 部署一行命令跑起來ChartDB 官方發(fā)布 Docker 鏡像README 給出的最快方式是直接拉取運行docker run -e OPENAI_API_KEYYOUR_OPEN_AI_KEY -p 8080:80 ghcr.io/chartdb/chartdb:latest如果你希望本地構(gòu)建自己的鏡像docker build -t chartdb . docker run -e OPENAI_API_KEYYOUR_OPEN_AI_KEY -p 8080:80 chartdb構(gòu)建完成后瀏覽器訪問http://localhost:8080即可使用。這里有兩個值得展開的細(xì)節(jié)1. 鏡像的構(gòu)建結(jié)構(gòu)多階段Dockerfile 采用兩階段構(gòu)建builder 階段基于node:24-alpine通過ARG聲明VITE_OPENAI_API_KEY、VITE_OPENAI_API_ENDPOINT、VITE_LLM_MODEL_NAME、VITE_HIDE_CHARTDB_CLOUD、VITE_DISABLE_ANALYTICS五個構(gòu)建參數(shù)安裝依賴npm ci后把參數(shù)寫入.env再執(zhí)行npm run buildproduction 階段基于nginx:stable-alpine把構(gòu)建產(chǎn)物復(fù)制到/usr/share/nginx/html拷入 default.conf.template 與 entrypoint.sh暴露 80 端口以 entrypoint 啟動。2. 運行期環(huán)境變量Nginx 動態(tài)注入與構(gòu)建期VITE_變量不同docker run -e傳入的同名無 VITE_ 前綴環(huán)境變量是在容器啟動時由 entrypoint.sh 處理的它用envsubst把 Nginx 模板里$OPENAI_API_KEY、$OPENAI_API_ENDPOINT、$LLM_MODEL_NAME、$HIDE_CHARTDB_CLOUD、$DISABLE_ANALYTICS等占位符替換成真實值然后啟動 Nginx。其中關(guān)鍵的機(jī)制是 default.conf.template 里的/config.js路由——它動態(tài)返回一段 JavaScript把環(huán)境變量掛到window.env上window.env { OPENAI_API_KEY: ..., OPENAI_API_ENDPOINT: ..., LLM_MODEL_NAME: ..., HIDE_CHARTDB_CLOUD: ..., DISABLE_ANALYTICS: ... };前端在 src/lib/env.ts 讀取時優(yōu)先取window?.env?.[key]運行期注入回退到import.meta.env.VITE_*構(gòu)建期注入。同時 default.conf.template 中的try_files $uri $uri/ /index.html保證了前端路由在刷新時不會 404SPA fallback。倉庫根目錄的 public/config.js 是一個空占位文件Docker 部署場景下實際生效的是 Nginx 動態(tài)生成的/config.js。使用自定義推理服務(wù)器本地 vLLM 等README 提供了完整的自定義推理服務(wù)器接入示例適用于不想依賴 OpenAI 官方服務(wù)、希望在自托管環(huán)境中接入本地 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 服務(wù)器示例配置VITE_OPENAI_API_ENDPOINThttp://localhost:8000/v1 VITE_LLM_MODEL_NAMEQwen/Qwen2.5-32B-Instruct-AWQ結(jié)合源碼中的validateConfiguration()邏輯這條路徑的生效條件是endpoint 與 model name 同時存在——滿足后即走createOpenAI({ apiKey, baseUrl })的自定義 baseUrl 分支export-sql-script.ts此時不再強(qiáng)制要求 OpenAI API Key。隱私與可觀測性Fathom Analytics 的開關(guān)README 的隱私說明指出ChartDB 內(nèi)置了基于 Fathom Analytics 的隱私友好型分析無 Cookie、不采集個人身份信息。如果你不希望上報任何分析數(shù)據(jù)有兩種方式關(guān)閉運行容器時追加環(huán)境變量-e DISABLE_ANALYTICStrue構(gòu)建鏡像時傳入構(gòu)建參數(shù)--build-arg VITE_DISABLE_ANALYTICStrue在源碼層面src/lib/env.ts 中DISABLE_ANALYTICS同時兼容運行期window.env.DISABLE_ANALYTICS與構(gòu)建期VITE_DISABLE_ANALYTICS兩種來源以true字符串判定。與此類似的還有HIDE_CHARTDB_CLOUD用于在自托管界面中隱藏指向 ChartDB 云服務(wù)的入口。進(jìn)階內(nèi)置模板與示例除了從零導(dǎo)入 schemaChartDB 還內(nèi)置了大量可直接加載的示例數(shù)據(jù)庫模板便于快速體驗編輯器能力模板數(shù)據(jù)位于 src/templates-data/templates包含 50 個真實項目的數(shù)據(jù)庫結(jié)構(gòu)如wordpress-db.ts、airbnb-db.ts、django-db.ts、pokemon-db.ts、twitter-db.ts等對應(yīng)頁面實現(xiàn)見 src/pages/templates-page 與 src/pages/template-page另有一組教學(xué)示例圖在 src/pages/examples-page/examples-databike stores、dvd rental、employees 等配套圖片位于 src/assets/examples 與 src/assets/templates。狀態(tài)、社區(qū)與許可README 聲明 ChartDB 當(dāng)前處于Public Beta階段。項目歡迎社區(qū)貢獻(xiàn)PR 指南見 CONTRIBUTING.md參與者行為準(zhǔn)則見 CODE_OF_CONDUCT.md并以GNU Affero General Public License v3.0AGPL-3.0開源許可全文見 LICENSE。從 CHANGELOG.md 可以跟蹤版本演進(jìn)當(dāng)前倉庫 package.json 標(biāo)注版本為 1.20.1。小結(jié)ChartDB 用一條巧妙的Smart Query繞開了傳統(tǒng)數(shù)據(jù)庫圖表工具需要數(shù)據(jù)庫直連與憑證的痛點抓取在用戶側(cè)完成、可視化在瀏覽器完成兼顧了安全與便捷。其 SQL 導(dǎo)出采用確定性引擎兜底 LLM 方言改寫增強(qiáng)的設(shè)計遷移路徑可預(yù)測部署方面同時支持npm直接構(gòu)建和Docker自托管且 AI 能力既可用 OpenAI 官方服務(wù)、也可通過自定義 endpoint 接入本地推理服務(wù)器并提供了構(gòu)建期VITE_與運行期window.env兩套配置注入方式。無論你是想快速理解一個陌生庫的表結(jié)構(gòu)、給團(tuán)隊產(chǎn)出文檔化 ER 圖還是規(guī)劃一次跨方言數(shù)據(jù)庫遷移ChartDB 都提供了一條低摩擦的路徑。贊分享數(shù)據(jù)庫前端數(shù)據(jù)可視化AI 應(yīng)用【免費下載鏈接】chartdbDatabase diagrams editor that allows you to visualize and design your DB with a single query.項目地址https://gitcode.com/GitHub_Trending/ch/chartdb點擊查看免費下載相關(guān)推薦如何讓不同品牌的攝像機(jī)進(jìn)同一個平臺WVP-GB28181-Pro 接入與調(diào)優(yōu)指南如何讓不同品牌的攝像機(jī)進(jìn)同一個平臺WVP GB28181 Pro 接入與調(diào)優(yōu)指南 WVP GB28181 Pro 是一個基于國標(biāo) GB28181 2016 與后端音視頻前端ChartDB實時架構(gòu)設(shè)計無密碼安全數(shù)據(jù)庫可視化ChartDB實時架構(gòu)設(shè)計無密碼安全數(shù)據(jù)庫可視化 引言數(shù)據(jù)庫可視化的安全革命 還在為數(shù)據(jù)庫密碼管理而頭疼嗎還在擔(dān)心敏感憑證泄露的風(fēng)險嗎ChartDB帶來數(shù)據(jù)庫前端數(shù)據(jù)可視化AI 應(yīng)用【親測免費】 chartdb開源數(shù)據(jù)庫圖表編輯器輕松管理數(shù)據(jù)庫架構(gòu)chartdb開源數(shù)據(jù)庫圖表編輯器輕松管理數(shù)據(jù)庫架構(gòu) 在現(xiàn)代軟件開發(fā)中數(shù)據(jù)庫的設(shè)計和管理是至關(guān)重要的環(huán)節(jié)。一個清晰、準(zhǔn)確的數(shù)據(jù)庫架構(gòu)可以幫助開發(fā)者更好地理數(shù)據(jù)庫前端數(shù)據(jù)可視化AI 應(yīng)用上一篇NanaZip完全指南Windows上終極免費壓縮工具快速上手下一篇3步解鎖虛幻引擎游戲資源FModel讓游戲文件探索變得如此簡單創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考