Obsidian에서 Excalidraw: 손으로 그린 다이어그램을 노트에

앞서 언급했듯이, Canvas 파일은 .canvas 형식이며 .md 파일과 별도로 존재합니다. 즉, 독립적으로 관리해야 하고 같은 파일에 노트와 결합할 수 없습니다. 이 장에서는 이 문제를 해결하는 도구인 Excalidraw 플러그인을 소개합니다.

Excalidraw란 무엇이며 Canvas와 어떻게 다른가?

Excalidraw란?

Excalidraw는 무료 오픈소스 온라인 드로잉 도구로, 독립형 웹 버전(excalidraw.com)이 있어 회원가입 없이 브라우저에서 바로 사용할 수 있습니다. 손글씨 스타일은 순서도, 마인드맵, 아키텍처 다이어그램 등에 완벽합니다.

Obsidian에서는 서드파티 플러그인 버전을 사용합니다. Obsidian 공식이 아닌 커뮤니티 개발자가 유지 관리하므로 수동으로 설치해야 합니다. 핵심 기능은 웹 버전과 동일하지만 Obsidian과의 추가적인 깊은 통합이 있습니다.

Canvas와의 차이점

둘 다 “캔버스에 그림을 그린다"는 점은 같지만, 파일 형식이 완전히 다릅니다. 이것이 핵심 차이입니다.

• Canvas: .canvas 파일을 생성합니다. 이는 독립적인 JSON 파일로, .md 노트와 별도로 존재하며 독립적으로 관리해야 합니다.
• Excalidraw: 드로잉 데이터를 압축하여 .md 파일 끝에 포함시킬 수 있습니다. 하나의 파일에 텍스트와 그림이 공존하므로 별도 관리가 필요 없습니다.

아래 두 스크린샷은 같은 파일입니다.

이것이 제가 Excalidraw를 추천하는 이유입니다. 파일을 열면 텍스트가 보이고, 전환하면 그림이 보입니다. 두 가지 콘텐츠가 한 곳에 있습니다.

Excalidraw 플러그인 설치

Excalidraw는 서드파티 플러그인이므로 수동으로 설치해야 합니다.

경로: 설정 → 서드파티 플러그인 → 커뮤니티 플러그인 → “Excalidraw” 검색 → 설치 → 활성화

설치 후 플러그인을 활성화하면 왼쪽 사이드바에 Excalidraw 아이콘이 나타납니다.

Excalidraw 생성 및 사용

새 파일 생성 방법

두 가지 방법이 있습니다.

1. 명령어 팔레트: Cmd+P(Mac) 또는 Ctrl+P(Windows), “Excalidraw: 새 그림” 검색 후 Enter.
2. 왼쪽 사이드바: Excalidraw 아이콘을 클릭하여 바로 새로 만듭니다.

기본적으로 새 파일은 .excalidraw(.md 아님)로 생성됩니다. 걱정하지 마세요. 이 파일을 .md 파일의 일부로 만드는 방법이 바로 뒤에 나오는 “투인원” 섹션의 핵심입니다.

일반적인 작업 및 단축키

Excalidraw 도구 모음에서 각 도구 아래에 숫자가 표시됩니다. 이것이 단축키입니다. 숫자를 누르면 도구 모음을 클릭하지 않고도 도구를 바로 전환할 수 있습니다.

Canvas와 비교하여 추가 기능: Excalidraw에는 전용 자유곡선 도구(단축키 7)가 있어 마우스나 트랙패드로 자유롭게 그릴 수 있습니다. Canvas는 이 기능이 없습니다.

키보드 워크플로: 키보드에서 손을 떼지 않고 그리기

Excalidraw는 순수 키보드 워크플로도 지원하므로 노드를 빠르게 만들고 연결하고 내용을 작성하는 데 좋습니다.

기본 탐색(선택 모드):

캔버스에 콘텐츠 추가

도형 및 텍스트: 도구 모음에서 도형을 선택하고 캔버스를 클릭하여 그립니다. 텍스트 도구로 클릭하고 입력을 시작하면 한글도 지원됩니다.

화살표 연결: 사각형이 선택된 상태에서 가장자리에 마우스를 올리면 녹색 연결점이 나타납니다. 이 점 중 하나에서 다른 도형으로 화살표를 끌어다 놓으면 자동으로 연결됩니다.

기존 노트: Obsidian 파일 트리에서 노트를 Excalidraw 캔버스로 직접 드래그하면 노트 미리보기 카드로 포함됩니다.

이미지: 이미지 파일을 캔버스로 드래그하면 바로 표시됩니다.

핵심 포인트! AI로 Excalidraw 그리기

앞서 “AI로 Canvas 그리기” 섹션과 유사하게, Excalidraw도 Claude Code로 직접 생성할 수 있습니다.

배경

이전에 Claude Code와 Skill 시스템을 소개했습니다. Canvas는 json-canvas Skill을 사용하고, Excalidraw에도 전용 Skill인 **excalidraw-diagram**이 있습니다. 물론 Excalidraw 관련 MCP와 Skill도 많으니 필요에 따라 선택하면 됩니다.

