Building an Obsidian-Style Knowledge Graph in 3D

In this tutorial, I’ll walk you through how I built this blog - a personal knowledge base that combines Obsidian-style wiki-links with an interactive 3D knowledge graph. If you’re an Obsidian user who wants to publish your notes as a blog while keeping your linking workflow, this guide is for you.

The Vision#

As an Obsidian user, I love how my notes are interconnected through wiki-links. I wanted a blog that:

Uses the same [[wiki-link]] syntax I use in Obsidian
Displays an interactive 3D graph of my posts (like Obsidian’s graph view)
Has a clean, minimal design with light/dark mode
Supports backlinks (showing which posts link to the current one)
Features a “sun” node representing the author at the center
Doesn’t require React or complex frameworks

The Stack#

After researching, I chose:

Astro 5 - Fast, static site generator with excellent markdown support
Fuwari - A beautiful, minimal Astro theme with built-in dark mode
3d-force-graph - WebGL-based 3D force-directed graph library
Three.js - 3D graphics library (dependency of 3d-force-graph)
remark-wiki-link - Plugin to parse [[wiki-links]] in markdown

Prerequisites#

Make sure you have:

Node.js 22+ (LTS recommended)
pnpm as your package manager

1
# Install pnpm if you haven't
2
npm install -g pnpm

Step 1: Setting Up Fuwari#

Fuwari is an elegant Astro theme that provides:

Light/dark mode toggle with system preference detection
Markdown/MDX support with syntax highlighting
Responsive design
Search functionality (Pagefind)
Clean, minimal aesthetic

To get started:

1
# Clone the Fuwari template
2
npx degit saicaca/fuwari my-blog
3
cd my-blog
4
pnpm install

Step 2: Installing Dependencies#

For the 3D graph, you’ll need to install the required packages:

1
pnpm add 3d-force-graph three
2
pnpm add -D @types/three

The @types/three package provides TypeScript definitions for Three.js, which is essential for proper type checking.

Step 3: Adding Wiki-Link Support#

Obsidian uses [[double brackets]] for internal links. We need to tell Astro how to handle these.

Install the remark plugin:

1
pnpm add remark-wiki-link

Update your astro.config.mjs:

1
import remarkWikiLink from "remark-wiki-link";
2

3
export default defineConfig({
4
  // ... other config
5
  markdown: {
6
    remarkPlugins: [
7
      // ... other plugins
8
      [
9
        remarkWikiLink,
10
        {
11
          hrefTemplate: permalink => `/posts/${permalink}/`,
12
          aliasDivider: "|",
13
        },
14
      ],
15
    ],
16
  },
17
});

Now you can write links in your posts like:

1
Check out [[my-other-post]] for more details.
2
Or use [[my-other-post|custom text]] for alias links.

Step 4: Building the Graph Data Endpoint#

We need a JSON endpoint that provides the graph data (nodes and links) based on our posts. The graph features a “sun” node representing the author at the center, with posts orbiting around it like stars.

Create src/pages/graph.json.ts:

1
import { getCollection } from "astro:content";
2
import { profileConfig } from "@/config";
3

4
interface GraphNode {
5
  id: string;
6
  name: string;
7
  val: number;
8
  isSun?: boolean;
9
}
10

11
interface GraphLink {
12
  source: string;
13
  target: string;
14
}
15

16
interface GraphData {
17
  nodes: GraphNode[];
18
  links: GraphLink[];
19
}
20

21
export async function GET(): Promise<Response> {
22
  const posts = await getCollection("posts", ({ data }) => {
23
    return import.meta.env.PROD ? data.draft !== true : true;
24
  });
25

26
  const nodes: GraphNode[] = [];
27
  const links: GraphLink[] = [];
28

29
  // Add the "sun" node - representing the author
30
  nodes.push({
31
    id: "__sun__",
32
    name: profileConfig.name,
33
    val: 3,
34
    isSun: true,
35
  });
36

37
  const slugSet = new Set(posts.map(p => p.slug));
38

39
  posts.forEach(post => {
40
    nodes.push({
41
      id: post.slug,
42
      name: post.data.title,
43
      val: 1,
44
    });
45

46
    // Parse wiki-links from post body
47
    const wikiLinkRegex = /\[\[([^\]|]+)(?:\|[^\]]+)?\]\]/g;
48
    const content = post.body || "";
49
    let match: RegExpExecArray | null = wikiLinkRegex.exec(content);
50

51
    while (match !== null) {
52
      const linkedSlug = match[1].trim();
53
      if (slugSet.has(linkedSlug)) {
54
        links.push({
55
          source: post.slug,
56
          target: linkedSlug,
57
        });
58
      }
59
      match = wikiLinkRegex.exec(content);
60
    }
61
  });
