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

MermanDraw는 AI 챗봇이 뽑아 준 Mermaid 코드를 붙여넣으면 바로 보기 좋은 다이어그램으로 그려 주는 무료 온라인 편집기입니다. 슬로건은 “Mermaid diagrams, but actually beautiful” - 개발자든 아니든 다이어그램을 그리고 링크로 공유하는 데 막힘이 없게 만들었습니다.

서비스 바로가기

스크린샷

주요 기능

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

사용 기술

• Astro: 정적 생성으로 첫 로딩과 SEO 확보
• React Islands: CodeMirror 에디터·다이어그램 렌더러처럼 상호작용이 있는 부분만 하이드레이션
• Cloudflare Pages: 정적 페이지 배포
• 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