Notion에서 간편하게 Flowchart 그리기
Notion에서 Markdown으로 도형과 다이어그램 작성하고 추가하기
업무를 새로이 맡거나 일의 진행이 잘 되지 않을 때, 개인적으로 순서도(Flowchart)를 그려보면서 업무를 분석해보곤 합니다. 어느 단계까지 일이 잘 진행되었는지, 어디에서 일이 멈추거나 속도가 늦어지는지 파악하는데 순서도 만큼 편리하고 간편한 도구가 없지 않을까 생각되네요. 일전에 기고한 “Flowchart로 업무 흐름을 한눈에 파악하기”에서 순서도 작성에 유용한 2개의 도구들 - flowchart.fun, code2flow - 을 소개해 드린 적이 있었는데요. 오늘은 markdown을 사용해서 간편하게 도형이나 차트 등을 텍스트로 간편하게 작성하는데 유용한 “mermaid”를 소개합니다. 자바스크립트 기반으로 만들어진 코드지만, mermaid가 지원되는 편집기나 협업도구들에서 편리하게 사용이 가능한데요. 생각정리 도구로 활용하고 있는 Roam Research는 물론이고, Notion에서도 사용 가능합니다.
홈페이지에서 소개하는 “Mermaid”의 내용은 아래와 같습니다.
Mermaid is a tool that lets you create complicated diagrams in Markdown — it works with simple commands and an intuitive syntax. You don’t have to draw anything, just write down what you want to see!
Mermaid에서는 Gantt Chart, Pie Chart, Flowchart, User Journey Map 이외에 프로그래밍 등에 유용한 ER Diagram, Sequence Diagram, State Diagram, Class Diagram 등을 마크다운으로 편리하게 작성해볼 수 있습니다. Mermaid Live Editor 사이트에서 실제로 작성해 볼 수 있습니다.
다이어그램 각각마다 작성을 위한 개별 문법들이 사용되는데요. 위의 Live Editor에서 각각의 다이어그램별로 작성 방식과 사용방법을 확인해볼 수 있습니다.
이 글에서는 플로우 차트(flow chart)를 중심으로 markdown 작성법에 대해 살펴보겠습니다 (위의 그림 참고).
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
첫 줄에 플로우 차트를 나타내는 graph 키워드를 적고, 다음에 그림이 표시될 방향을 설정합니다. 방향에는 TD(Top-Down), BT(Bottom-Up), LR(Left-to-Right), RL(Right-to-Left)등이 사용 가능합니다.
순서도 내에서 노드를 식별하기 위해서 id[이름]의 형식을 사용합니다. 예를 들어, A[Christmas]에서 A는 노드명을, []안의 텍스트는 해당 노드에 표시될 텍스트 내용입니다.
--> 를 사용해서 노드 간의 연결 방향을 설정합니다. 연결에 의미를 나타내는 텍스트를 입력하기 위해서 | |를 사용합니다. —> |Get Money|로 연결의 의미를 표시합니다.
Mermaid에서 노드의 모양을 변경하기 위해서 노드 내 표시되는 텍스트를 둘러싼 기호로 ( ), [ ]를 사용합니다. ( )는 모서리가 라운드된 모양이 표시되고, [ ]은 박스형 모양이 표시됩니다.
If문과 같은 조건문이 필요하다면, { }를 사용합니다.
노드에 icon을 추가하고 싶다면, [fa:아이콘명 텍스트] 형식을 사용합니다. [fa:fa-car]는 자동차 아이콘을 나타냅니다.
Notion에서 Mermaid를 사용하기 위해서는 페이지 내에서 /code를 입력하고, 언어를 Mermaid로 변경합니다. 변경과 동시에 오류 메시지가 표시됩니다(첫줄의 해석에 오류가 있다는 내용이 표시되며, “NEWLINE”, “SPACE”, “GRAPH”, “EOF”를 입력하라고 메시지 표시).
순서도를 그리기 위해서는 graph 입력이 필요합니다. 위의 Mermaid 코드를 입력하면, 위의 Mermaid Live Editor의 그림과 동일한 내용이 표시됨을 알 수 있습니다.
Notion에서 Mermaid의 표시 영역에 대한 옵션 설정이 가능합니다. 언어 설정 옆의 Split 항목을 클릭하면 아래와 같이 3가지 옵션 설정이 가능합니다. Code는 Mermaid 코드만 보기, Preview는 다이어그램만 보기, 마지막으로 Split는 코드와 프리뷰 모두 보기를 지원합니다.
“Flowchart로 업무 흐름을 한눈에 파악하기” 글에서 예시로 작성한 커피 주문하는 순서를 Mermaid로 Notion에서 아래와 같이 작성해보왔습니다. 다이어그램이 매우 깔끔하게 작성되고 표시되어 좋네요. LR방향으로 그려서 그림이 작게 표시되었는데요. TB방향으로 설정하면 좀 더 크게 그림이 표시됩니다.
업무나 일에서 다양한 다이어그램들을 그리고 사용하는 빈도가 높으시다면, 오늘 소개해드린 Mermaid를 활용하여 별도의 드로잉이나 도형 저작 애플리케이션이나 서비스를 사용하지 않고 간편하게 Markdown방식으로 필요한 도형과 다이어그램을 그리고 노트에 추가해보시면 좋을 것 같네요. 많은 활용 기대하겠습니다.
아래의 글들도 함께 읽어보시보면 일과 업무의 생산성 향상에 도움이 됩니다.
Whimsical : 플로우 차트와 다이어그램 협업도구
