Mermaid 다이어그램 편집·검사기

Mermaid 다이어그램 편집·검사기 사용 가이드

GitHub, 노션, 옵시디언은 ```mermaid 코드 블록을 그림으로 그려 주지만, 괄호 하나만 빠져도 'Syntax error'만 띄우고 어디가 틀렸는지 잘 알려 주지 않습니다. 이 검사기는 붙여 넣은 Mermaid 코드에서 흔한 실수를 줄 번호와 함께 찾아 줍니다.

첫 줄의 다이어그램 종류(flowchart, sequenceDiagram, classDiagram, erDiagram, gantt, mindmap, gitGraph 등 29가지)가 올바른지, flowchart에 TD·LR 같은 방향이 있는지, 문서 전체에서 [ ], ( ), { } 괄호와 큰따옴표의 짝이 맞는지 봅니다. 따옴표 안의 글자와 C>깃발] 같은 비대칭 모양은 괄호 검사에서 뺍니다.

검사 결과 아래에는 종류, flowchart의 연결선 수, 줄 수와 원본 코드가 함께 나옵니다. 그림을 그려 주지는 않으므로 최종 모양은 Mermaid 지원 편집기에서 확인하세요.

사용 방법

1. 1'Mermaid 코드' 칸에 ```mermaid 블록 안의 코드만 붙여 넣습니다. 펜스 줄은 빼세요.
2. 2'실행'을 누르면 '6행: [ 괄호가 닫히지 않았습니다' 같은 문제와 요약이 나옵니다.
3. 3알려 준 줄을 고친 뒤 다시 실행해 '통과'가 나오면 문서에 넣습니다.

flowchart
  A[Start] --> B{OK?}
  B -->|yes| C>깃발]
  B -- no --> D((원))
  D --> E["따옴표 (괄호)"]
  E --> F[열림

1행: 방향(TD, LR 등)이 없어 위→아래(TB)로 그립니다
6행: '[' 괄호가 닫히지 않았습니다
종류: flowchart · 연결선 5개 · 줄 6개

flowchart
  A[Start] --> B{OK?}
  B -->|yes| C>깃발]
  B -- no --> D((원))
  D --> E["따옴표 (괄호)"]
  E --> F[열림

이럴 때 쓰면 좋아요

• GitHub README의 Mermaid 그림이 'Syntax error'로 깨질 때
• 노션·옵시디언에 붙인 흐름도가 그려지지 않는 원인을 찾을 때
• 긴 클래스 다이어그램의 중괄호 짝을 확인할 때
• 다이어그램 종류 이름의 오타(flowchat 등)를 잡을 때

문제가 생겼을 때

활용 팁

• flowchart 방향은 TD(위→아래), LR(왼쪽→오른쪽)을 가장 많이 씁니다. 단계가 많으면 LR이 화면에 더 잘 맞습니다.
• 검사를 통과했는데도 그림이 안 나오면 Mermaid Live Editor(mermaid.live)에 붙여 세부 오류 메시지를 확인하세요.

자주 묻는 질문