Notion Graph

This tool creates interactive graphs out of Notion workspaces and pages. You can get to the app here.

Notion is a note-taking and personal organization tool. Keeping an overview over your pages is important if you have many notes or follow the Zettelkasten system. Notion itself doesn't offer any functionalities to generate an overview of your page structure as a graph.

That is the reason why I created this app. It creates a force-directed graph out of your Notion data. All you need is a HTML export of your whole workspace or pages.

• Create a graph out of your Notion exports
• Change how the graph is generated
• Collapse pages with a lot of children (lists, boards, databases, ...)
• Export your graph as an image
• Clicking on a node opens the page in Notion
• The last generated graph is stored in your browser

d3 and d3-force are used for graph creation and the simulation of physical forces between nodes. The user interface is implemented with React. The graph generation and application logic communicates with the user interface through CustomEvents.

Notion graph is a client-side application. The export-zips are parsed in the browser with JSZip. No data is uploaded to any server.

The source code is available on GitHub.