Markdown Flowchart 작성 가이드

Markdown Flowchart 작성 가이드

1. 사용 툴

Markdown에서 Flowchart(순서도)를 작성하려면 일반적인 Markdown 에디터뿐만 아니라, 추가적인 기능을 제공하는 도구가 필요합니다. 다음은 대표적인 Markdown 편집기 및 Flowchart 지원 툴입니다.

✅ Flowchart를 지원하는 Markdown 툴

사용 툴특징지원 여부

Typora	간편한 UI와 실시간 미리보기 지원	✅ Mermaid 지원
Obsidian	플러그인 확장을 통해 Mermaid 사용 가능	✅ 플러그인 필요
Mark Text	오픈소스 Markdown 편집기, Mermaid 지원	✅
VS Code	확장 플러그인으로 다양한 기능 추가 가능	✅ Markdown Preview Mermaid 지원
GitHub	.md 파일 내 Mermaid 지원 (Beta)	✅
Notion	기본적으로 Mermaid 지원하지 않음	❌
Joplin	오픈소스 노트 앱, Mermaid 지원	✅

---

2. 확장 설치

✅ VS Code에서 Mermaid 플러그인 설치 방법

1. VS Code 실행
2. 확장(Extensions) 탭 (Ctrl + Shift + X) 클릭
3. 검색창에 "Markdown Preview Mermaid Support" 입력
4. 설치(Install) 버튼 클릭
5. Ctrl + Shift + P → Markdown: Open Preview to the Side 실행

✅ 설치 후 .md 파일 내에서 Mermaid 문법을 사용해 Flowchart 작성 가능

---

3. 사용 문법

Markdown에서 Flowchart는 Mermaid.js를 사용하여 작성합니다.

📌 기본적인 Flowchart 문법

mermaid

복사편집

graph TD; A[시작] --> B[사용 툴 선택]; B --> C{확장 설치 필요?}; C -- Yes --> D[확장 설치 진행]; C -- No --> E[바로 사용 가능]; D --> E; E --> F[Markdown 문법 학습]; F --> G[사용 예제 작성]; G --> H[완료];

📌 방향 설정 옵션

방향 코드의미

TD	Top to Down (위 → 아래)
LR	Left to Right (왼쪽 → 오른쪽)
BT	Bottom to Top (아래 → 위)
RL	Right to Left (오른쪽 → 왼쪽)

---

4. 사용 예시 (이미지 포함)

✅ 간단한 Flowchart 예제

mermaid

복사편집

graph LR; A[사용자 입력] -->|Markdown| B(Flowchart 생성); B --> C{Mermaid 지원 여부}; C -- 지원함 --> D[Flowchart 출력]; C -- 지원 안 함 --> E[확장 설치 필요]; E --> F[Mermaid 확장 설치]; F --> D;

📌 결과 미리보기:

✅ 조건 분기 추가 예제

mermaid

복사편집

graph TD; A[문서 작성] --> B{Flowchart 필요 여부}; B -- Yes --> C[Mermaid 문법 사용]; B -- No --> D[일반 Markdown 작성]; C --> E[미리보기 확인]; D --> E; E --> F[파일 저장 및 공유];

📌 결과 미리보기:

---

결론

Markdown에서 Flowchart를 작성하려면 Mermaid.js 문법을 활용해야 하며, Typora, VS Code, Obsidian 같은 툴을 사용하면 쉽게 적용할 수 있습니다. 확장 기능이 필요할 경우, VS Code에서 Mermaid 플러그인을 설치하면 더욱 편리하게 활용 가능합니다. Flowchart를 활용하면 문서의 흐름을 시각적으로 표현할 수 있어 더욱 효과적인 문서 작성이 가능합니다.

📌 추천 도구: VS Code + Mermaid 플러그인
📌 추가 학습 자료: Mermaid 공식 문서