도구·사이트 목록

Mermaid Live Editor

웹사이트 · 개발·데이터

텍스트로 쓴 흐름을 다이어그램으로 바꾸기

Mermaid 문법을 입력하면 순서도와 시퀀스 다이어그램 등을 미리 볼 수 있는 편집기입니다. 그림의 구조를 텍스트로 관리하고 수정할 수 있습니다.

  • 텍스트 기반 다이어그램
  • 실시간 미리보기·내보내기

어떤 때 쓰면 좋을까요?

문서나 GitHub 저장소에 구조 설명을 남길 때 그림 파일만 관리하면 수정 내역을 추적하기 어렵습니다. Mermaid는 단계와 관계를 텍스트로 표현하므로 문서와 함께 관리하기 좋아요.

기본 예제를 선택하고 노드 이름과 연결 방향을 바꿔보세요. 문법 오류가 나면 작은 구간부터 확인하면 됩니다. AI가 작성한 Mermaid도 편집기에 넣어 실제로 그려지는지 검토할 수 있습니다.

이렇게 써보세요

API 요청이 브라우저, 서버, 데이터베이스를 거치는 순서를 시퀀스 다이어그램으로 작성하세요. 미리보기에서 순서를 확인하고 문서에 코드를 함께 남깁니다.

얻는 결과재편집 가능한 다이어그램 코드와 이미지

사용 순서

  1. 도식 유형과 예제를 선택합니다

  2. 텍스트로 단계와 관계를 작성합니다

  3. 미리보기의 오류를 고치고 내보냅니다

사용할 때 알아두세요

Mermaid 문법이 필요합니다. 문법 버전과 대상 문서 도구의 지원 범위를 확인하세요.

Mermaid Live Editor 접속하기

제작자 소개 · 2026-10-04 확인 · 기능·요금은 제작자의 최신 안내를 확인하세요.