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

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

最近研究低代码/零代码产品的时候, 发现一款非常有价值的可视化数据库设计工具——DrawDB.

drawdb.gif

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

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

一丢丢题外话

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

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

正文

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

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

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

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

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

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

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

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

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

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

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

最后

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

后续我还会持续迭代 Nocode/WEP 项目，让它成为最好用的可视化 + AI知识库，同时也会持续迭代和分享H5-Dooring零代码搭建平台，如果大家感兴趣，也随时欢迎留言区反馈交流~