62

63
  const graphData: GraphData = { nodes, links };
64

65
  return new Response(JSON.stringify(graphData), {
66
    headers: {
67
      "Content-Type": "application/json",
68
    },
69
  });
70
}

This endpoint:

Fetches all published posts
Creates a “sun” node for the author (from profile config)
Creates a node for each post
Parses wiki-links and creates edges between linked posts
Returns JSON that the 3D graph can consume

Step 5: Creating the 3D Graph Component#

The graph component is more complex than a basic example - it implements:

A starfield theme with twinkling stars
A glowing sun node for the author
Smooth camera animation on load
Proper TypeScript types for everything
Memory cleanup for SPA navigation (Swup)

Create src/components/Graph.astro:

1
---
2
import { profileConfig } from "@/config";
3
import { url } from "@/utils/url-utils";
4
import ImageWrapper from "./misc/ImageWrapper.astro";
5

6
interface Props {
7
  fullscreen?: boolean;
8
  animationDuration?: number;
9
}
10

11
const { fullscreen = false, animationDuration = 3000 } = Astro.props;
12
const profile = profileConfig;
13
---
14

15
<div
16
  id="graph-container"
17
  data-animation-duration={animationDuration}
18
  class:list={[
19
    "rounded-xl overflow-hidden",
20
    fullscreen ? "fixed inset-0 z-40" : "w-full h-full",
21
  ]}
22
>
23
</div>
24

25
<!-- Tooltip template for the sun/author node -->
26
<div id="sun-tooltip-template" class="hidden">
27
  <div class="card-base p-3 max-w-[200px]">
28
    <a
29
      aria-label="Go to About Page"
30
      href={url("/about/")}
31
      class="block relative mx-auto mb-3 max-w-[8rem]"
32
    >
33
      <ImageWrapper
34
        src={profile.avatar || ""}
35
        alt="Profile Image"
36
        class="mx-auto w-full rounded-xl"
37
      />
38
    </a>
39
    <div class="px-1">
40
      <div
41
        class="font-bold text-sm text-center mb-1 dark:text-neutral-50"
42
      >
43
        {profile.name}
44
      </div>
45
      <div
46
        class="h-0.5 w-4 bg-[var(--primary)] mx-auto rounded-full mb-2"
47
      >
48
      </div>
49
      <div class="text-center text-xs text-neutral-400 mb-2">
50
        {profile.quotes?.[0] || ""}
51
      </div>
52
    </div>
53
  </div>
54
</div>
55

56
<script>
57
  // Define TypeScript interfaces for type safety
58
  interface GraphNode {
59
    id: string;
60
    name: string;
61
    val?: number;
62
    isSun?: boolean;
63
    fx?: number;
64
    fy?: number;
65
    fz?: number;
66
  }
67

68
  interface GraphData {
69
    nodes: GraphNode[];
70
    links: { source: string; target: string }[];
71
  }
72

73
  interface GraphInstance {
74
    _destructor: () => void;
75
    cameraPosition: (pos: { x: number; y: number; z: number }) => void;
76
    d3Force: (name: string) => { strength: (s: number) => void };
77
    onNodeHover: (fn: (node: GraphNode | null) => void) => void;
78
    onNodeClick: (fn: (node: GraphNode) => void) => void;
79
    graphData: (data: GraphData) => void;
80
    nodeLabel: (label: string) => void;
81
    backgroundColor: (color: string) => void;
82
    nodeThreeObject: (fn: (node: GraphNode) => object) => void;
83
    linkColor: (fn: () => string) => void;
84
    linkWidth: (w: number) => void;
85
    linkDirectionalParticles: (n: number) => void;
86
  }
87

88
  interface WindowWithGraph extends Window {
89
    __graphInstance?: GraphInstance;
90
    __graphMouseHandler?: (e: MouseEvent) => void;
91
  }
92

