Mermaid 에디터: 마크다운으로 다이어그램 그리기

Mermaid를 쓰면 텍스트 몇 줄이 다이어그램이 됩니다. Markdown Preview Editor는 Mermaid 에디터로도 쓸 수 있습니다. 마크다운 문서에 다이어그램 코드를 입력하면 미리 보기가 입력하는 대로 그려 줍니다. 별도의 다이어그램 도구와 달리 다이어그램이 주변 글과 함께 있으므로, 설계 문서나 README, 수업 계획도 파일 하나로 관리할 수 있습니다.

Mermaid 다이어그램이란?

Mermaid 다이어그램은 일반 텍스트로 기술한 도표입니다. 상자와 화살표를 끌어다 놓는 대신 A --> B 같은 줄을 쓰면 Mermaid가 배치를 알아서 정합니다. 순서도, 시퀀스 다이어그램, 간트 차트, 상태 다이어그램, 클래스 다이어그램, 파이 차트, 마인드맵 등을 지원합니다.

텍스트이므로 고치기 쉽고, 버전 관리에 넣을 수 있으며, diff에서도 변경 내용이 보입니다. GitHub, GitLab, Obsidian과 여러 문서화 도구가 Mermaid를 렌더링하므로 같은 코드를 어디서나 쓸 수 있습니다.

다이어그램 그리는 방법

1. 에디터를 엽니다. 온라인 에디터로 이동합니다.
2. Mermaid 블록을 추가합니다. 백틱 세 개 뒤에 mermaid를 입력하거나, 고급 편집기 도구 모음 줄의 Mermaid 다이어그램 버튼으로 템플릿을 넣습니다.
3. 다이어그램을 씁니다. 오른쪽 미리 보기가 입력하는 동안 다시 그려 주므로, 빠진 화살표나 괄호를 바로 알아챌 수 있습니다.
4. 저장하거나 공유합니다. 문서를 .md로 저장하거나, HTML로 내보내거나, PDF로 인쇄하세요. 다이어그램도 함께 들어갑니다.

첫 순서도 예제입니다.

markdown```mermaid
flowchart LR
  A[아이디어] --> B{할 만한가?}
  B -- 예 --> C[만든다]
  B -- 아니요 --> D[보류한다]
```

사용할 수 있는 다이어그램 종류

종류별 전체 문법과 복사해 쓰는 예제는 마크다운에서 Mermaid 다이어그램 그리기 가이드에 정리해 두었습니다.

이 에디터를 쓰는 이유

• 실시간 미리 보기. 입력하는 동안 다이어그램이 갱신되고, 문법 오류도 바로 드러납니다.
• 글과 다이어그램을 한곳에. 설명, 수식, 순서도를 마크다운 파일 하나에 씁니다.
• 프라이버시. 다이어그램은 브라우저에서 그려지며, 코드가 서버로 전송되지 않습니다.
• 무료 오픈 소스. 계정이 필요 없고, 다이어그램 개수 제한도 없습니다.

제한 사항

• 다이어그램 하나만 PNG나 SVG로 내려받는 기능은 없습니다. 다이어그램은 문서의 일부로 HTML 내보내기와 PDF에 포함됩니다. 이미지 파일이 따로 필요하면 Mermaid 공식 도구로 내보낼 수 있습니다.
• 사용자 지정 테마와 노드별 스타일은 제한적입니다. 다이어그램은 라이트 또는 다크 테마에 맞춘 깔끔한 기본 스타일로 표시됩니다.
• 다이어그램은 코드로 작성하며, 끌어다 놓는 시각적 편집은 지원하지 않습니다.

다이어그램이 들어 있는 마크다운 파일을 보기만 하려면 마크다운 뷰어를 쓰거나 마크다운 에디터 홈으로 돌아가세요.