lxchapu · blankxiao · Oct 3, 2024
diff --git a/.gitignore b/.gitignore
@@ -6,7 +6,7 @@ dist/
 
 # dependencies
 node_modules/
-
+pnpm-lock.yaml
 # logs
 npm-debug.log*
 yarn-debug.log*

diff --git a/astro.config.js b/astro.config.js
@@ -17,6 +17,7 @@ import { site } from './src/config.json'
 import remarkMath from 'remark-math'
 import rehypeKatex from 'rehype-katex'
 import swup from '@swup/astro'
+import { mermaid } from './src/plugins/remarkMermaidPlugin'
 
 // https://astro.build/config
 export default defineConfig({
@@ -35,7 +36,14 @@ export default defineConfig({
   markdown: {
     syntaxHighlight: false,
     smartypants: false,
-    remarkPlugins: [remarkMath, remarkDirective, remarkEmbed, remarkSpoiler, remarkReadingTime],
+    remarkPlugins: [
+      remarkMath,
+      remarkDirective,
+      remarkEmbed,
+      remarkSpoiler,
+      remarkReadingTime,
+      mermaid,
+    ],
     rehypePlugins: [
       rehypeHeadingIds,
       rehypeKatex,

diff --git a/src/content/posts/markdown.md b/src/content/posts/markdown.md
@@ -136,6 +136,21 @@ we can use 3 backticks ``` in new line and write snippet and close with 3 backti
 const var text = "hello world"
 ```
 
+```mermaid
+sequenceDiagram
+    participant Client as 客户端
+    participant Server as 服务器
+
+    Client->>Server: FIN=1, ACK=1, seq=u, ack=v
+    Note right of Client: 客户端发送FIN报文，表示没有数据要发送了
+    Server-->>Client: ACK=1, ack=u+1, seq=v
+    Note left of Server: 服务器确认FIN报文
+    Server->>Client: FIN=1, ACK=1, seq=w, ack=u+1
+    Note left of Server: 服务器发送FIN报文，表示没有数据要发送了
+    Client-->>Server: ACK=1, ack=w+1, seq=u+1
+    Note right of Client: 客户端确认FIN报文
+```
+
 ## KaTeX 公式
 
 使用 `$` 符号包裹公式生成行内公式，例如：$E = mc^2$。

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -30,7 +30,12 @@ const { title, description, image } = Astro.props
     <AccentColorInjector />
     <PrintVersion />
   </head>
+
   <body>
+    <script type="module">
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+      mermaid.initialize({ startOnLoad: true });
+    </script>
     <slot />
 
     <BackToTopFAB client:only="react" />

diff --git a/src/plugins/remarkMermaidPlugin.js b/src/plugins/remarkMermaidPlugin.js
@@ -0,0 +1,14 @@
+import { visit } from 'unist-util-visit'
+
+export function mermaid() {
+  return function (tree, { data }) {
+    console.log(tree)
+    console.log(data)
+    visit(tree, 'code', (node) => {
+      if (node.lang === 'mermaid') {
+        node.type = 'html'
+        node.value = `<pre class="mermaid">${node.value}</pre>`
+      }
+    })
+  }
+}