嗨，大家好，我是徐小夕。
之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：
H5-Dooring（页面可视化搭建平台） V6.Dooring（可视化大屏搭建平台） 橙子试卷（表单搭建引擎）
最近研究低代码/零代码产品的时候, 发现一款非常有价值的可视化数据库设计工具——DrawDB.
它可以通过可视化拖拽的方式, 轻松帮助我们设计数据库的各种业务表, 并且能一键导出 SQL 代码, 这种设计无疑给低代码/零代码产品画上了一个业务闭环的“小句号”.
接下来我就带大家一起学习研究一下这个开源项目, 文末会放 DrawDB 的开源地址, 方便大家参考.
一丢丢题外话
最近我也在研究AI工作流相关的技术和产品规划, 近期也会上线2款新的搭建产品, 欢迎大家的小板凳~
最近《趣谈前端》公众号的内容主要会为3个模块持续更新:
可视化相关的精选开源项目分享 AI技术在Web产品中的应用 自研产品和独立开发者的经验&干货分享
可视化图表, Web表格,工作流,拖拽搭建,文档编辑器, 这款开源项目通通帮你解决!
正文
drawDB 是一款开源、简单、直观、强大且用户友好的在线数据库设计工具和 SQL 生成器，支持多种数据库。目前这款开源项目已经有 15.4k 的 star, 上千人使用fork.
我们只需点击几下即可实现如下常用功能:
构建图表， 导出SQL脚本， 可以自定义编辑器等， 无需登录免费使用
本地启动安装也很简单, 我们可以通过 npm 的方法一键安装使用:
git clone https://github.com/drawdb-io/drawdb
cd drawdb
npm install
npm run dev
接下来和大家分享一下它构建数据库表的方式.
1.选择一个数据库
它支持多种常用数据库, 比如 MySQL, POSTGRESQL. 这里我先选 MySQL带大家演示一下.
2. 可视化的创建数据表
这里我建了两张表, 分别是Dooring用户表和页面表, 并建立了关联(PS: 数据表关联大家可以根据实际情况设计, 这里我只是简单举个例子).
我们看到数据库表的建立完全可以通过工作流的方式可视化的实现, 基本上不需要开发人员手动 coding 了.
3. 导出SQL代码
设计好数据库和数据表之后, 我们可以一键将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零代码搭建平台，如果大家感兴趣，也随时欢迎留言区反馈交流~
往期精彩
