Mermaid Viewer

Live Preview

타이핑 중에 Mermaid 코드를 즉시 차트로 표시하여 수동 렌더링 단계를 없애고 빠른 반복을 위한 시각적 피드백을 간소화합니다.

AI‑Assisted Coding

“Generate with GPT‑4” 버튼은 자연어 설명을 Mermaid 문법으로 변환해 도표를 빠르게 만들 수 있도록 도와주며, 신규 사용자들의 학습 곡선을 줄여줍니다.

Smart Export

SVG, PNG, JPG, PDF 또는 Markdown 형식으로 도표를 내보낼 수 있고, DPI 제어와 테마 선택이 가능해 문서화나 발표용으로 고품질 자산을 제공합니다.

Smart Debugging

실시간으로 문법 오류를 강조 표시하고 자동 수정 제안을 제공해 코드 품질을 높이고 도표 작업 시 좌절감을 줄입니다.

Real‑time Collaboration

팀원들과 실시간 편집 링크를 공유해 동시에 편집하며 즉각적인 시각 업데이트를 가능하게 하여 복잡한 다이어그램 프로젝트를 위한 민첩한 협업을 지원합니다.

Privacy First

데이터는 브라우저에 로컬로 저장되며 외부 서버로 전송되지 않아 사용자 프라이버시를 보장하고 데이터에 민감한 워크플로우에 부합합니다.

No Signup

계정을 만들지 않아도 즉시 다이어그램을 만들 수 있어 편리함을 증대시키고 빠른 프로토타이핑을 위해 접근이 즉각적입니다.

• 학생: Mermaid Viewer를 온라인에서 무료로 사용해 학술 흐름도와 타임라인을 만들고, 가입 없이 즉시 미리보기합니다.
• 개발자: Mermaid Viewer VSCode 플러그인을 통합해 코드 편집기에서 직접 다이어그램을 렌더링하고 문서를 향상합니다.
• 프로젝트 매니저: Mermaid Viewer에서 고해상도 PNG 또는 SVG 형태로 가ント 차트와 Git 그래프를 무료로 내보내어 빠르게 공유합니다.
• 협업 팀: Mermaid Viewer 온라인에서 실시간 편집 링크를 공유해 상태 다이어그램을 공동 작성하고 실시간 협업을 지원합니다.

다이어그램을 저장하려면 어떻게 해야 하나요?

Mermaid Viewer는 사용자가 편집기에서 직접 작품을 다운로드할 수 있도록 해줍니다. 다이어그램을 만든 후 “Export” 버튼을 클릭하고 SVG, PNG 또는 PDF와 같은 형식을 선택합니다. 각 형식은 저장하기 전에 해상도, DPI, 라이트 또는 다크 테마를 사용자 정의할 수 있어 파일을 보관하거나 발표에 바로 사용할 수 있게 해줍니다.

팀과 다이어그램을 공유하려면 어떻게 해야 하나요?

다이어그램을 공유하려면, Mermaid Viewer가 생성한 고유한 공유 링크를 복사하면 됩니다. 이 링크를 이메일, 채팅 또는 협업 플랫폼에 붙여넣습니다. 링크를 가진 수신자는 브라우저에서 다이어그램을 열어볼 수 있고, 권한이 부여된 경우 편집하거나 원하는 형식으로 다운로드할 수 있으며, 설치가 필요 없습니다.

Mermaid가 지원하는 다이어그램 종류는 무엇인가요?

Mermaid Viewer는 완전히 Mermaid와 호환되는 광범위한 다이어그램 종류를 지원합니다. 흐름도, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 가antt 차트, 파이 차트, 요구사항 다이어그램, Git 그래프, C4 다이어그램, 마인드 맵, 타임라인 다이어그램 등이 포함됩니다. 각 종류는 표준 Mermaid 문법을 따르며, 편집기에서 즉시 렌더링됩니다.

설치가 필요하나요?

