beautiful-mermaid (터미널용 Mermaid 다이어그램 렌더링 도구)
개요
beautiful-mermaid는 Mermaid 다이어그램을 SVG 또는 ASCII/Unicode 텍스트로 렌더링하는 초고속 TypeScript 기반 라이브러리입니다. 특히 AI 코딩 에이전트 환경에서 터미널 기반의 시각화 도구로 활용도가 높습니다.
- 출처: lukilabs (2026 초반)
- 핵심 메시지: DOM 의존성 없는 경량·고속 렌더링을 통해 터미널과 브라우저 어디서나 다이어그램을 즉시 시각화.
1. 주요 특징
렌더링 방식 및 성능
- SVG 지원: 리치 UI 애플리케이션용 고품질 출력.
- ASCII/Unicode 지원: 터미널 환경에서 가독성 높은 텍스트 기반 다이어그램 출력.
- 초고속 렌더링: DOM 의존성이 없어 500ms 이내에 100개 이상의 다이어그램 렌더링 가능.
다이어그램 유형
- Flowchart, State, Sequence, Class, ER 다이어그램 등 5가지 핵심 유형 지원.
테마 및 시각화 시스템
- 내장 테마: 15개 테마(tokyo-night, dracula, nord 등) 제공.
- Mono 모드: 배경색(bg)과 전경색(fg) 단 두 가지만으로도 일관된 색상 표현.
- Shiki 통합: VS Code 테마 색상을 다이어그램 색상으로 자동 매핑하여 편집기와 시각적 일관성 유지.
- 실시간 테마 전환: CSS 커스텀 속성을 통한 유연한 테마 변경 가능.
2. 활용 사례
AI 코딩 어시스턴트 환경
- 복잡한 코드베이스의 데이터 흐름, 시스템 구조 등을 터미널 인터페이스 내에서 즉시 렌더링하여 개발자의 맥락 이해 속도를 향상.
- CLI 기반의 개발 툴(Gemini CLI, Claude Code 등)과 결합하여 구조도 가시성 확보.
CLI 및 서버 환경
- 무의존성(Zero-dependency) 구조로 서버 환경에서도 경량 렌더링 수행 가능.
3. 사용 예시
SVG 렌더링
import { renderMermaid } from 'beautiful-mermaid'
const svg = await renderMermaid(`graph TD; A-->B;`)ASCII 렌더링
import { renderMermaidAscii } from 'beautiful-mermaid'
const ascii = renderMermaidAscii(`graph LR; A --> B --> C`)