Mermaid 순서도 변환기

Mermaid 순서도(flowchart) 문법으로 적은 원문을 SVG·PNG 그림으로 바꿉니다. 변환은 이 브라우저 안에서만 이루어지고 입력한 내용은 서버로 전송되지 않습니다.

Mermaid 프로젝트와 무관한 독립 구현이며 flowchart 문법의 일부만 읽습니다. 읽는 범위는 아래 표에 있고, 읽지 못한 부분은 줄 번호와 이유를 알려 줍니다.

노드 5개 · 간선 4개 · 서브그래프 0개

미리보기
통과오류원문 입력문법 검사배치 계산줄 번호와 이유 표시SVG·PNG 출력
PNG 배율
색

PNG 의 글꼴은 사용 중인 기기의 한글 글꼴을 따릅니다. 글꼴까지 같게 쓰려면 SVG 를 받으세요.

사용법

  1. 원문 입력: 입력창에 Mermaid flowchart 원문을 붙여 넣거나 예제를 불러옵니다. 입력은 이 브라우저에만 남습니다.
  2. 미리보기 확인: 입력하는 즉시 그림이 다시 그려집니다. 문법이 틀리면 몇 번째 줄이 문제인지 알려 주고, 마지막으로 그린 정상 그림은 그대로 둡니다.
  3. 내보내기: SVG 는 크기가 달라져도 선이 깨지지 않아 문서·발표 도구에 적합하고, PNG 는 배율을 1~3배로 골라 받습니다. 배경은 투명이 기본이고, 색은 화면의 라이트·다크 중 원하는 쪽으로 고를 수 있습니다.

지원하는 문법

Mermaid 의 flowchart 중 실제로 자주 쓰는 부분만 읽습니다. 읽지 않는 표기를 만나면 그 줄을 지목해 알려 주고, 색 지정 줄은 무시하되 어느 줄을 무시했는지 알려 줍니다.

구분읽는 표기읽지 않는 표기
도표 종류flowchart·graph, 방향 TD·TB·LR·RL·BT(RL·BT 는 배치를 뒤집어 그립니다)시퀀스·클래스·상태·간트 등 순서도가 아닌 도표
노드 이름영문·숫자·밑줄과 한글 등의 글자(시작 --> 끝 처럼 괄호 없이 써도 됩니다)하이픈이 든 이름, A@{ shape: ... } 속성 문법
노드 모양[ ]·( )·([ ])·(( ))·{ }·{{ }}·[( )]·[[ ]]·> ] 아홉 가지, 따옴표로 감싼 문구, <br/> 줄바꿈그 밖의 모양, 마크다운 문자열
간선-->·---·-.->·==>, 양방향 <-->·<-.->·<==>, 라벨 -->|문구|·-- 문구 -->, 이어 쓰기 A --> B --> C, 묶음 A & B --> C--o·--x·~~~, 간선 id
서브그래프subgraph ... end, 중첩서브그래프 이름을 간선 끝점으로 쓰기, 서브그래프 안의 direction
스타일읽지 않고 줄 번호와 함께 알려 줍니다(style·classDef·class·linkStyle·click·:::)색 지정 전반(그림의 색은 사이트의 라이트·다크 테마색을 따릅니다)

노드가 많고 간선이 얽힌 큰 순서도는 Mermaid 공식 도구와 배치가 달라질 수 있습니다. 이 변환기는 간선을 따라 가장 긴 경로로 층을 정하는 단순한 배치를 쓰며, 간선 교차를 줄이는 계산은 하지 않습니다.

예제

각 예제는 이 페이지를 만들 때 같은 렌더러로 그린 그림입니다. 편집기에서 열면 원문을 고쳐 가며 바꿔 볼 수 있습니다.

기본 흐름

위에서 아래로 흐르는 가장 단순한 형태입니다. 마름모는 갈림길, 둥근 양끝은 시작과 끝에 씁니다.

통과오류원문 입력문법 검사배치 계산줄 번호와 이유 표시SVG·PNG 출력
flowchart TD
  A[원문 입력] --> B{문법 검사}
  B -->|통과| C[배치 계산]
  B -->|오류| D[줄 번호와 이유 표시]
  C --> E([SVG·PNG 출력])

가로 배치와 간선 라벨

한글 이름을 괄호 없이 써도 노드가 됩니다. 점선·굵은 선과 원통·서브루틴 같은 모양도 읽습니다.

HTTP조회캐시결과요청서버데이터베이스캐시응답
flowchart LR
  요청 -->|HTTP| 서버
  서버 -->|조회| DB[(데이터베이스)]
  서버 -.->|캐시| 캐시[[캐시]]
  DB ==>|결과| 서버
  서버 --> 응답((응답))

서브그래프

관련된 노드를 상자로 묶습니다. 서브그래프끼리 겹치지 않게 열을 나눠 배치합니다.

브라우저 안사용자원문 입력렌더러SVG 미리보기SVG·PNG 파일
flowchart TD
  사용자([사용자]) --> 입력
  subgraph 브라우저[브라우저 안]
    입력[원문 입력] --> 변환[렌더러]
    변환 --> 미리보기[SVG 미리보기]
  end
  미리보기 --> 파일([SVG·PNG 파일])

되돌아가는 간선과 양방향

재시도처럼 앞 단계로 돌아가는 간선은 옆으로 우회해 그립니다. <--> 는 양쪽에 화살촉을 답니다.

아니오예요청 전송성공?잠시 대기완료기록
flowchart TD
  A[요청 전송] --> B{성공?}
  B -->|아니오| C[잠시 대기]
  C --> A
  B -->|예| D[완료]
  D <--> E[(기록)]

자주 묻는 질문

입력한 내용이 서버로 전송되나요? 아니요. 변환은 모두 이 브라우저 안에서 이루어집니다. 마지막으로 입력한 원문 한 건만 이 브라우저의 로컬 저장소에 남아 다시 열었을 때 이어서 쓸 수 있고, 비우기 단추나 브라우저의 사이트 데이터 삭제로 지울 수 있습니다.

Mermaid 공식 도구와 결과가 다른 이유는 무엇인가요? Mermaid 라이브러리를 쓰지 않고 flowchart 문법의 일부를 직접 읽어 배치하기 때문입니다. 노드 배치 방식이 단순하고, style·classDef 같은 색 지정을 읽지 않습니다. 지원 범위는 위 표에 정리했습니다.

Mermaid 프로젝트와 관계가 있나요? 없습니다. Mermaid 는 Mermaid 프로젝트의 도표 문법 이름이고, 이 변환기는 그 문법의 일부를 읽도록 따로 구현한 것입니다.

PNG 의 글꼴이 화면과 다른 이유는 무엇인가요? SVG 를 이미지로 바꿀 때는 웹 페이지의 글꼴을 쓸 수 없어 사용 중인 기기에 설치된 한글 글꼴로 그립니다. 글꼴까지 같게 쓰려면 SVG 로 받아 브라우저나 편집기에서 여세요.

큰 그림을 PNG 로 받으면 배율이 낮아지는 이유는 무엇인가요? 브라우저가 한 번에 그릴 수 있는 이미지 크기에 한도가 있어 한도를 넘는 배율은 자동으로 낮추고 안내를 보여 줍니다. SVG 는 이 한도와 무관합니다.

관련 글