Next.js 블로그에 Mermaid 다이어그램 지원 추가하기

graph LR
    A[Markdown 작성] --> B[Mermaid 코드 블록]
    B --> C[빌드 타임 SVG 변환]
    C --> D[블로그에 렌더링]

flowchart TD
    MDX[".mdx 파일"] --> CL["Contentlayer2"]
    CL --> RP["remark/rehype 플러그인 체인"]
    RP --> |remarkGfm| GFM["GitHub Flavored Markdown"]
    RP --> |remarkMath| MATH["수식 처리"]
    RP --> |rehypePrismPlus| CODE["코드 하이라이팅"]
    RP --> |rehypeMermaid| MERMAID["Mermaid → SVG"]
    GFM & MATH & CODE & MERMAID --> NEXT["Next.js 정적 페이지"]

yarn add rehype-mermaid playwright
npx playwright install chromium

sequenceDiagram
    participant B as 빌드 프로세스
    participant P as Playwright (Chromium)
    participant M as mermaid.js

    B->>P: mermaid 코드 블록 전달
    P->>M: 브라우저 내에서 실행
    M-->>P: SVG 반환
    P-->>B: SVG를 MDX에 삽입

flowchart TD
    START["빌드 시작"] --> SCAN["data/posts/*.mdx 스캔"]
    SCAN --> CHECK{"mermaid 블록 존재?"}
    CHECK -->|Yes| LOAD["rehype-mermaid 동적 import"]
    LOAD --> RENDER["SVG 변환"]
    CHECK -->|No| SKIP["플러그인 스킵"]
    SKIP --> BUILD["Next.js 빌드"]
    RENDER --> BUILD

import { readFileSync, readdirSync } from 'fs'

function hasMermaidBlocks(): boolean {
  const postsDir = path.join(root, 'data', 'posts')
  try {
    return readdirSync(postsDir).some((file) => {
      if (!file.endsWith('.mdx')) return false
      return readFileSync(path.join(postsDir, file), 'utf-8').includes('```mermaid')
    })
  } catch {
    return false
  }
}

// Lazy-load: contentlayer의 esbuild가 es2020 타겟이라
// top-level await를 사용할 수 없어서 함수로 감쌉니다
function lazyRehypeMermaid() {
  let plugin: any = null
  return () => {
    return async (tree: any, file: any) => {
      if (!plugin) {
        const mod = await import('rehype-mermaid')
        plugin = mod.default({ strategy: 'inline-svg' })
      }
      return plugin(tree, file)
    }
  }
}

const useMermaid = hasMermaidBlocks()

// rehypePlugins 배열에 조건부 추가
rehypePlugins: [
  // ... 기존 플러그인들
  ...(useMermaid ? [lazyRehypeMermaid()] : []),
  [rehypePrismPlus, { defaultLanguage: 'js', ignoreMissing: true }],
]

- name: Check for mermaid diagrams
  id: check-mermaid
  run: |
    if grep -r '```mermaid' data/posts/ >/dev/null 2>&1; then
      echo "found=true" >> $GITHUB_OUTPUT
    else
      echo "found=false" >> $GITHUB_OUTPUT
    fi
- name: Get Playwright version
  if: steps.check-mermaid.outputs.found == 'true'
  id: playwright-version
  run: echo "version=$(npx playwright --version | awk '{print $2}')" >> $GITHUB_OUTPUT
- name: Cache Playwright browsers
  if: steps.check-mermaid.outputs.found == 'true'
  uses: actions/cache@v4
  id: playwright-cache
  with:
    path: ~/.cache/ms-playwright
    key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
- name: Install Playwright Chromium (for mermaid rendering)
  if: steps.check-mermaid.outputs.found == 'true' && steps.playwright-cache.outputs.cache-hit != 'true'
  run: npx playwright install --with-deps chromium
- name: Install Playwright deps only (cached browsers)
  if: steps.check-mermaid.outputs.found == 'true' && steps.playwright-cache.outputs.cache-hit == 'true'
  run: npx playwright install-deps chromium