93
  async function initGraph() {
94
    // Cleanup previous instance if exists (for SPA navigation)
95
    const win = window as WindowWithGraph;
96
    if (win.__graphInstance) {
97
      win.__graphInstance._destructor();
98
      delete win.__graphInstance;
99
    }
100
    if (win.__graphMouseHandler) {
101
      window.removeEventListener("mousemove", win.__graphMouseHandler);
102
      delete win.__graphMouseHandler;
103
    }
104
    document.querySelectorAll("#graph-tooltip").forEach(el => el.remove());
105

106
    const container = document.getElementById("graph-container");
107
    if (!container) return;
108

109
    const animationDuration = parseInt(
110
      container.dataset.animationDuration || "3000",
111
      10
112
    );
113

114
    const response = await fetch("/graph.json");
115
    const graphData: GraphData = await response.json();
116

117
    if (!graphData.nodes || graphData.nodes.length === 0) {
118
      container.innerHTML =
119
        '<div class="flex items-center justify-center h-full text-gray-500">No posts yet. Add some markdown files to see the graph.</div>';
120
      return;
121
    }
122

123
    const isDark = document.documentElement.classList.contains("dark");
124
    const bgColor = isDark ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.02)";
125

126
    const elem = document.createElement("div");
127
    elem.style.width = "100%";
128
    elem.style.height = "100%";
129
    container.appendChild(elem);
130

131
    const ForceGraph3D = (await import("3d-force-graph")).default;
132
    const THREE = await import("three");
133

134
    // Star colors for twinkling effect
135
    const starColors = [
136
      "#ffffff",
137
      "#f0f0ff",
138
      "#fff8e7",
139
      "#e8f4ff",
140
      "#fff0f5",
141
    ];
142

143
    // Generate star glow texture
144
    function createStarTexture(color: string, size = 64) {
145
      const canvas = document.createElement("canvas");
146
      canvas.width = size;
147
      canvas.height = size;
148
      const ctx = canvas.getContext("2d");
149
      if (!ctx) return null;
150

151
      const gradient = ctx.createRadialGradient(
152
        size / 2,
153
        size / 2,
154
        0,
155
        size / 2,
156
        size / 2,
157
        size / 2
158
      );
159
      gradient.addColorStop(0, color);
160
      gradient.addColorStop(0.2, color);
161
      gradient.addColorStop(
162
        0.5,
163
        color.replace(")", ", 0.5)").replace("rgb", "rgba")
164
      );
165
      gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
166

167
      ctx.fillStyle = gradient;
168
      ctx.fillRect(0, 0, size, size);
169
      return new THREE.CanvasTexture(canvas);
170
    }
171

172
    // Generate sun texture
173
    function createSunTexture() {
174
      const size = 128;
175
      const canvas = document.createElement("canvas");
176
      canvas.width = size;
177
      canvas.height = size;
178
      const ctx = canvas.getContext("2d");
179
      if (!ctx) return null;
180

181
      const gradient = ctx.createRadialGradient(
182
        size / 2,
183
        size / 2,
184
        0,
185
        size / 2,
186
        size / 2,
187
        size / 2
188
      );
189
      gradient.addColorStop(0, "#ffffff");
190
      gradient.addColorStop(0.2, "#fff5e6");
191
      gradient.addColorStop(0.5, "#ffe4c4");
192
      gradient.addColorStop(1, "rgba(255, 165, 0, 0)");
193

194
      ctx.fillStyle = gradient;
195
      ctx.fillRect(0, 0, size, size);
196
      return new THREE.CanvasTexture(canvas);
197
    }
198

199
    const starTextures = starColors.map(color => createStarTexture(color));
200
    const sunTexture = createSunTexture();
201

202
    // Create the 3D graph
203
    // @ts-expect-error - 3d-force-graph doesn't have proper types
204
    const graph = ForceGraph3D()(elem)
205
      .graphData(graphData)
206
      .nodeLabel("")
207
      .backgroundColor(bgColor)