이 Skill은 axtonliu가 만들었고 GitHub에 오픈소스로 공개되었습니다.

https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/excalidraw-diagram

다운로드 후 다른 Skill과 마찬가지로 ~/.claude/skills/ 디렉토리에 넣습니다.

이 Skill은 독립형 .excalidraw 파일을 생성하므로, 그림만 필요하고 노트 텍스트와 섞고 싶지 않은 경우에 적합합니다.

그림을 .md 파일 안에 직접 포함시키려면(뒤에서 설명할 투인원 형식), 제가 확장 Skill인 obsidian-excalidraw를 작성했습니다. 이 Skill은 결과를 압축하여 .md 파일 끝에 포함시키며, 추가 파일을 만들지 않습니다. 두 Skill은 용도가 다르니 필요에 따라 선택하세요.

사용 방법

Claude Code에서 /excalidraw-diagram을 입력하고 이 Skill을 선택한 후 Tab을 누르고 그리고 싶은 내용을 설명합니다. Claude Code가 해당 Excalidraw 파일을 생성합니다.

라이브 데모

이 장의 내용을 데모로 사용했습니다. Claude Code에게 “이 Excalidraw 내용의 장 구조를 보여주는 순서도를 그리고, 각 섹션 간의 관계를 표시해줘"라고 말했습니다.

Claude Code가 내용을 읽고 자동으로 구조도를 생성하여 .md 파일 끝에 바로 포함시켰습니다. Excalidraw 모드로 전환하면 볼 수 있습니다. 노드를 수동으로 드래그하거나 선을 연결할 필요가 없어 손으로 그리는 것보다 훨씬 빠릅니다.

핵심 포인트! Excalidraw를 .md 파일에 포함시키기(투인원)

분명히 말씀드리자면, 기본적으로 Excalidraw 플러그인은 .excalidraw 파일을 생성하며, 이는 .md 파일과 별개로 Canvas와 마찬가지로 독립적으로 관리해야 합니다.

“투인원” 기능은 기본 동작이 아니며 추가 설정이 필요합니다. 설정하면 새 파일이 .md 형식으로 생성되고, 그림 데이터가 압축되어 파일 끝에 저장되므로 같은 파일에 두 가지가 공존합니다.

Canvas는 이 기능을 제공하지 않지만 Excalidraw는 가능합니다. 설정 후 동일한 .md 파일이 일반 노트이자 그림판 역할을 하여 하나의 파일로 모든 것을 처리할 수 있습니다. 이것이 이 글에서 가장 가치 있는 부분입니다.

아래에서 5단계로 설명합니다.

5.1 두 가지 핵심 속성

세심한 독자라면 앞서 제 노트 스크린샷에서 이미 이 두 가지 머리말 속성을 보셨을 것입니다.

excalidraw-plugin: parsed
excalidraw-open-md: true

excalidraw-plugin: parsed: Excalidraw 플러그인에게 이 .md 파일에 파싱해야 할 Excalidraw 데이터가 있음을 알립니다. 이 속성이 없으면 플러그인이 파일을 처리하지 않습니다.

excalidraw-open-md: true: 파일을 기본적으로 Markdown 모드로 엽니다(그림 모드로 바로 진입하지 않음). true로 설정하면 파일을 열 때 먼저 텍스트가 보이고, 그림이 필요할 때 수동으로 전환합니다. 이 속성이 없으면 파일을 열 때마다 바로 그림판으로 이동하므로 텍스트를 읽으려면 다시 전환해야 해서 불편합니다.

이 두 속성이 머리말에 있으면 파일이 “이중 모드” 기능을 갖게 됩니다.

5.2 템플릿 파일 생성

투인원 설정의 핵심은 이 구성을 템플릿 파일에 저장하는 것입니다. 그러면 새 노트를 만들 때마다 자동으로 포함되므로 매번 수동으로 추가할 필요가 없습니다.

단계:

1. 템플릿 폴더(예: 02 Templates/)에 새 .md 파일을 만들고 이름을 “Excalidraw 템플릿"으로 지정합니다.
2. 다음 내용을 복사하여 붙여넣기하고 저장합니다.

