노션

노션에 다이어그램을 그려보자! - mermaid코드(1)

주인장 앤지 2025. 2. 2. 19:11

안녕하세요 앤지입니다!

노션을 사용하다보면 [도형을 그린다]는 것에 대한 개념이 없어 어쩔 때는 ‘한계가 있다’라고 느낄 때가 많은데요!

저는 개인적으로 생각을 정리할 때 도형을 그리고 화살표를 그려가며 마인드맵처럼 정리를 할 때가 많은데요, 아무래도 복잡한 내용들을 한눈에 볼 수 있도록 도식화를 하면 나중에 꺼내 볼 때도 내용이 한눈에 들어오니 좋더라구요!

노션에서도 이렇게 많은 내용을 한눈에 볼 수 있게 도식화를 할 수 없을까? 하다가 만나게된 mermaid code! 인어코드에 대해 알아보겠습니다!

 

Mermaid 코드란?

Mermaid는 텍스트 기반의 다이어그램 생성 도구로, Markdown과 유사한 문법을 사용하여 복잡한 다이어그램을 간단한 코드로 표현할 수 있습니다. 이를 통해 플로우차트, 시퀀스 다이어그램, 간트 차트 등 다양한 형태의 다이어그램을 손쉽게 제작할 수 있습니다. 특히 노션에서는 Mermaid 코드를 코드 블록에 삽입하여 다이어그램을 시각적으로 구현할 수 있어 활용도가 높습니다.

 

Mermaid 코드의 장점

첫째, 복잡한 정보를 시각적으로 표현할 수 있어 이해하기 쉽습니다.

둘째, 코드로 작성하기 때문에 수정이 용이하고, 버전 관리가 가능합니다.

셋째, 팀원들과의 협업 시, 코드 공유를 통해 동일한 다이어그램을 쉽게 재현할 수 있습니다. 

 

Mermaid 는 어떻게 쓸 수 있을까요?

mermaid코드는 복잡한 텍스트 구조를  도식화 하여 많은 사람들이 빠르게 정보를 이해하는 데 도움을 줄 수 있습니다.

예를 들어 협업 프로세스를 설명하려 할 때, mermaid 코드가 있기 전/ 후를 노션으로 표시해볼게요!

 

예시1) mermaid 코드 사용 전 협업 프로세스

텍스트로 정리한 협업 프로세스

 

예시2) mermaid 코드 사용 후 협업 프로세스

mermaid 코드로 도식화한 협업 프로세스

 

글로 깔끔하게 정리하는 것도 좋지만, 오해의  요지가 있을 수 있기 때문에 도식화를 통해 정리를 하게 되면 혼선 없이 많은 구성원들의 이해가 빠르겠죠? 

이처럼 mermaid코드는 텍스트를 도식화 함으로써 정보의 이해를 돕는 도식화 작업을 하는 것에 도움을 줍니다 :)

 

오늘은 mermaid코드가 어떤 것인지에 대해 간단하게 설명을 드렸는데요, 다음에는 mermaid코드의 기본인 flow chart 부터 쉽게 사용하실 수 있도록 많은 예시와 함께 기재해보겠습니다!

 

많은 기대 부탁드립니다 :)