Notion Modeller

概念建模师

通过MCP与Notion集成，并在画布上显示Notes并创建它们之间的关系。

概述

NotionModeller是一个Next.js应用程序，它在交互式画布上可视化Notion页面及其关系。它采用React Flow构建，为复杂的信息架构建模提供了强大的接口。

特性

• 交互式画布：平移、缩放和排列代表Notion页面的节点
• 多个节点样式：卡片、紧凑型和图标变体，满足不同的可视化需求
• 自定义边缘：具有多种造型选项的有向和无向关系
• 搜索和突出显示：使用Cmd/Ctrl+F立即查找节点并浏览结果
• 高级过滤：使用隐藏/暗淡可见性模式按类型和颜色过滤节点
• 键盘快捷键：具有撤消/重做、多选、搜索导航等功能的高效工作流程
• 概念整合：与您的Notion工作区无缝同步
• 实时更新：更改会立即反映在画布上

技术栈

• 框架：Next.js 16.1.1
• 反应: 19.2.3
• 画布：反应流11.11.4
• 状态管理状态 5.0.9
• 样式：顺风CSS 4.1.18
• 数据库：PostgreSQL（通过Prisma）
• 认证：使用Notion OAuth的NextAuth 5.0

快速开始

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env with your credentials

# Run database migrations
npm run prisma:migrate

# Start development server
npm run dev

导航到 http://localhost:3000 并使用Notion登录。

文档

• Canvas实现摘要：画布系统的完整概述
• 画布验证指南：测试和验证程序
• 画布架构：技术架构文件
• 画布快速参考：开发人员快速参考
• 边缘类型系统：边缘类型管理文档
• 身份验证使用指南：身份验证设置和使用

项目结构

src/
├── app/                    # Next.js app router pages
│   ├── canvas/            # Canvas pages and routes
│   ├── dashboard/         # Dashboard page
│   └── settings/          # Settings page
├── components/            # React components
│   ├── canvas/           # Canvas components (nodes, edges, controls)
│   ├── sidebar/          # Sidebar components
│   ├── settings/         # Settings components
│   └── ui/               # Shared UI components
├── hooks/                # Custom React hooks
├── lib/                  # Utility libraries
│   ├── auth/            # Authentication utilities
│   ├── canvas/          # Canvas state and operations
│   ├── notion/          # Notion API integration
│   └── edge-types/      # Edge type management
└── types/               # TypeScript type definitions

帆布系统

canvas系统基于React Flow构建，并提供：

• 三种节点变体:

- 卡片：完整显示属性 - 紧凑：最小显示 - 图标：仅圆形图标

• 自定义边缘:

- 有向（箭头）和无向（线条） - 多种线条样式（实线、虚线、虚线） - 颜色编码和标签 - 动画支持

• 状态管理:

- Zustand商店有50+个动作 - 使用50个条目的历史堆栈撤消/重做 - 选拔管理 - 视口控制

• 搜索和筛选:

- 搜索：具有视觉突出显示的实时节点搜索 - 按Cmd/Ctrl+F聚焦搜索栏 - 匹配的节点以金色边框突出显示 - 使用Cmd/Ctrl+G（下一个）和Cmd/Ctrl/Shift+G（上一个）导航结果 - 自动视口将选定结果居中 - 类型过滤器：按类型筛选节点（页面、数据库等） - 彩色滤光片：按指定的颜色过滤节点 - 可见性模式: - 隐藏：完全隐藏不匹配的节点 - Dim：降低上下文中不匹配节点的不透明度 - 使用Escape立即清除所有过滤器

• 键盘快捷键:

- 选择和编辑: - 删除：删除所选项目 - Cmd/Ctrl+Z：撤消 - Cmd/Ctrl+Shift+Z：重做 - Cmd/Ctrl+A：全选 - 退出：取消选择/清除过滤器 - 搜索和导航: - Cmd/Ctrl+F：焦点搜索栏 - Cmd/Ctrl+G：下一个搜索结果 - Cmd/Ctrl+Shift+G：上一个搜索结果

发展

运行测试

# Run all tests
npm test

# Run with coverage
npm test -- --coverage

生产大楼

# Build the application
npm run build

# Start production server
npm start

数据库

# Generate Prisma client
npm run prisma:generate

# Run migrations
npm run prisma:migrate

# Open Prisma Studio
npm run prisma:studio

贡献

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 运行测试
5. 提交拉取请求

许可证

国际学生委员会

支持

对于问题和疑问：

• GitHub问题：https://github.com/DavidROliverBA/NotionModeller/issues
• 文件：见 /docs 文件夹