DEVOCEAN

많이들 사용하고 있는 툴 중의 하나로 노션이 있을 것 같습니다

많이들 사용하고 있지만 일부 모르시는 분들을 위해 제가 주로 사용하는 기능 중 하나인 것을 소개해 드리려고 합니다.

노션에 코드 블럭을 삽입할 때 mermaid js를 사용하면 다이어그램을 그릴 수 있습니다.

다이어그램??

네 맞습니다.

플로우차트, 시퀀스다이어그램, 클래스다이어그램, 간트차트 등등을 그려서 사용할 수 있습니다.

공식적인 mermaid.js는 아래 주소를 통해 확인하실 수 있습니다.

스크립트를 제외한 대부분의 기능이 노션에서 사용이 가능합니다.

https://mermaid-js.github.io/mermaid/#/

자. 그럼 간단한 사용법을 소개해 드리겠습니다.

우선 노션에서 코드 블럭을 하나 삽입하겠습니다.

코드 블럭이 생성되면 왼쪽 상단에 언어를 선택할 수 있습니다. 여기서 mermaid를 선택합니다.

제대로 선택이 되면 아래와 같이 Mermaid 가 나오고 그 우측에 분할보기 로 나오는데 이걸 눌러보면 아래와 같습니다.

코드는 Mermaid.js 코드만 보는 것이고 미리보기는 코드는 보지 않고 다이어그램만 보는 것, 그리고 분할 보기는 코드와 다이어그램을 함께 보는 것입니다.

저는 플로우차트를 그려보겠습니다.

플로우 방향은 좌측에서 우측으로 가도록 하겠습니다.

그리고 node를 하나 만들겠습니다.

flowchart LR

node

node라고 만들었는데 이 명칭이 고유값이 됩니다.

그럼 이번에는 노드의 모양을 둥근 모서리 네모로 만들면서 그 안에 텍스트값을 넣어보도록 하겠습니다.

괄호 하나일 때는 둥근 모서리의 네모이고 괄호를 두번쓰면 원이 됩니다.

이번에는 홍길동과 홍당무를 연결하도록 하죠.

node와 n2는 고유값이고 이 고유값들을 사용하여 -->로 연결해주면 됩니다.

이 엣지에 텍스트도 넣을 수 있습니다.

간단한 그림을 하나 그렸습니다.

더 많은 모양은 위에 말씀드렸던 mermaid.js 홈페이지를 보시면 자세히 나와있습니다.

그럼 여기서 노드와 엣지의 색상과 굵기 등을 변경해보겠습니다.

style과 linkStyle 을 사용하여 지정을 할 수 있습니다.

node 하나씩 스타일을 지정하는건 비효율적이기 때문에 classDef를 통해 지정해 놓고 사용할 수도 있습니다.

아래의 예에서 classDef로 스타일을 지정하고, 홍당무 뒤에 :::yellow 로 표기한 부분을 참조하세요

지금까지 내용의 코드는 아래와 같습니다.

flowchart LR

classDef yellow fill:yellow, stroke:black, stroke-width:2px, color:black


node(홍길동)
n2((홍당무)):::yellow
node-->|즐겨먹는 간식|n2

style node stroke:red,color:white,fill:blue,stroke-width:4px
linkStyle 0 stroke:red

이를 응용하면 아래와 같은 다이어그램을 그릴 수도 있습니다.

위의 예시는

mermaid 예제

여기에서 보실 수 있습니다.

그럼 즐거운 노션 활용이 되시길 바랍니다.