一款价值感爆棚的开源可视化数据库设计工具——DrawDB

徐小夕
3,833 阅读4分钟

嗨，大家好，我是徐小夕。

之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：

最近研究低代码/零代码产品的时候, 发现一款非常有 drawdb.gif

它可以通过可视化拖拽的方式, 轻松帮助我们设计数据库的各种业务表, 并且能一键导出 SQL 代码, 这种设计无疑给低代码/零代码产品画上了一个业务闭环的“小句号”.

接下来我就带大家一起学习研究一下这个开源项目, 文末会放 DrawDB 的开源地址, 方便大家参考.

一丢丢题外话

最近我也在研究AI工作流相关的技术和产品规划, 近期也会上线2款新的搭建产品, 欢迎大家的小板凳~

最近《趣谈前端》公众号的内容主要会为3个模块持续更新:

  • 可视化相关的精选开源项目分享
  • AI技术在Web产品中的应用
  • 自研产品和独立开发者的经验&干货分享

感兴趣的朋友也可以关注我的公众号, 一起进步, 成长.

往期内容:

--

正文

image.png

drawDB 是一款开源、简单、直观、强大且用户友好的在线数据库设计工具和 SQL 生成器，支持多种数据库。 目前这款开源项目已经有 15.4k 的 star, 上千人使用fork.

image.png

我们只需点击几下即可实现如下常用功能:

  • 构建图表，
  • 导出SQL脚本，
  • 可以自定义编辑器等，
  • 无需登录免费使用

本地启动安装也很简单, 我们可以通过 npm 的方法一键安装使用:

git clone https://github.com/drawdb-io/drawdb
cd drawdb
npm install
npm run dev

接下来和大家分享一下它构建数据库表的方式.

1.选择一个数据库

image.png

它支持多种常用数据库, 比如 MySQL, POSTGRESQL. 这里我先选 MySQL带大家演示一下.

2. 可视化的创建数据表

image.png

这里我建了两张表, 分别是Dooring用户表和页面表, 并建立了关联(PS: 数据表关联大家可以根据实际情况设计, 这里我只是简单举个例子).

我们看到数据库表的建立完全可以通过工作流的方式可视化的实现, 基本上不需要开发人员手动 coding 了.

3. 导出SQL代码

image.png

设计好数据库和数据表之后, 我们可以一键将SQL导出, 还是非常高效的. 我觉得如果把这个流程和低代码绑定, 是不是可以直接在线动态创建业务数据库了, 当然这只是很小的一个场景, 更多的能力大家也可以慢慢在这个开源项目里摸索.

技术实现

image.png

接下来和大家分享一下这款开源项目用到的技术栈:

  1. @codemirror/lang-json：提供了用于在 CodeMirror 编辑器中处理 JSON 语言的支持
  2. @codemirror/lang-sql：为 CodeMirror 编辑器添加了对 SQL 语言的支持
  3. @douyinfe/semi-ui：一个 UI 组件库
  4. @lexical/react：与 Lexical 相关的 React 组件
  5. @uiw/codemirror-theme-github、@uiw/codemirror-theme-vscode：为 CodeMirror 编辑器提供特定的主题，如 GitHub 或 VSCode 主题
  6. @uiw/react-codemirror：用于在 React 中使用 CodeMirror 编辑器的组件
  7. @vercel/analytics：Vercel 的分析功能相关
  8. axios：用于进行 HTTP 请求的库
  9. classnames：用于动态生成类名的工具库
  10. dexie：一个本地数据库库
  11. dexie-react-hooks：与 Dexie 数据库结合使用的 React 钩子库
  12. file-saver：用于保存文件的库
  13. framer-motion：用于实现动画效果的库
  14. html-to-image：将 HTML 内容转换为图像的工具
  15. i18next、i18next-browser-languagedetector：国际化相关的库，用于多语言支持
  16. jsonschema：用于处理 JSON 模式验证的库
  17. jspdf：用于生成 PDF 文件的库
  18. lexical：与文本编辑相关的库
  19. node-sql-parser：用于解析 SQL 语句的库
  20. react：前端库
  21. react-dom：React的渲染库
  22. react-hotkeys-hook：用于处理快捷键的 React 钩子库
  23. react-i18next：React 中的国际化库
  24. react-router-dom：React 路由库
  25. url：用于处理 URL 的库
  26. usehooks-ts：可能是一些自定义的 React 钩子库

最后

上面介绍的开源项目的github 地址: github.com/drawdb-io/drawdb

后续我也会持续迭代 H5-Dooring 零代码项目，让它成为最好用的可视化 + 无代码应用搭建工具，如果大家感兴趣，也随时欢迎留言区反馈交流~

avatar
文章
阅读
粉丝