프로젝트 목록
Next.jsTypeScriptTailwind CSSVercel
Mermaid Interactive Guide
Mermaid 다이어그램 작성법을 배우는 인터랙티브 가이드
기획, 콘텐츠 작성, 프론트엔드 개발|2025.11
문제 정의
Mermaid.js 공식 문서가 영어로만 제공되고, 실습 환경이 분리되어 학습 효율이 낮았습니다.
해결 방법
코드 입력과 동시에 다이어그램이 렌더링되는 인터랙티브 학습 가이드를 한국어로 제작했습니다.
주요 기능
- 1실시간 Mermaid 다이어그램 렌더링
- 2다이어그램 유형별 가이드 (Flowchart, Sequence, Class 등)
- 3코드 예제 복사 기능
- 4한국어 설명 및 팁