feat: mermaid

package.json

@@ -32,23 +32,24 @@
   "dependencies": {
     "@solidjs/router": "^0.15.0",
     "chokidar": "^5.0.0",
-    "commander": "^12.1.0",
-    "csv-parse": "^5.5.6",
+    "commander": "^14.0.3",
+    "csv-parse": "^6.1.0",
     "js-yaml": "^4.1.1",
-    "marked": "^14.1.0",
+    "marked": "^17.0.3",
     "marked-alert": "^2.1.2",
     "marked-directive": "^1.0.7",
+    "mermaid": "^11.0.0",
     "solid-element": "^1.9.1",
     "solid-js": "^1.9.3"
   },
   "devDependencies": {
     "@rsbuild/core": "^1.1.8",
     "@rsbuild/plugin-babel": "^1.1.0",
-    "@rsbuild/plugin-solid": "^1.0.7",
+    "@rsbuild/plugin-solid": "^1.1.0",
     "@tailwindcss/postcss": "^4.2.1",
     "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/vite": "^4.0.0",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.19.13",
     "tailwindcss": "^4.0.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.2"

src/components/Article.tsx

@@ -1,6 +1,7 @@
 import { Component, createSignal, createEffect, onCleanup, Show, createResource } from 'solid-js';
 import { parseMarkdown } from '../markdown';
 import { fetchData, extractSection } from '../data-loader';
+import mermaid from 'mermaid';
 
 export interface ArticleProps {
   src: string;
@@ -30,6 +31,8 @@ export const Article: Component<ArticleProps> = (props) => {
     const data = content();
     if (data) {
       props.onLoaded?.();
+      // 内容加载完成后，渲染 mermaid 图表
+      void mermaid.run();
     }
   });
 

src/components/FileTree.tsx

@@ -87,6 +87,13 @@ export const HeadingNode: Component<{
   const handleClick = (e: MouseEvent) => {
     e.preventDefault();
     navigate(href);
+    // 滚动到目标元素
+    requestAnimationFrame(() => {
+      const element = document.getElementById(anchor);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    });
   };
 
   const indent = props.depth * 12;

src/markdown/index.ts

@@ -2,10 +2,12 @@ import { Marked } from 'marked';
 import {createDirectives, presetDirectiveConfigs} from 'marked-directive';
 import yaml from 'js-yaml';
 import markedAlert from "marked-alert";
+import markedMermaid from "./mermaid";
 
 // 使用 marked-directive 来支持指令语法
 const marked = new Marked()
     .use(markedAlert())
+    .use(markedMermaid())
     .use(createDirectives([
     ...presetDirectiveConfigs,
     {

src/markdown/mermaid.ts

@@ -0,0 +1,22 @@
+import type {MarkedExtension} from "marked";
+import mermaid from "mermaid";
+
+mermaid.initialize({
+    theme: 'dark'
+});
+
+export default function markedMermaid(): MarkedExtension {
+    return {
+        renderer: {
+            code: (code) => {
+                // Use default render for other languages
+                if (code.lang !== 'mermaid') {
+                    return false;
+                }
+
+                // Use Mermaid to render the diagram
+                return `<pre class="mermaid">${code.text}</pre>`;
+            },
+        },
+    };
+}