ahundt/mermaid-diagrams

beautiful-mermaid를 사용한 Mermaid 다이어그램 렌더링

beautiful-mermaid v1.0.2 및 bun을 사용하여 Mermaid .mmd 파일을 스타일이 적용된 SVG로 렌더링합니다.

스킬 내용

파일	목적
render-mermaid.ts	CLI 도구: .mmd 파일을 SVG로 렌더링
gemini-diagram-prompt.md	Gemini 이미지 생성용 프롬프트

설치

bun만 필요합니다. beautiful-mermaid 종속성은 첫 실행 시 bun에 의해 자동 설치됩니다.

# macOS
brew install oven-sh/bun/bun

# 또는 유니버설 설치 프로그램
curl -fsSL https://bun.sh/install | bash

CLI 참조

render-mermaid — Mermaid .mmd 파일을 테마가 적용된 SVG로 렌더링

사용법:
  bun run render-mermaid.ts [옵션] <input.mmd...>
  echo 'graph TD; A-->B' | bun run render-mermaid.ts -o out.svg

옵션:
  -o, --output <file>   출력 파일 (단일 입력만 해당)
  --outdir <dir>        여러 파일에 대한 출력 디렉터리
  -t, --theme <name>    테마 (기본값: tokyo-night)
  --list-themes         사용 가능한 테마 목록 표시
  --help                도움말 표시

출력 기본값: -o 또는 --outdir 없이 실행하면 각 입력 파일 옆에 <name>.svg를 생성합니다 (-d는 bun run에 의해 무시됨, --outdir 사용).

단축키: 더 짧은 명령을 위해 MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts로 설정하세요.

예제

MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts

# 단일 파일 렌더링 (입력 파일 옆에 출력)
bun run $MERMAID diagram.mmd

# 특정 출력 파일로 렌더링
bun run $MERMAID diagram.mmd -o pretty.svg

# 모든 .mmd 파일을 출력 디렉터리로 렌더링
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams

# 다른 테마 사용
bun run $MERMAID -t dracula diagram.mmd

# 표준 입력에서 파이프
echo 'graph TD; A-->B-->C' | bun run $MERMAID -o quick.svg

# 테마 목록 표시
bun run $MERMAID --list-themes

프로젝트 다이어그램

Mermaid 소스 파일(.mmd)과 렌더링된 출력(.svg)은 docs/diagrams/ 디렉터리에 있으며, 저장소 루트에도 하나의 소스 파일이 있습니다:

소스	설명
docs/diagrams/autofile-policy.mmd	AutoFile 정책 순서도
docs/diagrams/three-stage-autorun.mmd	3단계 자동 실행 순서도
autorun-architecture.mmd	전체 아키텍처 (beautiful-mermaid에는 너무 복잡함)

재생성:

bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams

알려진 제한 사항

• 깊게 중첩된 서브그래프가 있는 복잡한 다이어그램은 dagre 레이아웃 버그가 발생할 수 있습니다. 실패한 다이어그램은 보고되지만 다른 렌더링을 차단하지는 않습니다.
• %%{init:...}%% 프론트 매터는 자동으로 제거됩니다 (beautiful-mermaid가 자체 테마를 적용함).

<image_generation>

Gemini 이미지 생성

gemini-diagram-prompt.md에는 Gemini가 결과 중심의 프로젝트 개요 이미지를 생성하기 위한 프롬프트가 포함되어 있습니다. 프롬프트를 복사하여 Gemini 대화에 붙여넣으세요.

</image_generation>