LLM Wiki

Obsidian Vault 그래프 시각화 도구 (Cosma, Quartz)

Properties2
descriptionObsidian은 그래프 시각화 도구(Graph View)를 대부분 자체적으로 직접 구현했습니다.
tagsmisc, obsidian, graph-visualization, digital-garden

6 min read

Obsidian vault에서 wiki link 기반 연결을 파싱해 인터랙티브 지식 그래프를 만드는 오픈소스 도구들입니다.

Obsidian Core Graph View 구현 방식

Obsidian은 그래프 시각화 도구(Graph View)를 대부분 자체적으로 직접 구현했습니다. (Obsidian 코어 앱 자체는 오픈소스가 아닙니다.)

기술적 배경

  • 초기 버전: D3.js(유명한 오픈소스 force-directed graph 라이브러리)를 사용했습니다.
  • 현재(최신 버전): D3.js는 성능 문제로 대체하고, **Pixi.js(오픈소스 WebGL 렌더링 라이브러리)**를 렌더링(화면 그리기) 부분에만 사용합니다.
  • 나머지 핵심 로직(노드·엣지 물리 엔진, force-directed layout, 필터링, 인터랙션 등)은 Obsidian 개발팀이 완전히 커스텀으로 만들었습니다.

공식 포럼 인용

Obsidian 공식 포럼에서 개발자들이 직접 밝힌 내용입니다:

“Pixi.js is doing the rendering, everything else is custom, it used to be done with D3, but that was not performant enough.”

번역: Pixi.js가 렌더링을 담당하고, 나머지는 모두 커스텀입니다. 예전에는 D3를 썼는데 성능이 부족해서 바꿨습니다.

하이브리드 방식

그래서 전체를 하나의 오픈소스 그래프 라이브러리(예: Cytoscape.js, vis.js 등)로 만든 게 아니라, Obsidian 팀이 직접 최적화한 하이브리드 방식이라고 보시면 됩니다.

왜 이렇게 만들었을까?

  • Obsidian은 수만 개의 노트가 있는 대형 vault에서도 부드럽게 동작해야 하니까, 기존 오픈소스 라이브러리만으로는 성능 한계가 있었습니다.
  • 플러그인(예: 3D Graph, Juggl)에서는 다른 오픈소스 라이브러리를 자유롭게 쓰지만, 코어 Graph View는 Obsidian이 직접 관리합니다.

기술 스택 요약

구성 요소사용 기술설명
렌더링 (화면 그리기)Pixi.js (WebGL)고성능 2D/3D 그래픽 렌더링
물리 엔진Obsidian 커스텀노드 배치, 힘 계산
레이아웃 알고리즘Obsidian 커스텀Force-directed layout
인터랙션Obsidian 커스텀드래그, 줌, 필터링

1. Cosma (외부 독립 시각화용 가장 추천)

Cosma는 Obsidian vault(마크다운 파일 폴더)에서 wiki link 기반 연결을 파싱해 인터랙티브 지식 그래프를 단일 HTML 파일(cosmoscope)로 만들어줍니다. Obsidian의 그래프 뷰를 외부에서 독립적으로 시각화·공유할 수 있게 해주는 도구입니다.

Cosma 주요 특징

  • Obsidian vault를 그대로 입력으로 사용 (Markdown + 링크 지원)
  • 노드·엣지 기반 네트워크 그래프 + 필터(태그, 타입, 날짜 등), 백링크 보기, 검색 기능
  • 서버 없이 브라우저에서 바로 열리는 하나의 HTML 파일로 완성 → 웹에 올려 공유하기 딱 좋음
  • YAML 설정으로 그래프 스타일·필터 자유롭게 커스터마이징 가능

사용 방법

  1. GitHub: graphlab-fr/cosma (GPL 3.0 / CeCILL 오픈소스)
  2. Obsidian vault를 Cosma가 읽기 쉽게 변환해주는 obsidian2cosma Python 스크립트 추천 → kevinpolisano/obsidian2cosma
  3. npm i @graphlab-fr/cosma --global 후 cosma 명령어로 HTML 생성

Obsidian 포럼에서도 “그래프 뷰 + 노트 함께 HTML로 공유” 목적으로 많이 추천받는 도구입니다.

2. Quartz (웹사이트 공개용)

Quartz는 Obsidian vault를 정적 웹사이트로 만들어주는 오픈소스입니다. 웹사이트에 인터랙티브 그래프 뷰가 기본 포함돼 있어요.

특징

  • GitHub: jackyzha0/quartz (MIT 라이선스)
  • Obsidian 파일 그대로 퍼블리싱 + 그래프 + 백링크·검색 등 풀 기능
  • 개인 디지털 가든·세컨드 브레인 공개용으로 인기 많음

사용 방법

Quartz는 Hugo 기반 정적 사이트 생성기입니다. GitHub Pages 등에 배포하면 Obsidian vault를 그대로 웹사이트로 공개할 수 있습니다.

3. Obsidian 플러그인 (앱 내에서 강력한 그래프)

Juggl

  • GitHub: HEmile/juggl
  • 완전 인터랙티브·스타일링 가능한 고급 그래프 뷰 (로컬 그래프 중심)
  • Obsidian 안에서 더 강력한 그래프를 원한다면 추천

3D Graph

요약 추천

요구사항추천 도구
외부에서 독립적으로 그래프 시각화·공유Cosma + obsidian2cosma (가장 추천)
웹사이트로 공개Quartz
Obsidian 안에서만Juggl 또는 3D Graph 플러그인

백링크