开源的网页族谱工具，用来生成家族族谱

七夏尊888 · 2026-7-10 09:37:19

找过族谱软件的老哥应该都有体会，市面上这类工具要么界面停留在Windows XP时代，观感陈旧；要么就是收费的商业平台，数据攥在别人手里，心里总不踏实。

GitHub上这款pure-genealogy（作者yunfengsa），是一套全栈无服务（Serverless）家族族谱管理系统。它基于Next.js 15和Supabase搭建，更关键的是专门针对中文语境做了深度适配——不管是字辈统计这类贴合宗族文化的功能，还是水墨风界面设计，都很对国人的使用习惯。

开源的网页族谱工具，用来生成家族族谱

演示地址：pure-genealogy.onehacker.top

测试账号：test@test.com / 密码：123456
1. 核心功能 (v2.0)

不是简单的树状图：

2D 族谱图：

      底层用了全新的渲染引擎配合 Dagre 算法进行自动层级布局。

      视觉上搞了个 “松柏绿瀑布式” 代际渐变色，左侧会自动生成水墨风“世代标尺”，支持配偶直显。

      交互上有 “金线溯源”（高亮祖先路径）和 “金扇繁衍”（高亮子孙路径），还能一键导出带背景水印的高清大图。

3D 关系网：

      基于 force-directed (力导向) 算法的星空漫游风格。

      新增了自动巡游 (Auto Tour) 功能，能自动计算任意两名成员间的最短路径，控制相机自动飞行浏览。

“Living Book” (生命之书)：

      详情页搞了拟物化设计，PC 端是书卷质感，支持 3D 翻书。

      生平记录集成了 Slate.js 编辑器，支持富文本排版。阅读模式下甚至做了 “逐字书写” 或 “毛笔扫过” 的动效。

统计与管理：

      仪表盘展示世代增长趋势、性别比例、字辈频率统计。

      支持成员 CRUD，以及 Excel/CSV 数据的批量导入导出。

      时间轴：横向展示家族成员的生卒年分布。

2. 技术栈

代码含金量很高，基本是目前 React 生态的最前沿：

前端框架：Next.js 15 (App Router, Server Actions) + React 19。

开发语言：TypeScript (占比 99.1%)。

后端服务：Supabase 全家桶 (PostgreSQL 数据库 + Auth 身份认证 + Realtime 实时订阅)。

UI 组件：shadcn/ui (基于 Radix UI), Tailwind CSS, Lucide React。

可视化库：

      2D: @xyflow/react (React Flow)

      3D: react-force-graph-3d

      统计: recharts

      导出: html-to-image

3. 部署与运行

项目是 MIT 协议开源的。因为依赖 Supabase，部署流程稍微有点配置工作：

克隆安装：Clone 仓库并 npm install。

环境变量：复制 .env.example 为 .env.local，填入 Supabase 的 Project URL 和 Anon Key。

数据库初始化：必须去 Supabase 的 SQL Editor 里执行项目提供的 SQL 脚本，创建 family_members 表及索引。

启动：npm run dev，访问 localhost:3000。

4. 避坑指南 (依赖与版本)

虽然界面很美，但有几个点得注意：

Next.js 15 & React 19：这两个版本目前非常新，如果你要二开，可能会遇到一些生态库还没跟进适配的兼容性问题（比如 hydration 报错）。

Supabase 强依赖：项目深度绑定 Supabase（特别是 Auth 和 Realtime），如果你想换成自建的 MySQL 或者纯本地 SQLite，改动工作量会非常大。

免费额度：使用 Supabase 免费层（Free Tier）时要注意数据库暂停策略，长时间不活跃可能会被暂停，需要手动唤醒。

总结

我觉得 pure-genealogy 是目前开源界里颜值和技术栈都很能打的族谱系统。它抛弃了传统族谱软件的陈旧感，把 React 生态的交互能力用到了极致。如果你家里正好有修缮族谱的需求，又不想把数据交给商业平台，这个项目值得折腾一下。

项目地址：
https://github.com/yunfengsa/pure-genealogy

开源的网页族谱工具，用来生成家族族谱

回复

相关帖子

晨曦初露

QQ用户

有头有脸

快捷访问

附加功能

关于我们

关注我们