Mermaid Design Mermaid Design

소개

mermaid.design은 무료 온라인 Mermaid 다이어그램 편집기입니다. 왼쪽에 Mermaid 문법을 입력하면 오른쪽에 실시간으로 렌더링된 다이어그램이 표시됩니다. 모든 처리는 전적으로 브라우저에서 이루어지며, 다이어그램이 기기를 벗어나지 않습니다.

주요 기능

  • 실시간 미리보기: 입력하는 즉시 다이어그램이 다시 렌더링되며, 문법 유효성 검사와 오류 보고가 실시간으로 제공됩니다
  • 두 가지 렌더링 모드: 다이어그램을 선명한 SVG로 렌더링하거나, 코드 주석, 문서, 터미널에 붙여넣을 수 있는 ASCII 아트로 렌더링할 수 있습니다
  • 다이어그램 테마: 기본, 뉴트럴, 포레스트, 다크, 베이스를 포함한 Mermaid 테마를 클릭 한 번으로 적용할 수 있으며, 사용자 지정 배경색 또는 투명 배경도 지원합니다
  • ASCII 렌더링: 플로우차트와 시퀀스 다이어그램을 Unicode 또는 일반 ASCII 문자셋 기반의 텍스트 다이어그램으로 변환하며, 글꼴 크기를 조정할 수 있습니다
  • 이동 및 확대/축소: 드래그로 이동하고 Ctrl/⌘ + 스크롤로 확대/축소하며, 플로팅 툴바로 정밀하게 제어할 수 있습니다
  • 코드 편집기: Mermaid 문법 강조 기능을 갖춘 Monaco 기반 편집기(VS Code와 동일한 엔진)를 제공합니다
  • 템플릿: 플로우차트, 시퀀스, 클래스, 상태, ER, 간트, 파이 차트, Git 그래프, 마인드맵, 사용자 여정 템플릿이 내장되어 있습니다
  • 내보내기: 다이어그램을 SVG, PNG, JPG 또는 WebP로 1x, 2x, 4x 해상도로 다운로드하거나 일반 텍스트 ASCII로 내보낼 수 있습니다
  • 클라이언트 측 전용: 서버도 업로드도 없이 모든 것이 브라우저에서 로컬로 실행됩니다

지원되는 다이어그램 유형

플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 간트 차트, 파이 차트, Git 그래프, 마인드맵, 사용자 여정, C4 다이어그램, 타임라인, 요구사항 다이어그램 등 Mermaid 엔진이 지원하는 모든 유형을 사용할 수 있습니다.

피드백

도구에 대한 질문이나 제안이 있으시면 언제든지 문의해 주세요.