JavaScript, TypeScript, CSS, HTML, Markdown, YAML 등의 코드를 일관된 스타일로 다시 출력하는 주관이 뚜렷한 코드 포매터입니다.
mermaid-js/mermaid
Mermaid는 Markdown과 비슷한 텍스트 정의로 순서도, 시퀀스 다이어그램, 간트 차트 등을 생성합니다.
대체할 수 있는 제품:Lucidchart
draw.io
- 스타
- 90,776
- 포크
- 9,374
- 열린 이슈
- 1,938
- 마지막 커밋
- 10시간 전
어떤 프로젝트인가요?
Mermaid는 텍스트 정의를 렌더링된 다이어그램으로 변환하는 JavaScript 및 TypeScript 다이어그램 도구입니다. 순서도나 시퀀스 다이어그램 같은 짧은 텍스트 설명을 작성하면 Mermaid가 브라우저에서 또는 빌드 단계에서 SVG로 렌더링합니다. 다이어그램이 일반 텍스트이므로 코드와 함께 저장하고, pull request에서 수정하고, 기반 시스템이 변경될 때마다 다시 생성할 수 있습니다.
이 프로젝트는 순서도, 시퀀스, 클래스, 상태, ER, 간트, 파이, Git 그래프, 마인드맵, 타임라인, 사용자 여정, C4 등 다양한 다이어그램 유형을 지원합니다. npm 패키지, CDN 스크립트 또는 온라인 Live Editor를 통해 사용할 수 있으며, GitHub는 Markdown 파일의 Mermaid 코드 블록을 직접 렌더링합니다.
Mermaid에는 신뢰할 수 없는 입력을 위한 기본 새니타이징 처리가 포함되어 있습니다. 외부 사용자가 제공한 다이어그램 코드를 받는 사이트에서는 샌드박스 처리된 iframe 렌더링 모드를 선택할 수도 있지만, 이 경우 일부 인터랙티브 기능은 사용할 수 없습니다.
핵심 기능
- 01텍스트로 순서도, 시퀀스, 클래스, 상태, ER, 간트 등 다양한 다이어그램 유형을 렌더링합니다.
- 02다이어그램이 일반 텍스트이므로 버전 관리에서 diff를 확인하고 검토하기 쉽습니다.
- 03GitHub Markdown, npm 패키지 또는 CDN 스크립트를 통해 사용할 수 있습니다.
- 04테마, 색상, 글꼴, 레이아웃 방향을 사용자 지정할 수 있습니다.
- 05신뢰할 수 없는 다이어그램 입력을 위한 샌드박스 렌더링 모드를 제공합니다.
활용 사례
- 설명 대상 코드와 함께 저장소에 아키텍처 다이어그램과 시퀀스 다이어그램을 관리합니다.
- GitHub README 파일과 문서 사이트에 다이어그램을 삽입합니다.
- 빌드 파이프라인에서 간트 차트나 파이 차트 같은 차트를 생성합니다.
- 프로그래머가 아닌 사용자도 온라인 Live Editor에서 다이어그램 초안을 작성할 수 있습니다.
빠른 시작
- 1
mermaid.live의 Mermaid Live Editor에서 바로 다이어그램을 만들어 보세요
토픽
자주 묻는 질문
- mermaid은(는) 무엇인가요?
- Mermaid는 Markdown과 비슷한 텍스트 정의로 순서도, 시퀀스 다이어그램, 간트 차트 등을 생성합니다. Mermaid는 텍스트 정의를 렌더링된 다이어그램으로 변환하는 JavaScript 및 TypeScript 다이어그램 도구입니다. 순서도나 시퀀스 다이어그램 같은 짧은 텍스트 설명을 작성하면 Mermaid가 브라우저에서 또는 빌드 단계에서 SVG로 렌더링합니다. 다이어그램이 일반 텍스트이므로 코드와 함께 저장하고, pull request에서 수정하고, 기반 시스템이 변경될 때마다 다시 생성할 수 있습니다.
- mermaid은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- mermaid은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- mermaid은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. mermaid의 마지막 커밋은 2026년 10월 20일입니다.
- mermaid은(는) 어디에 사용할 수 있나요?
- 설명 대상 코드와 함께 저장소에 아키텍처 다이어그램과 시퀀스 다이어그램을 관리합니다. GitHub README 파일과 문서 사이트에 다이어그램을 삽입합니다. 빌드 파이프라인에서 간트 차트나 파이 차트 같은 차트를 생성합니다. 프로그래머가 아닌 사용자도 온라인 Live Editor에서 다이어그램 초안을 작성할 수 있습니다.
- mermaid는 어떻게 설치하나요?
- mermaid.live의 Mermaid Live Editor에서 바로 다이어그램을 만들어 보세요
- mermaid은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/mermaid-js/mermaid
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
빌드 과정 없이 Markdown 파일을 웹사이트로 만드는 문서 사이트 생성기입니다.
JS 코드를 추상화 수준·코드 블록 수정자·테마를 지원하는 SVG 순서도로 변환하는 JavaScript 라이브러리 및 CLI
C4 기반 표기법으로 코드 기반 소프트웨어 아키텍처 다이어그램을 생성하는 모델링 언어와 도구 체인
Markdown 문서 소스 폴더 하나를 정적 문서 사이트, 오프라인 검색, llms.txt, AI 에이전트용 컨텍스트로 변환하는 문서 컴파일러입니다.
편집 가능한 Astro 문서 사이트를 저장소에 생성하며, 에이전트가 읽을 수 있는 Markdown과 llms.txt를 기본 제공합니다.