{"id":51026878,"url":"https://github.com/gitstq/mindsketch","last_synced_at":"2026-06-21T20:02:28.655Z","repository":{"id":356706675,"uuid":"1233741676","full_name":"gitstq/mindsketch","owner":"gitstq","description":"AI-powered intelligent whiteboard tool for mind mapping, flowcharts, and creative drawing - 智能白板工具","archived":false,"fork":false,"pushed_at":"2026-05-09T10:00:26.000Z","size":111,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-09T11:38:49.531Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gitstq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-09T09:50:57.000Z","updated_at":"2026-05-09T10:00:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/gitstq/mindsketch","commit_stats":null,"previous_names":["gitstq/mindsketch"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/gitstq/mindsketch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fmindsketch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fmindsketch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fmindsketch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fmindsketch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitstq","download_url":"https://codeload.github.com/gitstq/mindsketch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fmindsketch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34623906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-21T02:00:05.568Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-21T20:02:27.906Z","updated_at":"2026-06-21T20:02:28.650Z","avatar_url":"https://github.com/gitstq.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🎨 MindSketch\n\n**AI驱动的智能白板工具 - 让创意可视化变得简单**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![React](https://img.shields.io/badge/React-18.2.0-blue.svg)](https://reactjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.2.0-blue.svg)](https://www.typescriptlang.org/)\n[![Vite](https://img.shields.io/badge/Vite-5.0.8-purple.svg)](https://vitejs.dev/)\n\n[English](./README_EN.md) | [繁體中文](./README_TW.md)\n\n\u003c/div\u003e\n\n---\n\n## 🎉 项目介绍\n\n**MindSketch** 是一款现代化的AI驱动智能白板工具，专为思维导图、流程图和创意绘图而设计。受 [drawnix](https://github.com/plait-board/drawnix) 启发，我们在此基础上进行了深度自研和创新，加入了AI智能生成、更丰富的导出格式、更流畅的交互体验等差异化功能。\n\n### 💡 核心价值\n\n- 🤖 **AI智能助手** - 通过自然语言描述，自动生成思维导图和流程图\n- 🎯 **开箱即用** - 无需复杂配置，打开即用，零学习成本\n- 🔒 **隐私优先** - 本地运行，数据完全由用户掌控\n- 🌐 **跨平台** - 基于Web技术，支持所有现代浏览器\n\n### ✨ 自研差异化亮点\n\n相比同类产品，MindSketch 的独特优势：\n\n1. **AI智能生成** - 集成AI能力，一句话生成完整图表\n2. **智能布局算法** - 自动优化节点布局，让图表更美观\n3. **多格式导出** - 支持 PNG、SVG、PDF、JSON 等多种格式\n4. **现代化UI** - 采用 TailwindCSS + Framer Motion，界面流畅美观\n5. **键盘快捷键** - 完整的快捷键支持，提升创作效率\n\n---\n\n## ✨ 核心特性\n\n### 🛠️ 绘图工具\n\n- **🖱️ 选择工具** - 框选、多选、移动对象\n- **✋ 手型工具** - 拖拽画布，流畅导航\n- **⬜ 矩形工具** - 绘制矩形和圆角矩形\n- **⭕ 圆形工具** - 绘制圆形和椭圆\n- **📏 线条工具** - 绘制直线和连接线\n- **📝 文本工具** - 添加文字标注\n- **✏️ 画笔工具** - 自由手绘\n- **🧹 橡皮工具** - 擦除内容\n\n### 🧠 智能图表\n\n- **🌳 思维导图** - 快速创建层级思维导图\n- **🔄 流程图** - 绘制标准流程图，支持多种节点类型\n- **🤖 AI生成** - 自然语言描述，AI自动生成图表结构\n\n### 🎨 样式编辑\n\n- **🎨 颜色选择** - 丰富的预设颜色，支持填充和边框\n- **📐 尺寸调整** - 精确控制对象大小和位置\n- **🔤 字体设置** - 调整字体大小和样式\n- **📤 层级管理** - 置顶、置底、调整对象层级\n\n### 💾 导入导出\n\n- **📥 导入** - 支持 JSON 格式项目文件\n- **📤 导出 PNG** - 高质量位图，适合分享\n- **📤 导出 SVG** - 矢量格式，无限缩放\n- **📤 导出 PDF** - 文档格式，适合打印\n- **📤 导出 JSON** - 源文件格式，可重新编辑\n\n### ⚡ 交互体验\n\n- **🔍 缩放和平移** - 流畅的缩放和平移操作\n- **↩️ 撤销重做** - 支持历史记录，无限撤销\n- **⌨️ 快捷键** - 完整的键盘快捷键支持\n- **📱 响应式设计** - 适配不同屏幕尺寸\n\n---\n\n## 🚀 快速开始\n\n### 环境要求\n\n- Node.js \u003e= 18.0.0\n- npm \u003e= 9.0.0 或 yarn \u003e= 1.22.0\n\n### 安装步骤\n\n```bash\n# 克隆仓库\ngit clone https://github.com/gitstq/mindsketch.git\n\n# 进入项目目录\ncd mindsketch\n\n# 安装依赖\nnpm install\n\n# 启动开发服务器\nnpm run dev\n```\n\n### 构建生产版本\n\n```bash\n# 构建生产版本\nnpm run build\n\n# 预览生产构建\nnpm run preview\n```\n\n---\n\n## 📖 详细使用指南\n\n### 🎯 基础操作\n\n#### 创建图形\n\n1. 从左侧工具栏选择绘图工具（矩形、圆形、线条等）\n2. 在画布上拖拽创建图形\n3. 选中的图形会显示控制点，可调整大小和位置\n\n#### 编辑文本\n\n1. 选择文本工具（快捷键 `T`）\n2. 在画布上点击创建文本框\n3. 在右侧属性面板编辑文本内容和样式\n\n#### 使用AI生成\n\n1. 点击右上角的 **\"AI 助手\"** 按钮\n2. 选择生成模式（思维导图或流程图）\n3. 输入描述，例如：\n   - *\"帮我创建一个关于人工智能应用的思维导图\"*\n   - *\"绘制一个用户登录流程图\"*\n4. 点击生成按钮，AI会自动创建图表\n\n### 🧠 思维导图\n\n#### 创建思维导图\n\n1. 选择思维导图工具（快捷键 `M`）\n2. 点击画布创建根节点\n3. 选中节点后按 `Tab` 键创建子节点\n4. 按 `Enter` 键创建同级节点\n\n#### 使用AI生成思维导图\n\n```\n项目规划\n  需求分析\n    用户调研\n    竞品分析\n  设计阶段\n    原型设计\n    UI设计\n  开发阶段\n    前端开发\n    后端开发\n  测试上线\n```\n\n### 🔄 流程图\n\n#### 创建流程图\n\n1. 选择流程图工具（快捷键 `F`）\n2. 从左侧工具栏选择节点类型：\n   - 🟢 **开始/结束** - 椭圆形，表示流程起点和终点\n   - 🔵 **处理** - 矩形，表示处理步骤\n   - 🟡 **判断** - 菱形，表示条件判断\n   - 🟣 **输入/输出** - 平行四边形，表示数据输入输出\n\n#### 连接节点\n\n1. 选择线条工具（快捷键 `L`）\n2. 从一个节点拖拽到另一个节点创建连接线\n\n### ⌨️ 快捷键\n\n| 快捷键 | 功能 |\n|--------|------|\n| `V` | 选择工具 |\n| `H` | 手型工具 |\n| `R` | 矩形工具 |\n| `C` | 圆形工具 |\n| `L` | 线条工具 |\n| `T` | 文本工具 |\n| `P` | 画笔工具 |\n| `E` | 橡皮工具 |\n| `M` | 思维导图工具 |\n| `F` | 流程图工具 |\n| `Ctrl + Z` | 撤销 |\n| `Ctrl + Shift + Z` | 重做 |\n| `Ctrl + D` | 复制选中 |\n| `Delete` | 删除选中 |\n| `Esc` | 取消选择 |\n\n---\n\n## 💡 设计思路与迭代规划\n\n### 🎯 设计理念\n\nMindSketch 的设计遵循以下原则：\n\n1. **简洁至上** - 界面简洁，功能直观，降低用户学习成本\n2. **效率优先** - 丰富的快捷键和智能功能，提升创作效率\n3. **可扩展性** - 插件化架构，便于功能扩展和定制\n4. **现代化** - 采用最新前端技术栈，保证性能和体验\n\n### 🛠️ 技术选型\n\n| 技术 | 选择理由 |\n|------|----------|\n| **React 18** | 成熟稳定的UI框架，生态丰富 |\n| **TypeScript** | 类型安全，提升代码质量和开发体验 |\n| **Vite** | 快速的构建工具，支持热更新 |\n| **TailwindCSS** | 原子化CSS，快速构建美观界面 |\n| **Zustand** | 轻量级状态管理，简单易用 |\n| **Framer Motion** | 流畅的动画效果，提升用户体验 |\n\n### 📅 后续迭代计划\n\n#### v1.1.0 (计划中)\n- [ ] 实时协作功能 - 多人在线编辑\n- [ ] 更多图形类型 - 箭头、星形、自定义形状\n- [ ] 模板库 - 预设模板快速开始\n\n#### v1.2.0 (计划中)\n- [ ] 语音输入 - 语音转图表\n- [ ] 图片导入 - 支持导入图片作为背景或素材\n- [ ] 插件系统 - 支持第三方插件扩展\n\n#### v2.0.0 (规划中)\n- [ ] 云端同步 - 项目云端存储和同步\n- [ ] 移动端App - iOS和Android原生应用\n- [ ] 团队版 - 团队管理和权限控制\n\n---\n\n## 📦 打包与部署\n\n### 构建命令\n\n```bash\n# 安装依赖\nnpm install\n\n# 开发模式\nnpm run dev\n\n# 生产构建\nnpm run build\n\n# 代码检查\nnpm run lint\n\n# 运行测试\nnpm run test\n```\n\n### 部署方式\n\n#### 静态托管\n\n构建完成后，`dist` 目录包含所有静态文件，可以部署到任何静态托管服务：\n\n- **Vercel** - `vercel --prod`\n- **Netlify** - 拖拽 `dist` 文件夹到 Netlify\n- **GitHub Pages** - 使用 `gh-pages` 分支\n- **Nginx** - 配置 `root` 指向 `dist` 目录\n\n#### Docker 部署\n\n```dockerfile\nFROM node:18-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci\nCOPY . .\nRUN npm run build\n\nFROM nginx:alpine\nCOPY --from=builder /app/dist /usr/share/nginx/html\nEXPOSE 80\n```\n\n---\n\n## 🤝 贡献指南\n\n我们欢迎所有形式的贡献！\n\n### 提交 Issue\n\n- 使用清晰的标题描述问题\n- 提供详细的复现步骤\n- 附上截图或录屏（如适用）\n- 说明期望的行为和实际行为\n\n### 提交 Pull Request\n\n1. Fork 本仓库\n2. 创建功能分支：`git checkout -b feature/amazing-feature`\n3. 提交更改：`git commit -m 'feat: add amazing feature'`\n4. 推送分支：`git push origin feature/amazing-feature`\n5. 创建 Pull Request\n\n### 代码规范\n\n- 使用 TypeScript 编写代码\n- 遵循 ESLint 配置\n- 提交信息遵循 [Conventional Commits](https://conventionalcommits.org/) 规范\n- 保持代码简洁，添加必要的注释\n\n---\n\n## 📄 开源协议\n\n本项目采用 [MIT 协议](LICENSE) 开源。\n\n```\nMIT License\n\nCopyright (c) 2026 gitstq\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n```\n\n---\n\n## 🙏 致谢\n\n- 灵感来源于 [drawnix](https://github.com/plait-board/drawnix) 项目\n- 感谢 [React](https://reactjs.org/)、[Vite](https://vitejs.dev/)、[TailwindCSS](https://tailwindcss.com/) 等优秀开源项目\n- 感谢所有贡献者和用户的支持\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ by gitstq**\n\n[⭐ Star this repo](https://github.com/gitstq/mindsketch) | [🐛 Report Bug](https://github.com/gitstq/mindsketch/issues) | [💡 Request Feature](https://github.com/gitstq/mindsketch/issues)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitstq%2Fmindsketch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitstq%2Fmindsketch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitstq%2Fmindsketch/lists"}