Claude로 Notion에서 다이어그램 그리기 🪄 [Mermaid 커넥터 활용/논문 정리 템플릿 공유]

나는 연구실에 있을 때 논문을 읽으면 주로 노션에 읽은 논문 내용을 요약하고 손으로 다이어그램을 그려보면서 정리하곤 했다. 노션에서 Mermaid 코드를 사용하면 다이어그램을 그릴 수 있다는 건 알고 있었지만, 코드를 직접 작성하는 과정이 조금 번거로워서 실제로는 거의 사용해보지 않았다..

그러던 중 Claude 커넥터 목록에서 Mermaid Chart를 발견해서 한 번 써보고 그 과정을 간단히 정리해보려고 한다. 레츠꼬 🪄

 

---

 

1. Claude 커넥터에 Mermaid 추가하기

먼저 Claude에 Mermaid Chart 커넥터를 연결해줘야 한다. (지난번에 포스팅했던 노션 연결하는 법과 동일하다.)

👉 Claude에 Notion 연결하고 AI로 노션 페이지 만들기 🔗📋

 

채팅창 하단 + 버튼 → 커넥터 → 커넥터 관리 순서로 들어가면 된다.

Claude 채팅창에서 + 버튼 클릭 후 커넥터 관리 메뉴 클릭

 

 

커넥터 설정 화면에 들어왔다면 "커넥터 둘러보기" 클릭

커넥터 설정 화면 → 커넥터 둘러보기

 

 

이 열리면 검색창에 "mermaid"를 입력하면 된다. 그러면 Mermaid Chart 커넥터가 나타나는데, + 버튼을 눌러서 추가해주면 된다.

검색창에 mermaid 입력 후 Mermaid Chart 커넥터 연결

 

 

추가하고 나면 커넥터 목록에 Mermaid Chart가 생기고, 도구 권한을 설정할 수 있다. 나는 대화형 도구 항목의 권한을 "항상 허용"으로 바꿔주었다.

Mermaid Chart 커넥터 도구 권한 설정 - 항상 허용으로 변경

 

 

 

2. 노션에서 Mermaid 다이어그램 그리는 법

혹시 Mermaid 코드가 뭔지 잘 모르는 사람들을 위해 설명하자면, mermaid는 노션에서 코드 블록으로 mermaid 코드를 삽입해 다이어그램을 그릴 수 있는 툴? 언어?이다. 노션에서 Mermaid 코드 블록을 삽입하는 건 간단하다. 페이지에서 /코드를 입력하면 메뉴가 뜨는데, 거기서 "코드 - Mermaid"를 선택해주면 된다.

노션에서 /코드 입력 후 코드블록 삽입

 

 

Mermaid 코드 블록이 생기면 안에 코드를 입력해 주면 된다. (코드는 그냥 예시로 gpt한테 만들어달라고 했다.) 우측 상단 버튼으로 코드 뷰 ↔ 다이어그램 뷰를 전환할 수 있고, 미리보기 버튼을 누르면 바로 다이어그램으로 렌더링 된다.

코드 뷰

미리보기 뷰

분할 보기 뷰

 

 

 

3. Mermaid로 그릴 수 있는 다이어그램 종류

Mermaid로 만들 수 있는 다이어그램이 꽤 다양하므로 자주 쓰는 4가지만 빠르게 소개하겠다.

 

① Flowchart (순서도)

가장 범용적인 다이어그램으로 프로세스 흐름이나 의사결정 구조를 표현할 때 사용한다. 아래처럼 신규 가입 프로세스 같은 걸 한눈에 정리할 수 있다.

Flowchart (순서도) 예시

 

 

② Sequence Diagram (시퀀스)

시퀀스는 시스템 간 통신 흐름을 시간 순서대로 표현한다. API 설계나 서비스 아키텍처를 설명할 때 딱 맞는 다이어그램이라고 이해하면 된다. 로그인 API 흐름 같은 걸 사용자-앱-서버-DB 관계로 깔끔하게 그릴 수 있다.

Sequence Diagram (시퀀스) 예시

 

 

③ Gantt Chart (간트 차트)

프로젝트 일정과 태스크 진행 상황을 시각화할 때 쓴다. 스프린트 계획이나 로드맵 공유할 때 유용하고, done / active / milestone / excludes weekends 같은 옵션으로 세분화도 가능하다.

Gantt Chart (간트 차트) 예시

 

 

④ ER Diagram (데이터 구조도)

데이터베이스 테이블 간의 관계를 표현한다. DB 설계 문서나 데이터 구조 설명할 때 활용하면 되고, USER-ORDER-PRODUCT 같은 관계를 한눈에 보여줄 수 있다.

ER Diagram (데이터 구조도) 예시

 

 

 

4. Claude + Notion + Mermaid 조합으로 논문 정리하기 (논문 정리 템플릿 양식)

이제 진짜 꿀 활용법이다. Claude에 Notion 커넥터와 Mermaid 커넥터를 연결해 놓은 상태에서, PDF 논문을 첨부하고 노션 페이지에 정리해 달라고 하면 Claude가 알아서 정리해 준다. 

 

프롬포트:

"내가 첨부한 논문을 읽고 [페이지명] 페이지에 기존 양식에 맞춰 정리해 입력해줘.
데이터베이스에도 삽입하고, 아래 토글로 요약도 추가해줘. 
논문 요약하고 정리할 때 Mermaid 다이어그램을 삽입해 논문의 전체 research framework를 한눈에 볼 수 있게 해줘."

 

 

Claude에 노션 정리 자동화 요청

 

 

그러면 Claude가 노션 페이지 구조를 먼저 파악하고, 데이터베이스에 논문 항목을 추가한 뒤 토글 요약까지 작성해 준다. 당연히 Mermaid 다이어그램도 자동으로 삽입해준다 ㅎㅎ
결과물은 아래와 같다. 내가 첨부한 논문이 [2] 라벨로 추가되었다.

Claude가 자동 요약한 논문 정리 페이지

 

 

 

 

논문 제목, 저자, 저널, DOI, 주요 키워드, 중요도, 연구 방법, 연구 지역까지 데이터베이스에 깔끔하게 들어가고, 하단 토글로 상세 요약 페이지도 자동으로 생성된다. PDF 하나 던져주면 5분도 안 걸려서 이 정도 결과물이 나오니까, 논문 정리할 때 진짜 유용하게 쓸 수 있을 거 같다ㅎㅎ 이상 끝! 🪄

 

📚 논문 정리 아카이브 노션 템플릿 필요한 분은 댓글 남겨주시면 링크 공유해 드리겠습니다 😊