208
      .nodeThreeObject((node: GraphNode) => {
209
        // Sun node (author)
210
        if (node.isSun) {
211
          const material = new THREE.SpriteMaterial({
212
            map: sunTexture,
213
            transparent: true,
214
            opacity: 1,
215
            depthWrite: false,
216
          });
217
          const sprite = new THREE.Sprite(material);
218
          sprite.scale.set(50, 50, 1);
219

220
          // Animate sun glow
221
          const originalOnBeforeRender =
222
            sprite.onBeforeRender.bind(sprite);
223
          sprite.onBeforeRender = function (
224
            renderer,
225
            scene,
226
            camera,
227
            geometry,
228
            material,
229
            group
230
          ) {
231
            const time = Date.now() * 0.001;
232
            material.opacity = 0.85 + 0.15 * Math.sin(time * 0.5);
233
            originalOnBeforeRender?.call(
234
              this,
235
              renderer,
236
              scene,
237
              camera,
238
              geometry,
239
              material,
240
              group
241
            );
242
          };
243
          return sprite;
244
        }
245

246
        // Regular post nodes (stars)
247
        const colorIndex = Math.floor(
248
          Math.random() * starColors.length
249
        );
250
        const baseScale = 8 + Math.random() * 12;
251
        const scale = (node.val || 1) * baseScale;
252
        const twinklePhase = Math.random() * Math.PI * 2;
253
        const twinkleSpeed = 1 + Math.random() * 2;
254

255
        const material = new THREE.SpriteMaterial({
256
          map: starTextures[colorIndex],
257
          transparent: true,
258
          opacity: 0.9,
259
          depthWrite: false,
260
        });
261
        const sprite = new THREE.Sprite(material);
262
        sprite.scale.set(scale, scale, 1);
263

264
        // Animate twinkling
265
        const originalOnBeforeRender =
266
          sprite.onBeforeRender.bind(sprite);
267
        sprite.onBeforeRender = function (
268
          renderer,
269
          scene,
270
          camera,
271
          geometry,
272
          material,
273
          group
274
        ) {
275
          const time = Date.now() * 0.001;
276
          material.opacity =
277
            0.6 +
278
            0.4 * Math.sin(time * twinkleSpeed + twinklePhase);
279
          originalOnBeforeRender?.call(
280
            this,
281
            renderer,
282
            scene,
283
            camera,
284
            geometry,
285
            material,
286
            group
287
          );
288
        };
289
        return sprite;
290
      })
291
      .linkColor(() =>
292
        isDark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.7)"
293
      )
294
      .linkWidth(1)
295
      .linkDirectionalParticles(0)
296
      .onNodeClick((node: GraphNode) => {
297
        if (node.isSun) {
298
          window.location.href = "/about/";
299
        } else {
300
          window.location.href = `/posts/${node.id}/`;
301
        }
302
      });
303

304
    // Tooltip handling
305
    let tooltip: HTMLDivElement | null = null;
306
    let lastMouseX = 0;
307
    let lastMouseY = 0;
308

309
    win.__graphInstance = graph;
310

311
    const mouseHandler = (e: MouseEvent) => {
312
      lastMouseX = e.clientX;
313
      lastMouseY = e.clientY;
314
    };
315
    win.__graphMouseHandler = mouseHandler;
316
    window.addEventListener("mousemove", mouseHandler);
317

318
    graph.onNodeHover((node: GraphNode | null) => {
319
      if (tooltip) {
320
        tooltip.remove();
321
        tooltip = null;
322
      }
323

324
      if (node) {
325
        const template = document.getElementById(
326
          "sun-tooltip-template"
327
        ) as HTMLDivElement;
328

329
        if (node.isSun && template) {
330
          tooltip = template.cloneNode(true) as HTMLDivElement;
331
          tooltip.id = "graph-tooltip";
332
          tooltip.classList.remove("hidden");
333
        } else {
334
          tooltip = document.createElement("div");
335
          tooltip.id = "graph-tooltip";
336
          tooltip.textContent = node.name;
337
        }
338

339
        tooltip.style.cssText = `
340
          position: fixed;
341
          background: ${isDark ? "#333" : "#fff"};
342
          color: ${isDark ? "#fff" : "#000"};
343
          padding: 8px 12px;
344
          border-radius: 6px;
345
          font-size: 14px;
346
          pointer-events: none;
347
          z-index: 1000;
348
          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
349
          top: ${lastMouseY + 10}px;
350
          left: ${lastMouseX + 10}px;
351
        `;
352
        document.body.appendChild(tooltip);
353
      }
354
    });
355

356
    // Configure physics
357
    graph.d3Force("charge").strength(-80);
358
    graph.d3Force("center").strength(0.15);
359

360
    // Fix sun at center
361
    const sunNode = graphData.nodes.find((n: GraphNode) => n.isSun);
