Mermaid 차트 편집기

로컬에서 Mermaid 순서도, 시퀀스 다이어그램 등의 차트를 편집하고 엄격한 보안 모드로 미리 볼 수 있으며, SVG 또는 PNG을(를) 다운로드할 수 있습니다.

브라우저에서 로컬 처리

이 페이지는 공개 디렉터리 검사를 통과했습니다. JavaScript을 활성화하면 전체 기능을 사용할 수 있습니다.

사용 안내

Mermaid 차트 편집기 사용 방법

차트 소스 코드는 현재 브라우저에서만 분석 및 렌더링되며 업로드되지 않습니다. 렌더러는 엄격한 보안 모드를 사용합니다.

차트 소스 코드 입력
128 KiB 이하의 Mermaid 코드를 붙여넣고 기본, 중립, 포레스트 또는 다크 테마를 선택하세요.
렌더링 및 수정
렌더링을 클릭하여 격리된 미리보기를 확인하세요. 구문 오류가 발생하면 위치 또는 구문 분석 정보가 표시되므로 소스로 돌아가 수정할 수 있습니다.
차트 다운로드
라벨과 연결선을 확인한 후, 안전하게 정리된 SVG 또는 PNG을(를) 내보냅니다.

현재 사이트에 고정된 버전의 Mermaid 문법만 지원합니다. 실험적 기능, 이전 문법 및 서드파티 확장 기능은 호환되지 않을 수 있습니다.
엄격한 안전 모드는 HTML 태그, 클릭 콜백, 외부 링크 및 사용자 지정 스크립트를 제한하므로 일부 고급 상호 작용이 표시되지 않습니다.
소스 코드, 문장 수, 어휘 토큰, 체인 노드, 연결선 수 및 렌더링 후 SVG에는 모두 안전 상한이 적용되며, PNG 내보내기도 캔버스 크기의 제한을 받습니다.

click 명령이 실행되지 않는 이유는 무엇인가요?

이 도구는 엄격한 보안 모드로 실행되며, 로컬 미리보기의 보안 경계를 유지하기 위해 링크 콜백이나 스크립트를 실행하지 않습니다.

SVG와(과) PNG 중 어느 것을 선택해야 하나요?

SVG은 계속 편집하고 무손실로 확대·축소하는 데 적합하며, PNG은 SVG을 지원하지 않는 문서나 소셜 플랫폼에 더 적합합니다.

차트가 자동으로 저장되나요?

아니요. 소스 코드는 현재 페이지의 메모리에만 저장되므로 페이지를 떠나기 전에 복사하거나 다운로드하세요.