找过族谱软件的老哥应该都有体会，市面上这类工具要么界面停留在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
|
|
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