362
    if (sunNode) {
363
      sunNode.fx = 0;
364
      sunNode.fy = 0;
365
      sunNode.fz = 0;
366
    }
367

368
    // Dynamic camera distance based on node count
369
    const nodeCount = graphData.nodes.length;
370
    const restingDistance = 40 * Math.sqrt(nodeCount) * 2 + 20;
371
    const initialDistance = restingDistance * 3;
372
    let currentDistance = initialDistance;
373

374
    graph.cameraPosition({
375
      x: initialDistance,
376
      y: initialDistance,
377
      z: initialDistance,
378
    });
379

380
    // Animate camera to resting position
381
    function animateToDistance(targetDistance: number, duration: number) {
382
      const startTime = Date.now();
383
      const startDistance = currentDistance;
384

385
      function tick() {
386
        const elapsed = Date.now() - startTime;
387
        const progress = Math.min(elapsed / duration, 1);
388
        const eased = 1 - Math.pow(1 - progress, 3);
389
        currentDistance =
390
          startDistance + (targetDistance - startDistance) * eased;
391
        graph.cameraPosition({
392
          x: currentDistance,
393
          y: currentDistance,
394
          z: currentDistance,
395
        });
396
        if (progress < 1) requestAnimationFrame(tick);
397
      }
398
      tick();
399
    }
400

401
    animateToDistance(restingDistance, animationDuration);
402

403
    // Handle window resize
404
    let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
405
    window.addEventListener("resize", () => {
406
      if (resizeTimeout) clearTimeout(resizeTimeout);
407
      resizeTimeout = setTimeout(() => {
408
        const newDistance = 40 * Math.sqrt(nodeCount) * 2 + 20;
409
        animateToDistance(newDistance, animationDuration / 2);
410
      }, 250);
411
    });
412
  }
413

414
  initGraph();
415
</script>

This component:

Fetches graph data from our endpoint
Renders twinkling stars as post nodes
Shows a glowing sun node for the author
Supports click-to-navigate to posts
Shows tooltips on hover (custom for sun, simple for posts)
Adapts colors to light/dark mode
Handles SPA navigation cleanup (for Swup)
Animates camera on load

I modified the Fuwari theme to show the graph in the banner area (where normally a hero image would be).

Update src/layouts/MainGridLayout.astro:

1
---
2
import Graph from "@components/Graph.astro";
3
// ... other imports
4
---
5

6
<!-- Replace the ImageWrapper with Graph -->{
7
  siteConfig.banner.enable && (
8
    <div
9
      id="banner-wrapper"
10
      class="absolute z-10 w-full transition duration-700 overflow-hidden"
11
    >
12
      <Graph />
13
    </div>
14
  )
15
}

Set the banner enabled in src/config.ts:

1
banner: {
2
  enable: true,  // Changed from false
3
  // ...
4
},

Now the graph appears on all pages when banner.enable is true!

Step 7: Adding Backlinks#

Backlinks show which posts link TO the current post - super useful for knowledge management.

Create src/components/Backlinks.astro:

1
---
2
import { getCollection } from "astro:content";
3
import { getPostUrlBySlug } from "@utils/url-utils";
4

5
interface Props {
6
  slug: string;
7
}
8

9
const { slug } = Astro.props;
10

11
async function getBacklinks(targetSlug: string) {
12
  const posts = await getCollection("posts", ({ data }) => {
13
    return import.meta.env.PROD ? data.draft !== true : true;
14
  });
15

16
  const wikiLinkRegex = /\[\[([^\]|]+)(?:\|[^\]]+)?\]\]/g;
17

18
  const backlinks = posts.filter(post => {
19
    const content = post.body || "";
20
    const matches = content.match(wikiLinkRegex);
21
    if (!matches) return false;
22

23
    return matches.some(match => {
24
      const linkedSlug = match
25
        .replace(/\[\[|\]\]/g, "")
26
        .split("|")[0]
27
        .trim();
28
      return linkedSlug === targetSlug;
29
    });
30
  });
31

32
  return backlinks;
33
}
34

35
const backlinks = await getBacklinks(slug);
36
---
37

