a generic visualization tool designed to show the structure of the document space and the relations between each doc

Usage no npm install needed!

<script type="module">
  import noteGraph from '';


Welcome to note-graph 👋

License: MIT CDN version

Note Graph is a generic visualization JS lib designed to show the structure of the document space and the relations between each doc.

A handy tool for anyone who is interested in building a graph view for document spaces.

It depends on D3.js and force-graph, written in Typescript and can be used in the browser.


🚀 Demo and docs

See the demo on vercel.

✨ Features

  • Display bidirectional links with an elegant yet informative way.
  • Rich interaction
    • Hover on the node to see it's link flow.
    • Right click on the background to make the graph auto-fits the canvas size.
    • Smart zooming, prevent you from getting lost when panning and scrolling.
  • 🎨 Highly customizable, pick your favorite colors for all (not yet but closing to it) the visual elements.

📦 Usage

(1) Use in html

Make sure runtime dependencies d3 and force-graph are loaded before constructing NOTE_GRAPH.NoteGraphView.

Open this fiddle to see how it look like.

    <title>Note Graph simple example</title>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

    <div id="note-graph-container"></div>
      async function initGraphView() {
        const notes = await (
          await fetch(
        const graphModel = new NOTE_GRAPH.NoteGraphModel(notes)

        const graphView = new NOTE_GRAPH.NoteGraphView({
          container: document.getElementById('note-graph-container'),
          enableNodeDrag: true,

      window.onload = function () {

(2) Use in your project that has a bundler

Install the dependency:

yarn add note-graph
import { NoteGraphModel, NoteGraphView } from 'note-graph'

// find some demo example code to fiddle


Install dependendies:

yarn && yarn bootstrap

Start development:

yarn dev


👤 hikerpig


Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator