MermanDraw - 머메이드 다이어그램 에디터

MermanDraw 메인 화면

MermanDraw는 AI 챗봇이 생성한 Mermaid 코드를 붙여넣으면 즉시 세련된 다이어그램으로 렌더링해주는 무료 온라인 편집기입니다. “Mermaid diagrams, but actually beautiful”이라는 슬로건 아래, 개발자와 비개발자 모두 손쉽게 다이어그램을 시각화하고 공유할 수 있는 도구를 지향합니다.

🔗 서비스 바로가기

📸 스크린샷

MermanDraw 랜딩 페이지
에디터 화면 공유 모달

🧩 주요 기능

  • 실시간 미리보기: 입력 시 300ms 디바운싱으로 즉각적인 다이어그램 렌더링
  • 19가지 다이어그램 타입: 플로우차트, ERD, 시퀀스, 간트 차트 등 지원
  • 7가지 테마: Clean, Dark, Minimal, Pastel, Neon, Paper, Mono — 용도에 맞는 스타일 선택
  • 레이아웃 간격 슬라이더: 경쟁 서비스에 없는 차별화 기능 — Node Spacing / Rank Spacing을 GUI로 직접 조절
  • 고해상도 내보내기: SVG, PNG 형식으로 다운로드
  • 익명 공유: 계정 없이 링크로 다이어그램 공유 (180일 보관)
  • 자동 저장 히스토리: 변경 내역 자동 저장 및 복원

💡 핵심 기술

  • Astro: 정적 사이트 생성(SSG) 기반, SEO 최적화 및 빠른 초기 로딩
  • React Islands: CodeMirror 에디터, 다이어그램 렌더러 등 인터랙티브 컴포넌트에만 부분 하이드레이션 적용
  • Cloudflare Pages: 글로벌 CDN을 통한 정적 페이지 배포
  • Cloudflare Workers + Hono.js: 서버리스 API 레이어 — 다이어그램 저장, 공유, 내보내기 처리
  • Cloudflare D1: 다이어그램 데이터 저장 (SQLite 기반 서버리스 DB)
  • Cloudflare KV: IP 기반 요청 Rate Limiting
  • Cloudflare R2: SVG 파일 오브젝트 스토리지
  • Mermaid.js: 클라이언트 사이드 전용 다이어그램 렌더링 엔진
  • CodeMirror 6: 코드 에디터 UI
  • Tailwind CSS: 반응형 UI 디자인