mermaid.design은 온라인 Mermaid 다이어그램 에디터입니다. 일반 텍스트 mermaid 구문을 작성하면 플로우차트, 시퀀스 다이어그램, ER 다이어그램, 간트 차트 등으로 변환됩니다. 입력하는 대로 실시간으로 렌더링됩니다.
모든 것이 브라우저에서 로컬로 실행됩니다. 계정도, 업로드도, 서버 왕복도 없습니다. 다이어그램 코드는 기기에만 저장되며 모든 내보내기도 로컬에서 생성됩니다.
붙여넣고 미리보는 도구 그 이상입니다. 코드로 된 다이어그램을 디자인하고, 스타일링하고, 내보내기 위한 완전한 환경입니다.
가벼운 CodeMirror 에디터는 Mermaid 구문 강조, 인라인 오류 표시, 캔버스와의 선택 영역 동기화를 지원하며 팬·줌 가능한 실시간 미리보기를 제공합니다.
캔버스에서 레이블과 다이어그램 요소를 직접 편집하세요. 변경 사항은 Mermaid 소스에 동기화되며 코드와 미리보기 간에 선택 영역과 실행 취소·다시 실행도 공유됩니다.
상황에 맞는 자동 완성, 바로 사용할 수 있는 스니펫, 검색 및 바꾸기, 원클릭 서식 지정, 인라인 구문 진단으로 Mermaid 코드를 더 빠르게 작성하세요.
공식 mermaid SVG 출력과 일반 텍스트로 다이어그램을 그리는 ASCII 엔진 사이를 자유롭게 전환하세요. 터미널, 코드 주석, 문서에 적합합니다.
73개의 mermaid 테마 변수를 모두 조정하고, 20개 이상의 내장·디자이너 프리셋에서 시작하거나, 하나의 시드 컬러로 전체 팔레트를 생성한 뒤 JSON이나 frontmatter로 내보내세요.
33개 그룹으로 정리된 438개의 Mermaid 렌더링 옵션을 조정하세요. 레이아웃과 간격부터 다이어그램별 동작까지 설정 JSON을 직접 편집하지 않고 세밀하게 제어할 수 있습니다.
플로우차트, 시퀀스, 상태, ER, 간트 등 템플릿 갤러리에서 시작하세요. 각 템플릿은 현재 테마로 실시간 렌더링된 후 적용됩니다.
다이어그램을 SVG, PNG, JPG, WebP(투명 배경 선택 가능)로 다운로드하거나 ASCII 렌더링을 README에 바로 복사하세요.
가입도 백엔드도 없습니다. 파싱, 렌더링, 내보내기가 모두 클라이언트에서 이루어지므로 민감한 아키텍처 다이어그램이 기기를 떠나지 않습니다.
같은 mermaid 코드를 원하는 방식으로 렌더링하세요. 네비게이션 바에서 언제든 엔진을 전환할 수 있습니다.
플로우차트부터 C4 아키텍처 다이어그램까지, mermaid가 지원한다면 여기서 디자인할 수 있습니다.
처음부터 시작하거나, 기존 코드를 붙여넣거나, 갤러리의 31개 템플릿 중 하나를 선택하세요.
테마 변수를 조정하고, 프리셋을 적용하거나, Styled 엔진으로 그림자와 커스텀 스트로크를 추가하세요. CSS는 필요 없습니다.
문서와 슬라이드용으로 SVG, PNG, JPG, WebP를 다운로드하거나 ASCII 렌더링은 TXT로 내보내세요. 테마는 JSON이나 frontmatter로 함께 가져갈 수 있습니다.
아니요. mermaid.design은 전적으로 브라우저에서 실행됩니다. 페이지를 열고 mermaid 구문을 입력하기만 하면 됩니다. 설치도 가입도 필요 없습니다.
아니요. 파싱, 렌더링, 내보내기가 모두 브라우저에서 로컬로 이루어집니다. 다이어그램 코드는 브라우저의 로컬 스토리지에 저장되며 기기를 떠나지 않습니다.
플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 간트 차트, 마인드맵, 타임라인, 생키 다이어그램, C4 다이어그램 등 mermaid 12가 지원하는 모든 유형을 지원합니다.
SVG, PNG, JPG, WebP(투명 배경 옵션 포함)로 다운로드하고, ASCII 렌더링은 일반 텍스트로, 테마 설정은 JSON 또는 mermaid frontmatter로 복사할 수 있습니다.
네. 직접 만들고 내보낸 다이어그램은 사용자의 것입니다. 문서, 프레젠테이션, 블로그 게시물, 제품 등 상업적 용도로도 자유롭게 사용하세요.