---
excalidraw-plugin: parsed
excalidraw-open-md: true
---

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MSgw4CxAHSp6AWzJJMMJTEZgaCANoBdcuihQAymHRg+oCthhEAQulQBrAOb4ujXAGF6mPT4CCAAxABmkVGqnnhm2ABefIycmJgAvuTh2Oq68MDp6UA
```
%%

이것은 빈 캔버스가 있는 Excalidraw 템플릿입니다. 두 머리말 속성(excalidraw-plugin: parsed 및 excalidraw-open-md: true)은 플러그인에게 이 파일이 투인원 형식이며 기본적으로 Markdown 모드로 열려야 함을 알립니다. 끝에 있는 compressed-json은 빈 캔버스 데이터입니다.

5.3 Excalidraw 플러그인 설정

템플릿 파일만으로는 충분하지 않습니다. Excalidraw 플러그인에 “템플릿을 어디서 찾을지” 알려주고 파일 관리에 방해가 되는 설정을 비활성화해야 합니다.

경로: 설정 → Excalidraw

수정할 두 가지:

① 템플릿 위치 설정: Excalidraw 설정에서 “템플릿 파일” 옵션을 찾아 템플릿 경로(예: 02 Templates/Excalidraw 템플릿)를 입력합니다. 그러면 이후 Excalidraw로 새 파일을 만들 때마다 자동으로 이 템플릿이 사용되며 excalidraw-open-md: true 속성도 포함됩니다.

② “새 파일 이름에 날짜 추가” 비활성화: 기본적으로 Excalidraw는 새 파일 이름에 생성 날짜를 추가합니다(예: Drawing 2026-03-12). 이렇게 하면 파일 이름이 길어지고 Obsidian의 템플릿 명명 논리와 호환되지 않습니다. 이 옵션을 찾아 끕니다.

5.4 단축키 바인딩

Markdown 모드와 그림 모드 간 전환을 오른쪽 클릭 메뉴로 하면 너무 느립니다. 단축키를 바인딩하여 즉시 전환할 수 있습니다.

경로: 설정 → 단축키 → “Excalidraw” 검색

다음 항목을 찾습니다: “Excalidraw: Excalidraw와 Markdown 모드 간 전환”

Cmd+E(Mac) 또는 Ctrl+E(Windows)에 바인딩합니다. 먼저 이 키 조합이 이미 사용 중인지 확인하세요. Obsidian의 기본 Cmd+E는 기울임꼴입니다. 기울임꼴을 자주 사용한다면 Cmd+Shift+E와 같은 다른 키를 선택하세요.

바인딩 후 투인원 파일에서 Cmd+E를 누르면 “텍스트 보기"와 “그림 보기” 사이를 전환할 수 있어 매우 편리합니다.

5.5 파일 끝의 압축 데이터

설정 후 투인원 파일에 그림 내용을 저장할 때마다 파일 끝에 데이터 블록이 자동으로 생성됩니다.

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQ...
```
%%

이 compressed-json 코드 블록은 모든 그림 데이터를 압축한 결과입니다. 좌표, 색상, 텍스트 내용, 연결 관계 등이 모두 이 한 줄의 문자열로 압축됩니다.

세 가지 주의사항:

• 이 내용을 수동으로 삭제하지 마십시오. 삭제하면 그림 데이터가 사라지고 Excalidraw 모드로 전환하면 빈 캔버스가 표시됩니다.
• %%는 Obsidian의 주석 구문입니다. 읽기 모드에서는 이 내용이 숨겨져 표시되지 않으므로 노트의 가독성에 영향을 주지 않습니다.
• compressed-json 줄은 완전한 한 줄이어야 합니다. 줄바꿈으로 끊어지면 파일에 오류가 발생하여 열리지 않습니다.

요약

오늘 배운 내용:

1. Excalidraw = 무료 오픈소스 드로잉 도구: 독립형 웹 버전이 있으며 Obsidian은 서드파티 플러그인 버전을 사용합니다. 손글씨 스타일과 무한 캔버스를 제공합니다.
2. Canvas와의 핵심 차이점: Canvas는 별도의 .canvas 파일을 생성하여 독립적으로 관리해야 하지만, Excalidraw 그림 데이터는 .md 파일에 압축하여 포함시킬 수 있습니다. 하나의 파일, 두 가지 용도.
3. 설치: 설정 → 서드파티 플러그인 → 커뮤니티 플러그인 → Excalidraw 검색 및 설치.
4. 도구 단축키: 숫자 키 1-8과 0으로 도구 전환, Esc로 편집 종료, Tab으로 요소 간 이동, 화살표 키로 이동. 핵심 리듬: 숫자 키로 도구 + Esc/Tab으로 탐색.
5. AI 그림 그리기: /obsidian-excalidraw Skill을 사용하면 Claude Code가 포함된 그림을 직접 생성하여 수동으로 노드를 드래그하는 것보다 훨씬 빠릅니다.
6. 투인원 설정: 머리말에 excalidraw-plugin: parsed + excalidraw-open-md: true 추가, 템플릿 파일을 통해 구성, Excalidraw 설정에서 템플릿 경로 설정, Cmd+E에 빠른 모드 전환 단축키 바인딩.
7. 파일 끝 데이터: ## Drawing + compressed-json 코드 블록은 압축된 그림 데이터이며 %%로 감싸져 읽기 모드에서 보이지 않습니다. 수동으로 삭제하지 마십시오.

감사의 말: 이 장의 “투인원” 설정은 Bilibili 크리에이터 Fiveth_의 방법을 참고했습니다(영상: BV1hyhPzoEcd). 이에 감사드립니다.