Obsidian - Mermaid

https://mermaid.js.org/intro/

About Mermaid | Mermaid

 

Mermaid는 그래프나 다이어그램을 그리는 도구이다.

페이지 소개에서 알 수 있듯, Mermaid는 별도의 기능이며 다른 어플리케이션에 병합할 수 있도록 설계되어 Obsidiand에서도 이 기능을 사용하기 위해 Mermaid를 병합하여 사용 중인 듯 하다.

 

Mermaid는 옵시디언에서 별도로 설치하거나 추가할 필요 없는 핵심 기능이다.

 

바로 본론으로 들어가자.

일단 obsidian에서 mermaid를 사용하려면 다음과 같이 작성해야한다.

```mermaid

{내용}

```

이 때 `는 백틱으로, 숫자 1 왼쪽에 위치한 ~표 기호 키를 shift를 누르지 않고 입력할 수 있다.

만약 Obisidan에서 코드 블럭을 사용하는 유저라면 익숙할 것이다.

 

```

{내용}

```

이 문법은 그냥 코드 블럭을 생성하는 것이며, 여기에 mermaid란 단어를 추가하면 mermaid 문법을 사용할 수 있다는 것이다.

---

마음 같아서는 이 글에 mermaid의 모든 문법을 사용해서 작성하고 싶지만, 그러기엔 mermaid 기능이 너무 크기 때문에 핵심적인 요소들만 설명하고 더 많은 기능을 원한다면 https://mermaid.js.org/ecosystem/tutorials.html 에서 확인하길 바란다.

 

필자의 경우 다음 문법을 90% 이상 사용한다. 필자의 경우엔 그냥 코드의 구조를 정리하기 위한 용도로만 사용하기 때문인데, 본인의 경우에 따라 원형 차트, 마인드맵, 타임라인 등등 꽤나 많은 많은 기능들이 존재하기 때문에 꼭 링크를 확인하길 바란다.

 

```mermaid
graph TD
	A[아침에 일어난다] --> B[세수한다]
	B --> C[양치한다]
	C --> D[밥 먹는다]
	C --> E
	D --> E[학교 간다]
	E --> School[공부한다]
	School --공부를 다 했는가?--> Home[집에 온다]
	Home --> 공부
    공부 --> A
    Home --> A
```

위 코드에서 graph는 그래프 형식으로 작성하겠다는 의미이며, 그 뒤에 TD는 Top Down의 약자이다. 만약 왼쪽에서 오른쪽으로 그래프를 그리고 싶다면 LR(Left Right)를 입력하면 되며 이 외의 상황도 동일하다.

 

graph 키워드는 다른 종류의 그래프를 사용하고 싶다면 이 부분을 교체하면 된다. 만약 간트차트를 사용하고 싶다면 gantt를 입력한다. 이 키워드들은 mermaid 튜토리얼 페이지에 설명되어있다.

 

노드

하나의 상태를 입력하기 위해서는 보통 알파벳 대문자로 입력한다.A, B, AA 등등이다.

 

그리고 대괄호를 열어 내용을 입력한다.A[아침에 일어난다.]이 것을 노드라고 말한다.

 

만약 원한다면 자신이 원하는 내용을 입력해도 된다.

Home --> 공부

가 있는데, 여기에서 '공부' 란 노드는 별도의 ID를 가지지 않고 그 자체가 상태로 인식된다. 그렇기 때문에 위 실행 결과를 보면 '집에 온다(Home)' 에서 '공부' 노드로 이동한 걸 볼 수 있다.

 

이미 정의된 노드(ex. A[아침에 일어난다.])를 다시 사용하고 싶다면 그냥 그 노드의 ID를 입력하면 된다.이것은 위 코드에서 볼 수 있듯 A를 먼저 정의했기 때문에 'Home'노드에서 바로 'A'노드로 연결이 가능하다.

 

그리고 노드의 스타일도 정의할 수 있다. 위 예시처럼 대괄호 한번만 사용하면 그냥 박스가 되지만 ([ 내용 ]) 이렇게 입력하면 둥근 노드를 만들 수 있다. 이것을 이용해서 플로우 차트를 만들 수도 있기 때문에 자세히 알아두면 좋다.

이것들은 꽤나 직관적이다. (( )) 은 원형, [( )] 는 DB, { }는 마름모, {{ }} 는 육각형, [/ \]는 사다리꼴이다. 관심이 있다면 사이트에서 확인해보자.

 

화살표

그리고 화살표의 경우 기본적으로 --> 를 사용한다. 이 때 주의할 것은 '-' 기호를 두번 입력해야한다. 한 개는 오류가 날 것이다.

만약 화살표 중간에 내용을 입력하고 싶다면 -- 내용 --> 이런식으로 입력한다.

이 기능은 상태를 표시할 때 Yes, No를 입력할 때 유용하다.

 

마찬가지로 화살표도 모양을 변경할 수 있다.

<-->은 양쪽 화살표, .->은 점선, ==> 은 굵은선,  --x는 끝에 x자가 달린 화살표 등등이다.

---

mermaid는 간단한 기능같지만 안에는 정말 많은 변형이 있어서 꼭 관심이 있다면 확인해보자.