feat: vitepress mermaid plugin 추가

Author: toothlessdev

.vitepress/config.mts

@@ -7,14 +7,15 @@ import markdownItKatex from "markdown-it-katex";
 import { createAutoGeneratePostsPlugin } from "./plugins/posts";
 import { createImageOptimizerPlugin } from "./plugins/image-optimizer";
 import { markdownPicturePlugin } from "./plugins/markdown-picture";
+import { withMermaid } from "vitepress-plugin-mermaid";
 
 const isProduction = process.env.NODE_ENV === "production";
 
 const GOOGLE_ANALYTICS_ID = "G-3XM039P5E6";
 const NAVER_SITE_VERIFICATION_CODE = "db7f3601aa486190aa58c3e09dcd7f35a784543e";
 
 // https://vitepress.dev/reference/site-config
-export default defineConfig({
+export default withMermaid(defineConfig({
     lang: "ko-KR",
     title: "🦷 ToothlessDev",
     description: "A VitePress Site",
@@ -101,4 +102,4 @@ export default defineConfig({
             },
         ],
     ],
-});
+}));

.vitepress/theme/index.ts

@@ -5,6 +5,7 @@ import DefaultTheme from "vitepress/theme";
 import Giscus from "@giscus/vue";
 import PostCardList from "@/components/PostCardList/PostCardList.vue";
 import PostLayout from "@/components/PostLayout/PostLayout.vue";
+import { MermaidPlugin } from "vitepress-plugin-mermaid";
 import "./style.css";
 
 export default {
@@ -13,5 +14,6 @@ export default {
     enhanceApp({ app, router, siteData }) {
         app.component("PostCardList", PostCardList);
         app.component("Giscus", Giscus);
+        app.use(MermaidPlugin);
     },
 } satisfies Theme;

package.json

@@ -17,7 +17,9 @@
     "dependencies": {
         "@giscus/vue": "^3.1.1",
         "katex": "^0.16.25",
-        "markdown-it-katex": "^2.0.3"
+        "markdown-it-katex": "^2.0.3",
+        "mermaid": "^11.14.0",
+        "vitepress-plugin-mermaid": "^2.0.17"
     },
     "version": "0.0.0",
     "packageManager": "yarn@1.22.22"