https://github.com/ackkerman/notion-graph
https://github.com/ackkerman/notion-graph
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ackkerman/notion-graph
- Owner: ackkerman
- Created: 2025-06-02T09:00:57.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-03T04:09:24.000Z (12 months ago)
- Last Synced: 2025-06-03T04:23:49.537Z (12 months ago)
- Language: TypeScript
- Homepage: https://notion-graph-gray.vercel.app
- Size: 1.32 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
๐ธ๏ธ Notion Graph โ turn any Notion database into an interactive knowledge map
Live Demo ใป
Quick Start ใป
Directory Structure ใป
Scripts
*A lightweight OSS app that turns any Notion database into an interactive graph of pages, keywords, and multi-select tags.*
| Release | CI | License |
| --- | --- | -- |
|  |  |  |
## โจ Features
| Features | Description |
| --- | --- |
| ๐ **OAuth 2.0 (PKCE)** | One-click login with your own Notion integration โ no server secrets. |
| ๐ **Dynamic property mapping** | Select any *multi-select* / *select* property at runtime and see it as graph nodes. |
| ๐ง **Lindera WASM keyword extraction** | Japanese tokenisation powered by Rust/Lindera running in the browser. |
| ๐ธ **Cytoscape layouts** | COSE, Dagre, Elk, Cola, โฆ switchable with a single click. |
| ๐จ **Notion-like UI** | Tailwind CSS v4 + CSS-first theme tokens for colours, radius, shadows. |
| ๐ฆ **100 % client-side** | No backendโruns on Vercel/Pages/S3 as static files. |
| ๐ **Graph statistics** | Displays node counts and top central nodes based on degree. |
| ๐๏ธ **Node pruning** | Remove nodes from a list sorted by degree. |
| ๐ **Node detail panel** | Click a node in the graph to inspect its Notion properties. |
## ๐ธ Demo
[Live demo (on Vercel)](https://notion-graph-gray.vercel.app/)
## ๐ Getting Started
```bash
git clone https://github.com/ackkerman/notion-graph
cd notion-graph
pnpm i
cp .env.example .env.local # add NOTION_CLIENT_ID / NOTION_CLIENT_SECRET
pnpm dev
```
1. **Create a Notion integration** โ copy the client ID (and secret for *internal* integrations).
2. Add `http://localhost:3000/oauth/callback` to the integrationโs Redirect URI list.
3. Open `http://localhost:3000`, click **Login with Notion**, pick any workspace, choose a database, and enjoy the graph!
## ๐ Tech Stack
| Layer | Library / Tool |
| -------------- | -------------------------------------------------- |
| UI & Routing | **Next.js 14** (app router) |
| Styling | **Tailwind CSS v4** + CSS-first `@theme` |
| Graph | **react-cytoscapejs** + multiple layout extensions |
| NLP | **lindera-wasm** (IPADIC) |
| Auth | **Notion OAuth 2.0 PKCE** |
| Build / Deploy | Vercel / Cloudflare Pages |
## ๐บ๏ธ Roadmap
* [ ] Graph Clustering
* [x] Adding view of connections and cut-out function
* [x] Jump to original page from graph
* [x] Coloring by status or other property as hue
> PRs & discussions are welcome! See [CONTRIBUTING.md](./CONTRIBUTING.md).
## ๐ License
Apache License V2.0
Copyright 2025 Ackkerman
## ๐ Acknowledgements
* **Notion** for the open API
* **Lindera Project** for blazing-fast WASM tokeniser
* **Cytoscape.js** & extension authors
* All OSS maintainers keeping the ecosystem alive โค๏ธ