Mermaid 다이어그램 보기

• 그리는 곳은 이 기기입니다. 그리는 도구(Mermaid 12)는 이 사이트에서 받아 브라우저 안에서 돌립니다. 그림을 그리고 내려받는 동안 사이트 밖으로 요청을 보내지 않습니다.
• 쪽이 다 뜬 뒤에 그리는 도구를 받습니다. 글을 넣기 전에 미리 받기 시작하고, 아직 받는 중에 글을 넣으면 「그리기 도구를 받는 중입니다」가 나온 뒤 받자마자 그립니다.
• 글자 수는 50,000자까지입니다. 넘으면 그리지 않고 안내만 나옵니다. 글 칸의 글은 그대로 남습니다.
• 그림 안의 스크립트와 링크 동작은 막혀 있습니다. <script>나 click A call ... 같은 줄이 있어도 실행되지 않습니다. 글 안의 %%{init: ...}%% 설정 줄로도 이 보안 값은 바꿀 수 없습니다.
• 저장하지 않습니다. 글, 그림, 고른 바탕을 기기에 남기지 않고 주소에도 담지 않습니다. 새로 고친 뒤 글이 남아 보인다면 브라우저가 입력 칸을 되살린 것입니다. 공유 링크는 없습니다.
• 오류인 동안에는 내려받기와 크게 보기가 꺼집니다. 오류 상자 아래에 앞서 그린 그림이 흐리게 남지만, 지금 글의 그림이 아니므로 받을 수 없게 했습니다.
• 내려받는 파일 이름은 mermaid-20261029-1530.svg처럼 기기의 날짜와 시각이 들어갑니다.

SVG와 PNG의 차이

SVG 코드 복사는 SVG 파일에 든 글을 클립보드에 넣습니다. 편집기에 그대로 붙여 넣을 때 씁니다.

예시 넣기의 여섯 가지입니다. 아래 글을 그대로 넣으면 한국어 낱말이 들어간 그림이 나옵니다.

흐름도. 첫 줄 flowchart TD는 위에서 아래로 그린다는 뜻입니다. 대괄호는 네모, 중괄호는 마름모(갈림길)이고 -->가 화살표입니다.

flowchart TD
    A[주문 받음] --> B{재고 있음?}
    B -- 예 --> C[포장]
    B -- 아니요 --> D[입고 기다림]
    D --> B
    C --> E[배송]

순서도(시퀀스 다이어그램). participant 이름 as 표시 이름으로 참여자를 정하고, ->>는 실선 화살표, -->>는 점선(답) 화살표입니다.

sequenceDiagram
    participant C as 손님
    participant S as 가게
    C->>S: 주문
    S-->>C: 주문 확인
    S->>C: 배송 알림

간트 차트. dateFormat으로 날짜 모양을 정하고, 일 이름 :표지, 시작, 기간으로 적습니다. after a1은 a1이 끝난 다음이라는 뜻이고, milestone은 하루짜리 이정표입니다.

gantt
    title 이사 준비
    dateFormat YYYY-MM-DD
    section 준비
    집 알아보기 :a1, 2026-11-02, 7d
    계약 :after a1, 2d
    section 이사
    짐 싸기 :2026-11-16, 3d
    이삿날 :milestone, 2026-11-20, 0d

클래스 그림. 중괄호 안에 속성과 기능을 적고, 마지막 줄이 두 상자의 관계(회원 1명이 주문 여러 개)입니다. class Member["회원"]처럼 영어 이름에 한국어 표시 이름을 붙입니다.

classDiagram
    class Member["회원"] {
      +이름
      +가입일
      +로그인()
    }
    class Order["주문"] {
      +번호
      +합계()
    }
    Member "1" --> "*" Order

상태 그림. s1 : 접수로 상태에 표시 이름을 붙이고, [*]는 시작과 끝입니다.

stateDiagram-v2
    s1 : 접수
    s2 : 처리 중
    s3 : 보류
    s4 : 완료
    [*] --> s1
    s1 --> s2
    s2 --> s3
    s3 --> s2
    s2 --> s4
    s4 --> [*]

