노션으로 만드는 플로우 차트
마인드맵도 가능
우리는 마인드맵이라는 것을 종종 사용한다. 아이디어를 확장할 수 있는 꽤 효과적인 수단인 마인드맵. 그리고 우리는 이러한 마인드맵을 변형하여 플로우차트처럼 사용하기도 한다. 이러한 마인드맵을 그릴 수 있는 툴은 다양하다. 필자도 2개나 사용하고 있고 말이다.
그런데 이러한 마인드맵, 플로우차트를 노션에서도 그려낼 수 있다. 다만 전문적인 마인드맵 도구보다 불편한 부분이 있다. 그래서 필자는 자주 사용하지는 않지만 경우에 따라 플로우차트를 노션에서 작성해야 할 경우 종종 사용한다. 이번 포스팅에서는 이 방법을 소개해 보고자 한다.
먼저 노션에서 마인드맵을 사용하기 위해서는 “/코드” 기능을 활용해야 한다. 빈 공간에 이 기능을 활성화 하면 블록하나가 추가 되고 그 위에 마우스 오버를 하면 어떤 코드를 사용할 것인지 선택할 수 있는데 우리는 “Mermaid” 를 사용할 것이다.
Notion에서 Mermaid 블록 쓰면 쉽고 빠르게 마인드맵, 플로우 차트 만들 수 있다. 복잡한 코딩 없이 간단한 문법만으로 멋진 시각 자료 만들 수 있다는 게 장점이다. 다만 앞서 말했듯 불편하다. (이후 마인드맵, 플로우차트 대신 다이어그램으로 이야기 할 예정)
참고로 Mermaid는 JavaScript 기반의 다이어그램 및 차트 작성 도구로, Markdown 문법을 사용하여 복잡한 다이어그램을 쉽게 만들고 수정할 수 있게 해주는 오픈소스 라이브러리라고 한다.
이것이 불편한 이유는 그림을 그려서 제작하는 것이 아니라 코드. 즉, 텍스트로 기입하면서 입력을 해야 하기 때문이다.
먼저 가장 기초적인 것부터 보자.
graph 시작을 의미한다. 이 뒤에 방향 명령어를 기입하면 해당 방향으로 다이어그램이 나열된다.
TD: 위에서 아래로 । BT: 아래에서 위로 । LR: 왼쪽에서 오른쪽으로 । RL: 오른쪽에서 왼쪽으로
그리고 그 다음은 선택사항인데 “subgraph” 라는 개념이 있다. 이 개념은 subgraph 하위의 내용을 특정 조건으로 그룹핑 해줄 수 있는 명령어라고 보면된다. 예를 들어서 자동차와 관련된 다이어그램을 만든다고 했을 때 세단, SUV 이런식으로 그룹화 하여 분류할 수 있게 되는 것이다.
다음은 노드이다. 이 노드는 키워드, 내용, 주제 등을 입력해 주면된다. 이때 노드는 괄호를 어떻게 사용하느냐에 따라서 그 형태를 다르게 표현할 수 있다.
기본 노드: A
둥근 노드: (A)
사각형 노드: [A]
마름모 노드: {A}
원형 노드: ((A))
다음은 노드와 노드를 연결해 주어야 한다. 예를 들어서 A - B 를 연결해 준다고 하면 A — > B 이렇게 화살표로 연결해 줄 수 있다. 이 연결하는 선은 점선, 실선으로 표현가능하며 머리, 꼬리의 형태를 다르게 가져갈 수 있기도 하다. 그리고 선 사이에 택스트를 입력할 수 있기도 하다.
--> : 일반 화살표
---o : 점선 화살표
-->|텍스트| : 텍스트 추가
-.- : 점선
그리고 박스의 색상, 텍스트의 색상도 지정할 수 있다
style : 노드 스타일 지정
fill : 채우기 색상
stroke : 테두리 색상
stroke-width : 테두리 두께
그리고 진짜 마인드맵처럼 사용할 수 있는 방법도 있다. 이 방법은 graph 보다 복잡하지도 않고 쉽게 이용할 수 있긴하다.
graph 대신에 mindmap 를 사용하면 된다. 그리고 root, sub 만으로도 해결할 수 있을 정도로 쉽다. 루트는 중심주제를 의미하며 sub 서브는 하위 또는 상세내용을 의미한다. sub 항목의 sub 를 생성하고자 한다면 tab 키를 눌러 상위 sub 에 종속시켜주면 된다.
이렇게 하면 노션에서도 쉽게(?)마인드맵, 플로우차트 등을 작성할 수 있게 된다. 다만 복잡하고 타이핑을 많이 쳐야 한다는 단점이 있다. 그래서 필자는 이 방법은 노션에서 바로 무언가를 보여주어야 하는 상황이 아니라면 이 방법을 사용하지 않는다. 필자가 사용하는 소프트웨어는 Mindnode 또는 EdrawMax 이다. 이 외에도 유사 프로그램들이 많으니 사용자에게 맞는 것을 찾아 쓰면 된다.
그럼에도 불구하고 이 방법을 이야기 하는 이유는 이러한 방법을 앎으로 인해서 노션의 사용을 조금 더 확장해서 사용할 수 있고, 원리와 과정을 이해함으로써 조금 더 논리적인 그러면서도 전체 프로세스를 짤 수 있는 능력을 기를 수 있기 때문이다.