온라인 Mermaid Viewer를 사용하려면 설치가 필요하지 않습니다. 모든 렌더링, 편집, 내보내기 기능은 웹 브라우저 안에서 완전히 실행되며 로컬 편집기나 플러그인은 필요 없습니다. 사용자는 Mermaid Viewer 웹사이트에 접속하기만 하면 Windows, macOS, Linux, 모바일 등 어느 기기에서도 편집기에 접근할 수 있습니다.

고해상도 다이어그램을 내보내려면 어떻게 해야 하나요?

고해상도 내보내기는 “Export” 옵션을 선택하고 SVG, PNG 또는 PDF와 같은 형식을 고르면 달성됩니다. 편집기는 DPI 설정을 조정하고 라이트 또는 다크 모드를 선택해 브랜드나 프레젠테이션 요구에 맞출 수 있습니다. 프리미엄 플랜에서는 고해상도 PNG가 워터마크 없이 제공되며, JPG, SVG 등 추가 형식도 이용 가능합니다.

실시간으로 다이어그램을 공동 작업할 수 있나요?

Mermaid Viewer는 실시간 협업 도구를 제공합니다. 라이브 편집 링크를 보내면 여러 사용자가 동시에 같은 다이어그램을 편집할 수 있습니다. 변경사항은 모든 참여자에게 즉시 반영되어 버전 충돌을 없애며, 공유된 아키텍처나 프로세스 다이어그램에서 팀워크를 효율화합니다.

내 데이터가 서버에 저장되나요?

Mermaid Viewer는 개인정보 보호를 최우선으로 설계되었습니다. 모든 다이어그램 데이터와 코드는 사용자 브라우저 세션 내부에 머물며, 사용자가 유료 플랜의 버전 기록 기능을 통해 다이어그램을 저장하도록 명시적으로 선택하지 않는 한, 플랫폼은 사용자 생성 콘텐츠를 저장하지 않습니다.

VS Code에서 Mermaid Viewer를 어떻게 사용할 수 있나요?

Mermaid Viewer는 공식 확장 프로그램을 통해 VS Code와 통합됩니다. 설치 후, 확장 프로그램은 편집기 내에서 Mermaid 다이어그램을 바로 미리 볼 수 있게 해주며, 입력할 때 실시간으로 미리 보기 창이 업데이트됩니다. 또한 여러 형식으로 내보내기를 지원하고, 온라인 플랫폼과 동일한 AI 생성 기능을 활용할 수 있습니다.

Mermaid Viewer는 Mermaid 코드를 작성하고, 즉시 라이브 미리보기를 확인하며, 다이어그램을 공유하고 SVG/PNG/Markdown으로 내보낼 수 있는 온라인 다이어그램 편집기입니다. 등록 없이 바로 이용할 수 있습니다.

• 편집 창에 Mermaid 문법을 붙여넣거나 입력하면 오른쪽 미리보기 영역에 입력과 동시에 다이어그램이 렌더링되어 즉시 시각화됩니다.
• 「Generate with GPT‑4」 버튼을 사용하면 자연어 설명을 Mermaid 코드로 변환할 수 있습니다. 생성된 결과를 직접 편집하거나 수동으로 정제할 수 있습니다.
• Export 패널에서 테마와 DPI 설정을 적용합니다. 라이트 또는 다크 모드를 선택하고 SVG 또는 PNG 해상도를 지정한 뒤 「Export」를 클릭하면 이미지를 다운로드할 수 있습니다.
• 「Share」 버튼을 클릭하여 다이어그램을 공유합니다. 링크나 임베드 코드를 복사해 협업자가 공동 편집하거나 라이브 다이어그램을 볼 수 있도록 합니다.
• 오프라인 또는 로컬 서버에서 작업 중이라면 Windows, macOS, Linux용 Mermaid Viewer 앱을 다운로드하세요. 바이너리를 실행하고 동일한 편집 인터페이스를 사용합니다.
• 구문 하이라이트와 자동 교정 제안을 실시간으로 검토합니다. 에러가 편집기에 깜빡이며, 내보내기 전에 해결할 수 있습니다.