Mermaid 다이어그램 임베드
Mermaid 다이어그램을 만들고 어떤 웹사이트에나 임베드할 수 있는 공유 가능한 iframe 코드를 받으세요. 무료, 즉시, 계정 불필요.
Mermaid 다이어그램 임베드
Mermaid 다이어그램을 만들고 어떤 웹사이트에나 임베드할 수 있는 공유 가능한 iframe 코드를 받으세요. 무료, 즉시, 계정 불필요.
당신의 Mermaid 코드
실시간 미리보기
임베드 코드
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>개발자용
이 에디터를 사용하지 않고 프로그래밍 방식으로 임베드 URL을 생성할 수 있습니다. 다이어그램 코드는 URL 안전한 base64로 인코딩됩니다.
URL 형식
https://mermaideditor.com/embed?code={encoded}&theme={theme}인코딩 방법
// JavaScript const encoded = btoa(encodeURIComponent(mermaidCode)) const embedUrl = `https://mermaideditor.com/embed?code=${encoded}&theme=default` // Python import base64, urllib.parse encoded = base64.b64encode(urllib.parse.quote(mermaid_code).encode()).decode() embed_url = f"https://mermaideditor.com/embed?code={encoded}&theme=default"지원되는 테마: default · dark · forest · neutral
Mermaid 다이어그램 임베드 방법
위 에디터에 Mermaid 다이어그램 코드를 작성하세요
생성된 iframe 코드를 원클릭으로 복사하세요
웹사이트, 블로그 게시물 또는 문서 페이지에 붙여넣으세요
사용 사례
GitHub 및 GitLab
위키 페이지, 이슈 설명 또는 프로젝트 문서에 실시간 다이어그램을 임베드하세요.
문서 사이트
Confluence, Notion 또는 모든 HTML 기반 문서 플랫폼에 인터랙티브 다이어그램을 추가하세요.
블로그 게시물
아키텍처 다이어그램, 플로우차트, 시퀀스 다이어그램으로 기술 기사를 풍부하게 만드세요.
내부 위키
임베드된 다이어그램으로 팀 지식 베이스를 시각적이고 최신 상태로 유지하세요.
자주 묻는 질문
임베드 기능은 무료인가요?
네, 완전히 무료입니다. 사용 제한이 없고, 계정이 필요 없으며, 생성된 iframe URL은 영구적으로 작동합니다.
어떤 브라우저가 임베드된 다이어그램을 지원하나요?
임베드 뷰어는 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 작동합니다. 표준 HTML5와 JavaScript를 사용합니다.
iframe 크기를 사용자 정의할 수 있나요?
네 — 생성된 iframe 코드의 width와 height 속성을 편집하여 레이아웃에 맞추기만 하면 됩니다. 반응형으로 만들기 위해 CSS를 추가할 수도 있습니다.