beautiful-mermaid은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

beautiful-mermaid은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

beautiful-mermaid은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. beautiful-mermaid의 마지막 커밋은 2026년 5월 6일입니다.

beautiful-mermaid은(는) 어디에 사용할 수 있나요?

AI 채팅 또는 에이전트 인터페이스에 생성된 플로차트나 다이어그램을 표시합니다 비동기 로딩 없이 React 앱에서 Mermaid 다이어그램을 표시합니다 CLI 도구와 터미널 출력에 아키텍처 또는 상태 다이어그램을 표시합니다 다이어그램 색상을 기존 편집기나 앱 테마에 맞춥니다

beautiful-mermaid는 어떻게 설치하나요?

npm으로 패키지를 설치합니다: npm install beautiful-mermaid 코드에서 플로차트를 SVG로 렌더링합니다

beautiful-mermaid은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/lukilabs/beautiful-mermaid

lukilabs/beautiful-mermaid

DOM 의존성 없이 Mermaid 다이어그램을 테마 적용 가능한 SVG 또는 ASCII/Unicode 텍스트로 렌더링하는 TypeScript 라이브러리입니다.

GitHub에서 보기

스타: 11,200
포크: 411
열린 이슈: 93
마지막 커밋: 6개월 전

어떤 프로젝트인가요?

beautiful-mermaid는 Mermaid 다이어그램 소스를 SVG 문자열이나 일반 텍스트 ASCII/Unicode 아트로 변환합니다. 플로차트, 상태 다이어그램, 시퀀스 다이어그램, 클래스 다이어그램, ER 다이어그램과 막대형·선형·복합 시리즈를 지원하는 XY 차트를 지원합니다.

렌더링은 동기식이므로 useMemo를 사용해 React 렌더링 중에 SVG 출력을 바로 계산할 수 있습니다. 테마는 배경색과 전경색, 두 가지 색상으로 구성되며 선택적으로 강조색과 흐린 색상을 지정할 수 있습니다. 색상은 CSS 사용자 지정 속성으로 제공되므로 다시 렌더링하지 않고 테마를 변경할 수 있습니다. 라이브러리에는 기본 제공 테마 15개도 포함되어 있으며, 모든 Shiki (VS Code) 테마를 다이어그램 색상으로 변환할 수 있습니다.

ASCII 렌더러는 Go 프로젝트 mermaid-ascii를 TypeScript로 포팅하고 시퀀스, 클래스, ER 지원을 추가한 버전입니다. Unicode 박스 그리기 문자를 사용하거나 순수 ASCII로 출력할 수 있으며, 터미널에서 사용할 수 있도록 ANSI 또는 HTML 색상 적용도 지원합니다.

핵심 기능

01플로차트, 상태, 시퀀스, 클래스, ER 다이어그램과 XY 차트를 렌더링합니다
02웹 UI용 SVG 또는 터미널용 ASCII/Unicode 텍스트를 출력합니다
03useMemo를 사용해 React 렌더링 중에도 사용할 수 있는 동기식 API를 제공합니다
04두 가지 색상에서 테마를 구성하며 기본 제공 테마 15개를 포함합니다
05fromShikiTheme을 통해 모든 Shiki/VS Code 테마를 적용할 수 있습니다
06CSS 사용자 지정 속성으로 실시간 테마 전환을 지원합니다

활용 사례

AI 채팅 또는 에이전트 인터페이스에 생성된 플로차트나 다이어그램을 표시합니다
비동기 로딩 없이 React 앱에서 Mermaid 다이어그램을 표시합니다
CLI 도구와 터미널 출력에 아키텍처 또는 상태 다이어그램을 표시합니다
다이어그램 색상을 기존 편집기나 앱 테마에 맞춥니다

빠른 시작

1
npm으로 패키지를 설치합니다
npm install beautiful-mermaid
2
코드에서 플로차트를 SVG로 렌더링합니다

사용 전 알아둘 점

렌더링은 동기식이지만, ELK.js 레이아웃은 FakeWorker 우회 방식으로 실행되므로 매우 큰 다이어그램은 렌더링이 느릴 수 있습니다.
README에는 다이어그램 유형이 6개만 나와 있으며, 그 외 Mermaid 다이어그램 유형은 지원하지 않습니다.

토픽

#mermaid #diagram #svg #ascii #typescript #theming #charts

자주 묻는 질문

beautiful-mermaid은(는) 무엇인가요?: DOM 의존성 없이 Mermaid 다이어그램을 테마 적용 가능한 SVG 또는 ASCII/Unicode 텍스트로 렌더링하는 TypeScript 라이브러리입니다. beautiful-mermaid는 Mermaid 다이어그램 소스를 SVG 문자열이나 일반 텍스트 ASCII/Unicode 아트로 변환합니다. 플로차트, 상태 다이어그램, 시퀀스 다이어그램, 클래스 다이어그램, ER 다이어그램과 막대형·선형·복합 시리즈를 지원하는 XY 차트를 지원합니다.
beautiful-mermaid은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: beautiful-mermaid은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
beautiful-mermaid은(는) 아직 유지보수되고 있나요?: 6개월 이내 업데이트. beautiful-mermaid의 마지막 커밋은 2026년 5월 6일입니다.
beautiful-mermaid은(는) 어디에 사용할 수 있나요?: AI 채팅 또는 에이전트 인터페이스에 생성된 플로차트나 다이어그램을 표시합니다 비동기 로딩 없이 React 앱에서 Mermaid 다이어그램을 표시합니다 CLI 도구와 터미널 출력에 아키텍처 또는 상태 다이어그램을 표시합니다 다이어그램 색상을 기존 편집기나 앱 테마에 맞춥니다
beautiful-mermaid는 어떻게 설치하나요?: npm으로 패키지를 설치합니다: npm install beautiful-mermaid 코드에서 플로차트를 SVG로 렌더링합니다
beautiful-mermaid은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/lukilabs/beautiful-mermaid

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.