뭐든지 메모해 캔버스 데이터 형식으로 지식을 축적하는 「Obsidian」 의 「JSON Canvas」 가 오픈 소스화

Markdown 형식으로 메모를 작성할 수 있는 서비스인 Obsidian이 사용하고 있는 Obsidian Canvas 파일 형식을  「JSON Canvas」 파일 형식으로서 오픈 소스화 하겠다고 발표했습니다.

JSON Canvas — An open file format for infinite canvas data.
https://jsoncanvas.org/

JSON Canvas

Announcing JSON Canvas: an open file format for infinite canvas data - Obsidian
https://obsidian.md/blog/json-canvas/

Announcing JSON Canvas: an open file format for infinite canvas data

사양에 대해서는 jsoncanvas.org에서 찾을 수 있습니다. 사이트에 액세스 하면 오른쪽 하단의 "Toggle output"을 클릭하십시오.

오른쪽에 JSON Canvas 형식의 파일이 표시되었습니다. 이 사이트 자체도 JSON Canvas로 표현되고 있습니다.

JSON Canvas에는 'node'와 'edge'라는 두 종류의 객체가 존재하며, 'node'에는 'id'와 'type' 외에 표시할 위치와 크기의 데이터가 저장되어 있습니다. 예를 들어 'JSON Canvas Spec'이라는 노드의 type은 'file'이므로 'file'로 지정한 파일의 내용이 표시됩니다.

「type」 에는 「text」 도 존재하고 있어, 이 경우는 「text」 에 내용으로서 표시하는 텍스트를 Markdown 형식으로 직접 지정하면 됩니다.

또한, 「edge」 오브젝트에는 노드 간 화살표로 접속할 때의 정보가 보존되어 있습니다.

Obsidian 이외에도 JSON Canvas 형식을 지원하는 앱이 몇 가지 등장하고 있어, 그중 하나인 hi-canvas를 사용해 보았습니다. 사이트로 이동한 다음 Create a new canvas를 클릭합니다.

넓은 캔버스에 노드가 하나 있습니다. 노드를 클릭.

노드 위에 메뉴가 표시되었습니다. 가장 왼쪽의 종이와 펜 표시를 클릭하면 노드 내용을 편집하는 화면이 표시됩니다. Markdown 형식으로 직접 기입하는 것 외에, Markdown의 기술을 지원하는 다양한 툴이 준비되어 있었습니다.

그런 다음 왼쪽에서 두 번째 아이콘을 클릭합니다.

새 노드가 추가되었으며 해당 노드에 화살표로 연결되었습니다.

또한 팔레트 아이콘을 클릭하면 색상을 변경하는 화면이 나타납니다.

캔버스 오른쪽 하단의 사각형 아이콘을 클릭하면 새로운 노드를 추가 가능.

노드를 선택한 상태에서 선 아이콘을 클릭하면 화면 상단에 "Select target node"가 표시됩니다. 이 상태에서 다른 노드를 클릭하면 선을 연결할 수 있습니다.

이런 식으로 연결됩니다.

지금까지의 캔버스 데이터를 JSON Canvas 형식으로 출력해 봅니다. 캔버스 오른쪽 하단의 아이콘을 클릭하고 "Export"를 클릭.

JSON Canvas 확장자인 '.canvas'를 사용하여 파일을 저장합니다. 텍스트 편집기에서 열어 보면 아래 그림과 같이 JSON Canvas 형식으로 저장되어 있는 것을 확인할 수 있습니다.