Mermaid 다이어그램 미리보기
Mermaid 코드를 입력해 flowchart, sequenceDiagram 같은 다이어그램을 실시간 SVG 미리보기로 확인합니다.
다이어그램 문서화
Mermaid 코드를 SVG 다이어그램으로 바로 확인
Mermaid 다이어그램 미리보기는 README, 위키, 설계 문서에 넣을 Mermaid 문법을 브라우저에서 즉시 렌더링하는 도구입니다.
flowchart, sequenceDiagram, classDiagram, stateDiagram처럼 문서 작업에서 자주 쓰는 Mermaid 문법을 입력하면 오른쪽에서 SVG 결과를 확인할 수 있습니다.
문법이 잘못되면 미리보기 영역에 오류 상태와 원문 코드가 함께 표시되어 어느 부분을 고쳐야 하는지 바로 확인할 수 있습니다.
렌더링된 SVG 또는 원문 Mermaid 코드를 복사해 README, 이슈, 기술 문서 작성 흐름에 이어 사용할 수 있습니다.
어디에 쓰나요?
서비스 흐름, API 시퀀스, 상태 전이, 간단한 아키텍처 구조를 문서에 넣기 전에 빠르게 확인할 때 사용합니다.
예제를 바로 넣을 수 있나요?
입력창 상단에서 flowchart, sequenceDiagram, classDiagram, stateDiagram 예제를 골라 즉시 채울 수 있습니다.
오류는 어떻게 보이나요?
Mermaid 렌더링에 실패하면 오류 메시지와 원문 코드 블록을 같이 보여줘 문법을 수정하기 쉽습니다.
무엇을 복사하나요?
SVG 복사는 렌더링된 결과를, 원문 복사는 입력한 Mermaid 코드를 클립보드에 복사합니다.
Mermaid 렌더러는 외부 CDN에서 불러오며, 입력 내용은 브라우저 안에서만 처리됩니다.
Mermaid 다이어그램 미리보기 Mermaid 다이어그램 미리보기 작업 영역
사용 방법
- 1 왼쪽 입력창에 Mermaid 문법을 작성하거나 붙여넣습니다.
- 2 예제가 필요하면 입력창 상단에서 flowchart, sequenceDiagram, classDiagram, stateDiagram 중 하나를 선택해 넣습니다.
- 3 오른쪽 미리보기에서 SVG 다이어그램 또는 오류 메시지를 확인합니다.
- 4 결과가 맞으면 SVG 복사 또는 원문 복사 버튼으로 필요한 내용을 클립보드에 복사합니다.
대표적인 사용 사례
- README용 flowchart 미리보기
- API 호출 흐름 sequenceDiagram 확인
- 상태 전이 또는 클래스 관계 다이어그램 초안 검토
자주 묻는 질문
어떤 Mermaid 다이어그램을 미리볼 수 있나요?
Mermaid 렌더러가 지원하는 flowchart, sequenceDiagram, classDiagram, stateDiagram 등 일반적인 Mermaid 문법을 SVG로 렌더링합니다.
문법 오류가 있으면 어떻게 표시되나요?
렌더링이 실패하면 미리보기 영역에 오류 상태를 표시하고, 입력한 원문 코드를 코드 블록으로 함께 보여줍니다.
입력한 다이어그램 코드가 서버로 전송되나요?
아니요. 이 도구는 클라이언트 전용 도구이며 입력한 Mermaid 코드는 브라우저에서만 처리됩니다.