본문 바로가기

계산기 정보

간트차트 Mermaid 변환 무료 — 그려서 코드 자동 생성, GitHub·Notion에 바로 붙여넣기

GitHub README에 프로젝트 일정을 넣으려는데, Mermaid 코드를 직접 써야 한다는 걸 알았습니다.

gantt부터 시작해서 dateFormat YYYY-MM-DD, section, 작업마다 날짜 하나씩 타이핑... 일정 관리보다 코드 작성에 시간을 더 쓰고 계신가요?

마우스로 그린 간트차트를 Mermaid 코드로 자동 변환하는 무료 도구를 소개합니다. GitHub, GitLab, Notion, Confluence에 바로 붙여넣기 가능합니다.

이런 분들에게 딱 맞습니다

1

GitHub·GitLab 사용하는 개발자 — README나 Wiki에 프로젝트 로드맵을 넣고 싶은데 Mermaid 문법이 낯선 분. 시각 편집기에서 그리면 코드가 자동 생성됩니다.

2

Confluence·Notion으로 문서 쓰는 PM·기획자 — 프로젝트 일정을 마크다운 기반 문서에 넣어야 할 때. 가입 없이 바로 간트차트를 Mermaid로 내보낼 수 있습니다.

3

Mermaid 코드를 시각으로 편집하고 싶은 분 — 기존에 Mermaid 코드가 있는데 수정하기 불편할 때. 코드를 붙여넣으면 시각 편집기로 불러와 드래그로 수정할 수 있습니다.

4

Docs-as-Code 방식으로 일하는 팀 — 문서를 코드처럼 관리하는 팀에서 일정 다이어그램도 텍스트로 버전 관리하고 싶을 때. 시각 → 코드 → Git commit.

기존 도구들과 뭐가 다른가요?

비교 기존 도구들 이 도구
Mermaid 코드 내보내기 대부분 미지원 버튼 한 번으로 완성
시각 편집 → 코드 코드 직접 작성만 가능 드래그로 그리면 코드 자동 생성
Mermaid 코드 가져오기 대부분 미지원 붙여넣기 → 시각 편집으로 전환
가입·설치 대부분 가입 필요 없음 — 브라우저에서 바로
가격 유료 or 프로젝트 수 제한 완전 무료, 제한 없음

주요 기능 한눈에 보기

기능 설명 바로가기
간트차트 그리기 드래그로 작업 추가, 의존성 연결, 3단계 계층(그룹→서브그룹→작업) 바로가기 →
Mermaid 내보내기 그린 차트를 Mermaid gantt 코드로 즉시 변환. 섹션, 태그, 의존성 모두 포함 바로가기 →
Mermaid 가져오기 기존 Mermaid 코드를 붙여넣으면 시각 편집기로 변환. replace 또는 merge 선택 바로가기 →
전체화면 모드 뷰포트 전체에서 차트 편집. ESC 또는 버튼으로 종료, ← → 버튼/키보드로 스크롤 바로가기 →
PNG 내보내기 차트를 이미지로 저장. 발표자료, 보고서에 바로 사용 바로가기 →

💡 이게 핵심입니다

Mermaid 문법을 외울 필요가 없습니다. 마우스로 작업을 추가하고, 드래그로 날짜를 조정하고, 버튼 한 번 누르면 완성된 Mermaid 코드가 나옵니다.

gantt 블록을 GitHub README에 붙여넣으면 — 코드 한 줄 안 쳤는데 예쁜 간트차트가 렌더링됩니다.

사용 방법 (3단계)

🖱️

1단계 — 간트차트 그리기

+ 버튼으로 작업 추가, 타임라인에서 드래그로 기간 설정. 의존성은 점을 드래그해서 연결.

⚡

2단계 — Mermaid 버튼 클릭

컨트롤 바의 보라색 "Mermaid" 버튼 클릭 → 코드 자동 생성 → 복사 버튼 한 번.

📋

3단계 — 붙여넣기

GitHub README, GitLab, Notion, Confluence 어디든. 코드 블록에 붙여넣으면 바로 렌더링.

🔒 100% 브라우저에서 처리됩니다. 입력한 일정 데이터가 서버로 전송되지 않습니다. 모든 데이터는 내 브라우저의 localStorage에만 저장됩니다.

간트차트 Mermaid 변환 시작하기

회원가입 없음 · 설치 없음 · 완전 무료