[Mermaid] Markdown에 쉽게 다이어그램 그려넣는 방법

taez·2024년 1월 4일

mermaid

짧은 글

목록 보기

3/4

📋 Summary

Mermaid 간단 소개 및 사용 예시

📝 Details

Mermaid는 다양한 다이어그램과 차트를 텍스트와 코드로 간단하게 표현할 수 있게 하는 tool이다.
Javascript 기반이며 Markdown에 익숙하다면 쉽게 적용할 수 있다.

Github, Notion, Obsidian 등 Mermaid를 지원하는 Markdown에서 사용할 수 있지만 velog는 지원하지 않는다..

Mermaid 홈페이지에 표현 가능 차트와 사용방법이 나와있는데 상당히 다양하다. 플로우차트, 시퀀스 다이어그램부터 시작해서 클래스 다이어그램, Git 다이어그램, ERD, 간트, pie 차트 등등..

Git diagram 예시

```mermaid
---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```

이전 글에 사용한 이미지도 Mermaid로 만들었는데 velog에서는 지원을 하지 않으므로! Obsidian에서 작성 후 이미지만 가져왔다.

아래처럼 단순한 노드 부터

```mermaid
graph LR
	subgraph Just
	a[5]
	end
```

조금 더 디테일한 차트도...

```mermaid
graph LR
	subgraph m1[Maybe]
		direction LR
		subgraph Just
		j[5]
		end
		subgraph Nothing
		x[_]
		end
	end
	Just ~~~ Nothing
	subgraph m2[Maybe]
		direction LR
		subgraph Just2[Just]
		j2[7]
		end
		subgraph Nothing2[Nothing]
		x2[_]
		end
	end
	Just2 ~~~ Nothing2
	m1 -- "add 2" --> m2
```