🎨오픈소스

Mermaid 다이어그램을 아름답게 렌더링하는 Beautiful-Mermaid

터미널에서도 사용 가능한 ASCII 출력과 정교한 SVG를 지원하는 Mermaid 렌더링 도구

원본 링크
#Mermaid#다이어그램#TypeScript#시각화

Beautiful-Mermaid란?

Mermaid는 텍스트로 다이어그램을 그릴 수 있는 편리한 도구지만, 기본 렌더링이 아쉽고 특히 터미널 환경에서는 사용이 어려웠습니다.

Beautiful-Mermaid는 이러한 문제를 해결하는 오픈소스 프로젝트입니다.

주요 특징

1. 다양한 출력 형식

정교한 SVG 파일: 생성
터미널 친화적인 ASCII 아트: 출력
DOM 의존성 없는 순수 TypeScript 구현

2. 풍부한 다이어그램 지원

플로우차트 (Flowchart)
상태 다이어그램 (State Diagram)
시퀀스 다이어그램 (Sequence Diagram)
클래스 다이어그램 (Class Diagram)
ER 다이어그램 (Entity-Relationship Diagram)

3. 강력한 테마 시스템

15개의 내장 테마: 제공
VS Code 테마 색상 직접 적용 가능
CSS 변수 기반으로 실시간 테마 변경
강조 색상, 테두리 색상 등 세부 조정 가능

왜 사용해야 할까?

기존 Mermaid의 편리함은 그대로 유지하면서:

더 **아름다운 시각화** 결과물
터미널 환경: 에서도 사용 가능
세밀한 스타일 커스터마이징

개발 문서나 기술 블로그에 품질 높은 다이어그램이 필요하다면 시도해볼 만한 도구입니다.

링크

GitHub: https://github.com/lukilabs/beautiful-mermaid