視覺化！一款基於實體連線圖的資料庫設計工具！

Java陈序员發表於2024-10-10
視覺化資料庫

大家好，我是 Java陳序員。

之前，給大家推薦過幾款資料庫文件相關的實用工具。

永不生鏽的螺絲釘！一款簡潔好用的資料庫表結構文件生成器

效率神器！一款方便、快捷的資料庫文件查詢、匯出工具！

今天，給大家介紹一款視覺化的資料庫結構設計工具！

關注微信公眾號：【Java陳序員】，獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。

專案介紹

dber —— 一款基於實體連線圖的資料庫設計工具。支援視覺化資料庫結構設計，拖拽生成模型引用關係和一鍵匯出 SQL 語句。

技術棧：

  • SVG
  • Next.js(React)
  • DBML
  • ArcoDesign
  • Dexie(indexDB)
  • Soul CLI(sqlite db)

功能體驗

資料庫管理：dber 支援建立多張資料庫表結構關係圖，一張圖表可代表一個資料庫。

資料表模型：資料表模型支援透過視覺化介面編輯建立，或者是透過 SQL 指令碼進行匯入。

關聯關係：在複雜的業務邏輯中，常常涉及到不同表直接的關聯關係，一對一、一對多、多對一等關係可以在圖表中進行關聯展示，方便理解。

一鍵匯出 SQL：資料庫表結構在介面設計好後，支援一鍵匯出 SQL 語句，方便執行初始化資料庫。

版本記錄：在實際操作中，由於誤操作或者其他原因，需要回滾版本，可在版本記錄中回退到對應的版本。

統計功能：dber 支援統計圖表（資料庫）中有多少張張表，以及每張表中有多個欄位，並支援排序、搜尋功能。

暗黑模式：dber 還支援暗黑模式，並且每個資料表模型可定義不同的顏色主題。

演示操作 Gif

快速上手

本地執行

1、克隆程式碼

git clone https://github.com/findyourmagic/dber.git

2、安裝依賴

npm install
# or
yarn install

3、啟動開發服務

npm run dev
# or
yarn dev

4、使用瀏覽器開啟 http://localhost:3000

生產部署

1、構建服務

npm run build && npm run start

2、匯出靜態頁面

npm run gen

3、Nginx 配置

server {
    listen       80;
    server_name  dber.local.yes-hr.com;
    root   /{you_projects}/dber/out;
    index index.html;

    location /graphs {
        try_files $uri $uri.html /graphs/[id].html;
    }
}

Docker 部署

1、構建 Docker 映象

docker build -t dber .

2、用 Docker 啟動服務

docker run -p 3000:3000 dber

3、或者用 Docker Compose 啟動服務

docker-compose up -d

4、使用瀏覽器開啟 http://localhost:3000

dber 作為一款視覺化的資料庫結構設計工具，可以說十分優秀！

在專案的開始階段，可以用來設計資料庫表結構，後期可以用來維護以及快速上手掌握專案。最重要的是，如果有多個專案，可以統一管理資料庫表。

快去安裝體驗吧~

專案地址：https://github.com/findyourmagic/dber

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網站，進行線上瀏覽：

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章