코드로 그리는 다이어그램

Diagram as Code

Mermaid 흐름도·시퀀스 다이어그램·파이 차트를 자체 파서와 배치 엔진으로 입력하는 대로 그립니다. 지원 문법을 그대로 밝히고 SVG·PNG로 내보냅니다.

왼쪽에 Mermaid 문법으로 적으면 오른쪽에 그림이 바로 그려집니다. 파서와 배치, 렌더러가 Mermaid 라이브러리가 아니라 이 사이트에서 직접 만든 것이라, 지원하는 문법을 페이지에 전부 적어 두었습니다. 다이어그램 세 종류와, 각각에서 읽는 구문이 정확히 무엇인지입니다.

🔒 브라우저 안에서만 처리diagrammermaidflowchartdocs

Mermaid 코드

미리보기

지원하는 문법 (이 밖의 문법은 줄 번호와 함께 오류로 알려 줍니다)

흐름도 — graph / flowchart

방향 TD·TB·LR·RL·BT
도형 [ ], ( ), ([ ]), [[ ]], [( )], (( )), > ], { }, {{ }}
선 -->, ---, -.->, -.-, ==>, ===
라벨 -->|글|, -- 글 -->, -. 글 .->, == 글 ==>
A --> B --> C, A & B --> C
subgraph 이름 [제목] … end (중첩 가능)
style, classDef, class, :::클래스
%% 주석, ; 구분

지원 안 함: click, linkStyle, direction, <-->·--o·--x 화살표, 마크다운 문자열

시퀀스 — sequenceDiagram

participant A as 이름, actor B
->>, -->>, ->, -->, -x, --x, -), --)
->>+B / ->>-B, activate / deactivate
Note left of · right of · over A,B
loop, alt / else, opt … end
autonumber

지원 안 함: par, critical, break, rect, box, create/destroy, links

파이 — pie

pie [showData] [title 제목]
"이름" : 값

클래스·상태·ER·간트·마인드맵 등 다른 다이어그램은 아직 그리지 못합니다. 간트 차트는 별도 도구가 있습니다.

사용 방법

예시에서 시작합니다
흐름도·시퀀스·파이마다 파서가 읽는 구문을 대부분 담은 예시가 있습니다. 문법 목록을 보며 새로 쓰는 것보다 예시를 고치는 편이 빠릅니다.
오류를 줄 번호로 읽습니다
지원하지 않는 문법은 줄 번호와 무엇이 잘못됐는지를 함께 알려 주며 거부합니다. 빈 화면을 놓고 어디가 문제인지 반씩 지워 가며 찾을 필요가 없습니다.
내보내거나 인쇄합니다
SVG는 글자를 선택할 수 있고 확대해도 깨지지 않습니다. 발표 자료나 메신저에는 2배로 뽑은 PNG가 안전합니다.

자주 묻는 질문

어떤 다이어그램을 그릴 수 있나요?

흐름도(graph / flowchart), sequenceDiagram, pie입니다. 클래스·상태·ER·간트·gitGraph·마인드맵 등은 애매하게 실패하지 않고 이름을 짚어 알려 줍니다. 간트 차트는 이 사이트에 별도 도구가 있습니다.

mermaid.live에서 되는 코드가 여기서는 안 됩니다

페이지에 적힌 목록 밖의 구문일 가능성이 큽니다. `click`, `linkStyle`, subgraph 안의 `direction`, `<-->`·`--o`·`--x` 화살표, YAML 설정 블록, 마크다운 문자열 같은 것들입니다. 오류가 어느 것인지 짚어 주고, 그 목록이 지원 범위의 전부입니다.