원그래프. 값을 합해 비율로 나눕니다. 위 예시는 50 · 25 · 10 · 15로 합이 100이라 그대로 백분율입니다.

pie title 한 달 지출
    "집세" : 50
    "식비" : 25
    "교통" : 10
    "그 밖" : 15

이 밖에도 Mermaid 12가 그리는 그림 종류는 모두 그려집니다. 예시와 이 설명 글은 위 여섯 가지만 다룹니다.

• 한글이 네모로 깨질 때. 이 도구는 쓰는 기기에 있는 한글 글꼴로 그립니다. 화면에서는 보이는데 내려받은 SVG를 다른 프로그램에서 열었을 때 네모로 나온다면, 그 프로그램이 쓰는 글꼴에 한글이 없는 것입니다. PNG로 받으면 글자가 그림으로 굳어 어디서나 같게 보입니다.
• ->와 -->. 흐름도에서 화살표를 ->로 쓰면 읽지 못합니다. -->로 고칩니다. 순서도에서는 반대로 ->>와 -->>를 씁니다. 그림 종류마다 화살표 문법이 다릅니다.
• 첫 줄이 그림 종류가 아닐 때. 맨 위의 설정 줄(---로 감싼 앞머리, %%{init: ...}%%)과 %% 주석 줄을 뺀 첫 줄이 flowchart TD, sequenceDiagram, gantt 같은 종류 이름이어야 합니다. 종류 이름은 대소문자를 가리므로 Flowchart는 읽지 못합니다.
• 오류 줄 번호. 「○줄을 읽지 못했습니다」의 번호는 Mermaid가 알려 준 줄입니다. 쉼표나 괄호가 빠진 경우 실제 틀린 자리는 그 줄 바로 위일 수 있습니다. 번호를 누르면 글 칸의 그 줄이 선택됩니다. 원래 오류 글 보기에는 Mermaid가 낸 영어 원문이 있어 검색할 때 씁니다.
• 글을 고치는 동안. 오류가 나면 앞서 그린 그림이 흐리게 남습니다. 글을 되돌려 문법이 맞아지면 오류 상자는 사라지고 그림이 다시 나옵니다.
• 인터넷이 끊겼을 때. 그리는 도구를 아직 받지 못했다면 「다시 시도」를 누릅니다. 한 번 받은 뒤에는 이미 그려 본 그림 종류를 그리는 데 인터넷이 필요하지 않습니다. 그림 종류마다 필요한 부분을 따로 받기 때문에, 처음 그리는 종류는 인터넷이 필요할 수 있습니다.
• fa:fa-... 아이콘. 아이콘 글꼴을 바깥에서 받지 않으므로 아이콘은 그려지지 않고 글만 나올 수 있습니다.
• 너무 큰 그림. PNG는 한 변이 8,000화소를 넘지 않게 배율을 줄여서 만듭니다.

넣은 Mermaid 글이 서버로 보내지나요?

아니요. 그림은 이 기기의 브라우저 안에서 그리고, 글은 어디에도 저장하지 않습니다. 사내 구조도나 서비스 이름이 들어 있어도 쪽을 닫으면 남지 않습니다.

GitHub에서 보이는 모습과 똑같나요?

같은 Mermaid 문법을 읽지만 판이 다를 수 있습니다. 이 도구는 Mermaid 12를 씁니다. GitHub나 위키가 더 오래된 판을 쓰면 새 그림 종류나 새 문법은 거기서 안 그려질 수 있습니다.

예시는 왜 한국어인가요?

한국어 낱말이 제대로 그려지는지 바로 보이도록 한국어로 썼습니다. 흐름도와 순서도는 A[주문 받음]처럼 영어 이름 뒤에 대괄호로 한국어 표시 이름을 붙이는 모양이 가장 안전합니다.

PNG 크기는 얼마인가요?

화면에 그려진 그림 크기의 2배입니다. 아주 큰 그림은 한 변이 8,000화소를 넘지 않게 줄입니다.

어두운 모드로 받으면 투명한가요?

아니요. PNG와 SVG 모두 고른 바탕색(밝게는 흰색, 어둡게는 짙은 회색)이 깔려 있습니다.