Community코딩 & 개발github.com

sanderschinchy506/mermaid-compact

mermaid.js를 단일 자체 포함 ESM 파일로 번들링하여 런타임 종속성과 지연 청크를 제거하고 더 빠른 배포를 지원합니다.

mermaid-compact란 무엇인가요?

이 스킬은 mermaid.js를 단일 자체 포함 ESM(ES Module) 파일로 번들링하는 도구입니다. 주요 목표는 런타임 종속성과 지연 청크(lazy chunks)를 완전히 제거하여 배포 속도를 높이는 데 있습니다. 기존 mermaid.js는 다양한 외부 종속성을 가지며 청크로 분할 로드되기 때문에 초기 로딩 시간이 길어지고 복잡한 설정이 필요할 수 있습니다. 이 스킬을 사용하면 모든 기능이 하나의 파일에 통합되어 웹 애플리케이션, 정적 사이트, 또는 서버리스 환경에서 즉시 사용할 수 있습니다. Vite, Webpack 등 다양한 번들러와 호환되며 CDN 배포에도 최적화되어 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add sanderschinchy506/mermaid-compact

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

mermaid-compact은(는) 무엇을 하나요?

mermaid.js를 단일 자체 포함 ESM 파일로 번들링하여 런타임 종속성과 지연 청크를 제거하고 더 빠른 배포를 지원합니다.

개요

mermaid-compact는 mermaid.js의 모든 기능을 하나의 ESM 모듈로 압축합니다. 외부 의존성이 없으므로 CDN이나 정적 호스팅에서 바로 사용할 수 있습니다.

주요 기능

  • 단일 파일: 모든 mermaid.js 기능이 하나의 .js 파일로 제공됩니다.
  • ESM 형식: 최신 브라우저 및 번들러와 호환됩니다.
  • 종속성 없음: 런타임에 추가 라이브러리를 로드할 필요가 없습니다.
  • 지연 청크 없음: 모든 코드가 즉시 로드되므로 추가 네트워크 요청이 없습니다.

사용 방법

import mermaid from './mermaid-compact.js';

mermaid.initialize({ startOnLoad: true });

설치

다음 명령어로 패키지를 설치합니다:

npm install @sanderschinchy506/mermaid-compact

또는 CDN에서 직접 사용:

<script type="module">
  import mermaid from 'https://cdn.example.com/mermaid-compact.js';
  mermaid.initialize({ startOnLoad: true });
</script>

지원 환경

  • 모든 최신 브라우저 (Chrome, Firefox, Safari, Edge)
  • Node.js 16+
  • Vite, Webpack, Rollup 등 ESM 지원 번들러

라이선스

MIT

관련 스킬