Mermaid 미리보기

핵심 개념

Mermaid 미리보기는 문서에 넣을 흐름도·시퀀스 다이어그램을 저장소에 커밋하기 전에 그릴 때 씁니다. jsDelivr mermaid 10을 동적 로드해 브라우저에서 SVG로 렌더링합니다. 소스는 서버로 전송되지 않습니다. 깃허브 마크다운과 문법이 거의 같지만 버전 차이로 일부 확장이 다를 수 있습니다.

클래스 다이어그램, 간트, ER 등 mermaid 10이 지원하는 유형은 대체로 시도할 수 있습니다. 아주 큰 그래프는 브라우저가 버거울 수 있습니다. 보안상 외부 이미지 링크나 HTML 삽입은 제한될 수 있습니다. 오류 메시지의 줄 번호를 보고 화살표·노드 ID를 고치면 됩니다.

예시

예시 flowchart TD에서 A 시작이 조건 B로 가고 Yes이면 완료, No이면 재시도인 그래프를 미리보기하면 박스와 마름모가 그려집니다. sequenceDiagram으로 참가자와 화살표를 적으면 시간 순 메시지가 보입니다. 노드 아이디에 공백이 있으면 문법 오류가 나니 영문 아이디와 대괄호 라벨을 나누세요. 시퀀스 다이어그램은 참가자 선언을 위에 모아 두면 화살표 줄이 짧아집니다. 문서에 넣을 때는 렌더가 성공한 소스만 복사해 버전 차이를 줄이세요. 같은 입력을 여러 번 시험할 때는 초기화 후 새로 붙여 이전 출력과 섞이지 않게 합니다. 공용 컴퓨터라면 작업이 끝난 뒤 입력란을 비워 원문이 모니터에 남지 않게 하세요. 브라우저 탭을 닫으면 방금 붙인 값도 함께 사라지며 서버에 삭제 요청을 보낼 필요는 없습니다. 버튼 이름과 칸 제목은 화면 위쪽 도구와 같으므로 글을 읽으며 그대로 따라가면 됩니다. 결과가 비어 있으면 필수 칸을 채웠는지, 오류 메시지가 숨겨져 있지 않은지 먼저 봅니다. 이 글은 사용법 안내이며 입력 데이터가 외부 저장소에 남는다는 뜻은 아닙니다. 모바일에서는 복사 버튼이 클립보드 권한을 물을 수 있으니 허용한 뒤 다시 눌러 주세요.