経緯

  • QuartzのGraph Viewは、zettelkastenにおいてノートの関連を辿るのに役立っている
  • ただし、全ノートが同じ様に表示されるため、Permanent/Referenceの区別がつかない
  • 単にReferenceが多い島なのか、Permanentが多い島なのかを区別できないため、結局Obsidian側のGraph Viewで見るハメになっている

やりたいこと

  • QuartzにおけるGraph Viewで、ノートのタグに応じてノードの色を分けたい

解決策

  • quartz/components/scripts/graph.inline.tsを直接変更する

コード

diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index a669b05..9cfce05 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -195,13 +195,14 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
 
   // calculate color
   const color = (d: NodeData) => {
-    const isCurrent = d.id === slug
-    if (isCurrent) {
-      return computedStyleMap["--secondary"]
-    } else if (visited.has(d.id) || d.id.startsWith("tags/")) {
+    if (d.id === slug) {
       return computedStyleMap["--tertiary"]
-    } else {
+    } else if (d.tags.includes("structure")) {
+      return computedStyleMap["--secondary"]
+    } else if (d.tags.includes("permanent")) {
       return computedStyleMap["--gray"]
+    } else {
+      return computedStyleMap["--lightgray"]
     }
   }

Ref

2026/02/23