38
{
39
  backlinks.length > 0 && (
40
    <div class="mt-8 pt-6 border-t border-[var(--line-divider)]">
41
      <h3 class="text-lg font-semibold mb-4 text-[var(--text)]">
42
        Backlinks
43
      </h3>
44
      <ul class="space-y-2">
45
        {backlinks.map(post => (
46
          <li>
47
            <a
48
              href={getPostUrlBySlug(post.slug)}
49
              class="text-[var(--primary)] hover:underline"
50
            >
51
              {post.data.title}
52
            </a>
53
          </li>
54
        ))}
55
      </ul>
56
    </div>
57
  )
58
}

Add it to your post layout (src/pages/posts/[...slug].astro).

Step 8: TypeScript Configuration#

For strict type checking with isolatedDeclarations, ensure your functions have explicit return types. Key fixes needed:

1
// In url-utils.ts
2
export function pathsEqual(path1: string, path2: string): boolean {
3
  // ...
4
}
5

6
export function url(path: string): string {
7
  // ...
8
}
9

10
// In content-utils.ts
11
export async function getSortedPosts(): Promise<CollectionEntry<"posts">[]> {
12
  // ...
13
}
14

15
// In config.ts (content collection)
16
const postsCollection: ReturnType<typeof defineCollection> = defineCollection({
17
  // ...
18
});

Step 9: GitHub Actions CI/CD#

Set up continuous integration to catch issues early. Create .github/workflows/build.yml:

1
name: Build and Check
2

3
on:
4
    push:
5
        branches: [main]
6
    pull_request:
7
        branches: [main]
8

9
jobs:
10
    check:
11
        runs-on: ubuntu-latest
12
        name: Astro Check
13
        steps:
14
            - name: Checkout
15
              uses: actions/checkout@v4
16

17
            - name: Setup pnpm
18
              uses: pnpm/action-setup@v4
19
              with:
20
                  version: 9.14.4
21

22
            - name: Setup Node.js
23
              uses: actions/setup-node@v4
24
              with:
25
                  node-version: "22"
26
                  cache: "pnpm"
27

28
            - name: Install dependencies
29
              run: pnpm install --frozen-lockfile
30

31
            - name: Run Astro Check
32
              run: pnpm check
33

34
    build:
35
        runs-on: ubuntu-latest
36
        name: Astro Build
37
        steps:
38
            - name: Checkout
39
              uses: actions/checkout@v4
40

41
            - name: Setup pnpm
42
              uses: pnpm/action-setup@v4
43
              with:
44
                  version: 9.14.4
45

46
            - name: Setup Node.js
47
              uses: actions/setup-node@v4
48
              with:
49
                  node-version: "22"
50
                  cache: "pnpm"
51

52
            - name: Install dependencies
53
              run: pnpm install --frozen-lockfile
54

55
            - name: Run Build
56
              run: pnpm build

Step 10: Profile Configuration#

Configure your profile in src/config.ts for the sun node to display correctly:

1
export const profileConfig = {
2
  avatar: "/avatar.png",
3
  name: "Your Name",
4
  quotes: ["Your quote or tagline here"],
5
  // ... other config
6
};

Writing Posts with Wiki-Links#

Now write your posts in src/content/posts/:

1
---
2
title: My Second Post
3
published: 2026-03-01
4
description: Another interconnected post.
5
tags: [Notes]
6
category: Tutorial
7
draft: false
8
---
9

10
This post links to [[my-first-post]].
11

12
I can also link to other posts like [[hello-world-story-of-my-first-website]].
13

14
The backlinks component will automatically show this post
15
when viewing those linked posts.

Deployment#

Since this is a static site, deployment is straightforward:

Push to GitHub
Import project in Vercel (or Netlify, Cloudflare Pages)
Set build command: pnpm build
Set output directory: dist
Deploy!

The build automatically runs astro build && pagefind for search indexing.

What’s Next?#

Some ideas for expansion:

Local graph view - A dedicated page showing a larger, more interactive graph
Graph filtering - Filter by tags or categories
Obsidian sync - Automate syncing from your Obsidian vault
Custom node styling - Color nodes by category or tag
Search integration - Click nodes in graph to filter search results

Conclusion#

Building an Obsidian-style blog with a 3D knowledge graph is a powerful way to publish your interconnected notes. The combination of Astro, Fuwari, and 3d-force-graph provides an excellent foundation for a personal knowledge base that feels native to the way you already write.

The best part? You write in Obsidian using your familiar workflow, and your blog automatically reflects the rich connections between your ideas - visualized as a beautiful starfield with you at the center.

Happy writing! 🚀