网站导航
> 技术文档 > 开源数据库E-R图绘制工具分享

开源数据库E-R图绘制工具分享

网友: 技术文档 2025-07-26 21:00:13

1. 特点：

可直接使用，无需注册账号
无状态的纯前端工具，数据会存放在浏览器中。设计完成后可将数据保存到本地

2. 使用场景：

描述E-R图，对数据库表关系进行直观分析

3. 效果：

4. 启动项目

像文档里说的一样，启动很简单：

  1. 先克隆项目到本地
  2. 到项目目录下npm install安装依赖
  3. 最后npm run dev启动项目

4. 测试数据

用来测试的建表sql：

  1. users - 用户表：存储用户信息。
  2. product_categories - 商品分类表：存储商品的分类信息。
  3. products - 商品表：存储商品详细信息，并关联到商品分类。
  4. orders - 订单表：记录用户的订单摘要信息。
  5. order_items - 订单项目表：一个“连接表”，用于实现订单和商品之间的多对多关系。
  6. product_reviews - 商品评论表：用户可以对购买过的商品进行评论。
-- 设置默认的存储引擎为 InnoDB，并使用 utf8mb4 字符集以支持各种字符，包括 EmojiSET NAMES utf8mb4;SET FOREIGN_KEY_CHECKS = 0;-- ------------------------------ 1. 用户表 (users)-- ----------------------------DROP TABLE IF EXISTS `users`;CREATE TABLE `users` ( `id` INT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT \'用户ID\', `username` VARCHAR(50) NOT NULL COMMENT \'用户名\', `email` VARCHAR(100) NOT NULL COMMENT \'电子邮箱\', `password_hash` VARCHAR(255) NOT NULL COMMENT \'哈希后的密码\', `full_name` VARCHAR(100) NULL COMMENT \'用户全名\', `registration_date` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT \'注册时间\', `last_login` DATETIME NULL COMMENT \'最后登录时间\', PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`), UNIQUE KEY `uk_email` (`email`)) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT=\'用户表\';-- ------------------------------ 2. 商品分类表 (product_categories)-- ----------------------------DROP TABLE IF EXISTS `product_categories`;CREATE TABLE `product_categories` ( `id` INT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT \'分类ID\', `name` VARCHAR(100) NOT NULL COMMENT \'分类名称\', `parent_id` INT UNSIGNED NULL COMMENT \'父分类ID，用于实现多级分类\', `description` TEXT NULL COMMENT \'分类描述\', PRIMARY KEY (`id`), UNIQUE KEY `uk_name` (`name`), KEY `idx_parent_id` (`parent_id`), CONSTRAINT `fk_parent_category` FOREIGN KEY (`parent_id`) REFERENCES `product_categories` (`id`) ON DELETE SET NULL ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT=\'商品分类表\';-- ------------------------------ 3. 商品表 (products)-- ----------------------------DROP TABLE IF EXISTS `products`;CREATE TABLE `products` ( `id` INT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT \'商品ID\', `category_id` INT UNSIGNED NOT NULL COMMENT \'所属分类ID\', `sku` VARCHAR(100) NOT NULL COMMENT \'商品SKU (Stock Keeping Unit)\', `name` VARCHAR(255) NOT NULL COMMENT \'商品名称\', `description` TEXT NULL COMMENT \'商品详细描述\', `price` DECIMAL(10, 2) NOT NULL COMMENT \'商品单价\', `stock_quantity` INT NOT NULL DEFAULT 0 COMMENT \'库存数量\', `created_at` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT \'创建时间\', `updated_at` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT \'最后更新时间\', PRIMARY KEY (`id`), UNIQUE KEY `uk_sku` (`sku`), KEY `idx_name` (`name`), CONSTRAINT `fk_product_category` FOREIGN KEY (`category_id`) REFERENCES `product_categories` (`id`) ON DELETE RESTRICT ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT=\'商品表\';-- ------------------------------ 4. 订单表 (orders)-- ----------------------------DROP TABLE IF EXISTS `orders`;CREATE TABLE `orders` ( `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT \'订单ID\', `user_id` INT UNSIGNED NOT NULL COMMENT \'用户ID\', `order_date` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT \'下单时间\', `status` ENUM(\'pending\', \'paid\', \'shipped\', \'delivered\', \'cancelled\') NOT NULL DEFAULT \'pending\' COMMENT \'订单状态\', `total_amount` DECIMAL(12, 2) NOT NULL COMMENT \'订单总金额\', `shipping_address` TEXT NOT NULL COMMENT \'收货地址\', `notes` VARCHAR(500) NULL COMMENT \'订单备注\', PRIMARY KEY (`id`), KEY `idx_user_id` (`user_id`), KEY `idx_status` (`status`), CONSTRAINT `fk_order_user` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT=\'订单表\';-- ------------------------------ 5. 订单项目表 (order_items) - 连接表-- ----------------------------DROP TABLE IF EXISTS `order_items`;CREATE TABLE `order_items` ( `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT \'订单项目ID\', `order_id` BIGINT UNSIGNED NOT NULL COMMENT \'所属订单ID\', `product_id` INT UNSIGNED NOT NULL COMMENT \'商品ID\', `quantity` INT UNSIGNED NOT NULL COMMENT \'购买数量\', `price_per_unit` DECIMAL(10, 2) NOT NULL COMMENT \'购买时的单价 (快照)\', PRIMARY KEY (`id`), UNIQUE KEY `uk_order_product` (`order_id`, `product_id`), -- 一个订单中一个商品只能有一条记录 CONSTRAINT `fk_item_order` FOREIGN KEY (`order_id`) REFERENCES `orders` (`id`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_item_product` FOREIGN KEY (`product_id`) REFERENCES `products` (`id`) ON DELETE RESTRICT ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT=\'订单项目表 (多对多连接)\';-- ------------------------------ 6. 商品评论表 (product_reviews)-- ----------------------------DROP TABLE IF EXISTS `product_reviews`;CREATE TABLE `product_reviews` ( `id` INT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT \'评论ID\', `product_id` INT UNSIGNED NOT NULL COMMENT \'商品ID\', `user_id` INT UNSIGNED NOT NULL COMMENT \'用户ID\', `rating` TINYINT UNSIGNED NOT NULL COMMENT \'评分 (1-5)\', `comment` TEXT NULL COMMENT \'评论内容\', `created_at` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT \'评论时间\', PRIMARY KEY (`id`), UNIQUE KEY `uk_user_product_review` (`user_id`, `product_id`), -- 每个用户对一个商品只能评论一次 CONSTRAINT `fk_review_product` FOREIGN KEY (`product_id`) REFERENCES `products` (`id`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_review_user` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `chk_rating` CHECK ((`rating` >= 1 and `rating` <= 5)) -- 检查约束，确保评分在1-5之间) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT=\'商品评论表\';SET FOREIGN_KEY_CHECKS = 1;

示例数据sql：

-- 开始插入数据，暂时禁用外键检查，方便按任意顺序插入，最后再开启SET FOREIGN_KEY_CHECKS = 0;-- ------------------------------ 1. `users` 表的示例数据-- ----------------------------INSERT INTO `users` (`id`, `username`, `email`, `password_hash`, `full_name`, `registration_date`, `last_login`) VALUES(1, \'alice\', \'alice@example.com\', \'sha256_hash_value_placeholder_1\', \'Alice Smith\', \'2024-01-15 10:30:00\', \'2025-07-20 09:15:00\'),(2, \'bob\', \'bob@example.com\', \'sha256_hash_value_placeholder_2\', \'Bob Johnson\', \'2024-02-20 11:00:00\', \'2025-07-21 18:30:00\'),(3, \'charlie\', \'charlie@example.com\', \'sha256_hash_value_placeholder_3\', \'Charlie Brown\', \'2024-03-10 16:45:00\', \'2025-07-22 14:00:00\'),(4, \'diana\', \'diana@example.com\', \'sha256_hash_value_placeholder_4\', \'Diana Prince\', \'2024-04-05 20:00:00\', \'2025-07-19 11:45:00\'),(5, \'ethan\', \'ethan@example.com\', \'sha256_hash_value_placeholder_5\', \'Ethan Hunt\', \'2024-05-01 12:00:00\', NULL);-- ------------------------------ 2. `product_categories` 表的示例数据 (包含层级关系)-- ----------------------------INSERT INTO `product_categories` (`id`, `name`, `parent_id`, `description`) VALUES(1, \'电子产品\', NULL, \'所有消费类电子产品\'),(2, \'图书音像\', NULL, \'书籍、音乐和电影\'),(3, \'家居生活\', NULL, \'提升生活品质的家居用品\'),(4, \'电脑及配件\', 1, \'笔记本、台式机以及相关配件\'),(5, \'手机通讯\', 1, \'智能手机和相关配件\'),(6, \'科幻小说\', 2, \'探索未来与宇宙的文学作品\');-- ------------------------------ 3. `products` 表的示例数据-- ----------------------------INSERT INTO `products` (`id`, `category_id`, `sku`, `name`, `description`, `price`, `stock_quantity`, `created_at`, `updated_at`) VALUES(1, 4, \'COM-LP-MBP16\', \'16英寸 MacBook Pro\', \'强大的M4 Pro芯片，适用于专业人士。\', 18999.00, 50, \'2024-08-01 10:00:00\', \'2024-08-01 10:00:00\'),(2, 4, \'COM-LP-TPX1\', \'ThinkPad X1 Carbon\', \'超轻薄商务笔记本，性能卓越。\', 12500.00, 80, \'2024-08-02 11:00:00\', \'2024-08-02 11:00:00\'),(3, 5, \'CEL-PH-IP16\', \'iPhone 16 Pro\', \'全新的设计，更强的摄像头系统。\', 9999.00, 120, \'2024-09-15 09:00:00\', \'2024-09-15 09:00:00\'),(4, 5, \'CEL-PH-PIX9\', \'Google Pixel 9\', \'纯净安卓体验，AI摄影大师。\', 6999.00, 150, \'2024-10-01 14:00:00\', \'2024-10-01 14:00:00\'),(5, 6, \'BOK-SF-3BODY\', \'《三体》全集\', \'刘慈欣著，中国科幻的里程碑之作。\', 98.00, 500, \'2024-01-10 16:00:00\', \'2024-01-10 16:00:00\'),(6, 6, \'BOK-SF-DUNE\', \'《沙丘》\', \'弗兰克·赫伯特著，科幻史诗巨著。\', 128.00, 300, \'2024-02-15 17:00:00\', \'2024-02-15 17:00:00\'),(7, 3, \'HOM-LT-SMLMP\', \'智能护眼台灯\', \'可调节色温和亮度，支持App控制。\', 299.00, 200, \'2024-06-20 18:00:00\', \'2024-06-20 18:00:00\'),(8, 3, \'HOM-AP-CFMKR\', \'全自动咖啡机\', \'一键制作拿铁、卡布奇诺。\', 1599.00, 60, \'2024-07-01 11:30:00\', \'2024-07-01 11:30:00\');-- ------------------------------ 4. `orders` 表的示例数据 (total_amount 初始为 0, 稍后更新)-- ----------------------------INSERT INTO `orders` (`id`, `user_id`, `order_date`, `status`, `total_amount`, `shipping_address`, `notes`) VALUES(1001, 1, \'2025-06-10 14:25:10\', \'delivered\', 0.00, \'上海市浦东新区世纪大道1号\', \'请尽快发货\'),(1002, 2, \'2025-07-15 09:30:05\', \'shipped\', 0.00, \'北京市海淀区中关村南大街1号\', \'工作日派送\'),(1003, 1, \'2025-07-18 20:10:00\', \'paid\', 0.00, \'上海市浦东新区世纪大道1号\', NULL),(1004, 3, \'2025-07-20 11:45:30\', \'delivered\', 0.00, \'广东省深圳市南山区科技园路1号\', \'包裹请放快递柜\'),(1005, 4, \'2025-07-24 18:00:00\', \'pending\', 0.00, \'浙江省杭州市余杭区文一西路969号\', \'需要礼品包装\');-- ------------------------------ 5. `order_items` 表的示例数据 (连接订单和商品)-- ----------------------------INSERT INTO `order_items` (`id`, `order_id`, `product_id`, `quantity`, `price_per_unit`) VALUES-- 订单 1001 (Alice)(1, 1001, 1, 1, 18999.00), -- 1x MacBook Pro(2, 1001, 5, 1, 98.00), -- 1x 《三体》-- 订单 1002 (Bob)(3, 1002, 4, 2, 6999.00), -- 2x Pixel 9(4, 1002, 8, 1, 1599.00), -- 1x 咖啡机-- 订单 1003 (Alice)(5, 1003, 7, 1, 299.00), -- 1x 智能台灯-- 订单 1004 (Charlie)(6, 1004, 2, 1, 12500.00), -- 1x ThinkPad X1(7, 1004, 6, 1, 128.00), -- 1x 《沙丘》-- 订单 1005 (Diana)(8, 1005, 3, 1, 9999.00); -- 1x iPhone 16 Pro-- ------------------------------ 6. `product_reviews` 表的示例数据-- ----------------------------INSERT INTO `product_reviews` (`id`, `product_id`, `user_id`, `rating`, `comment`, `created_at`) VALUES(1, 1, 1, 5, \'性能非常强大，屏幕效果惊艳，物超所值！\', \'2025-06-20 10:00:00\'),(2, 2, 3, 4, \'键盘手感一流，非常适合长时间打字。电池续航希望能再好一点。\', \'2025-07-23 15:00:00\'),(3, 5, 1, 5, \'读完之后非常震撼，不愧是神作！\', \'2025-06-25 19:30:00\'),(4, 8, 2, 3, \'咖啡味道还不错，但机器噪音有点大。\', \'2025-07-22 08:00:00\');-- ------------------------------ 7. 更新 `orders` 表的 `total_amount`-- 这是一个非常真实的操作：订单总价由其所有项目的总和决定-- ----------------------------UPDATE `orders` oSET o.total_amount = ( SELECT SUM(oi.quantity * oi.price_per_unit) FROM `order_items` oi WHERE oi.order_id = o.id)WHERE o.id IN (1001, 1002, 1003, 1004, 1005);-- 重新开启外键检查，确保数据完整性SET FOREIGN_KEY_CHECKS = 1;

该项目支持在线编辑、修改和导入导出...博主浅浅试了下，感觉功能相当强大，给作者狠狠点赞了👍

大家感兴趣可以去看看，下面是项目地址：

5. 项目地址：

官网地址：https://www.drawdb.app/

Github地址：https://github.com/drawdb-io/drawdb

网络标签：

相关问题