vitepress에서 mermaid 사용하기

https://emersonbottero.github.io/vitepress-plugin-mermaid/
https://vitepress.dev/ko/guide/what-is-vitepress

vitepress에서 mermaid를 사용할 떄는 별도의 plugin을 설치해야만 가능하다.

1. 설치하기

    pnpm add -D vitepress-plugin-mermaid mermaid
    //npm으로 설치하기
    //npm i -D vitepress-plugin-mermaid mermaid
   
    +mermaid 11.9.0
    +vitepress 1.6.4
    +vitepress-plugin-mermaid 2.0.17

2. .vitepress/config.mts 설정하기

    //.vitepress/config.mts
    import { defineConfig } from 'vitepress'
    import { withMermaid } from 'vitepress-plugin-mermaid'
   
    export default withMermaid(
        defineConfig({
            ...
        })
    );

3. 확인하기

    graph LR;
        K([...........<img src='/vitepress-plugin-mermaid/K.png' width='60' >...........])-.->G((...........<img id='git' src='/vitepress-plugin-mermaid/Octocat.png' width='50' >...........));
        H([...........<img id='helm' src='/vitepress-plugin-mermaid/helm.png' width='60' >...........])-.->G
        G-->A;
        A(...........<img src='/vitepress-plugin-mermaid/argo-cd.png' width='60' >...........)-->D(...........<img src='/vitepress-plugin-mermaid/ocp.png' width='60' >...........);
    classDef img fill:none,color:transparent,stroke:none,borderRadius:50px
    class G,D,A,K,H,B img
    click K "https://kustomize.io/" _blank
    click G "http://www.github.com" "This is a link" _blank

config.mts에 예시와 같이 설정하면 정상적으로 plugins이 등록되지 않는다.
ES모듈 호환성 이슈인듯?

해결방법

1. 동적 import 사용

    // .vitepress/config.mts
    import { defineConfig } from 'vitepress'
   
    export default async () => {
      const { withMermaid } = await import('vitepress-plugin-mermaid')
   
      return withMermaid(
        defineConfig({
            ...
        })
      )
    }

2. config.mts를 config.ts로 변경하기 -> 다른 모듈이나 plugin을 이미 사용하고 있을 경우 충돌될 수 있음!

3. 수동으로 mermaid 설정

4. vue컴포넌트로 mermaid 사용