feat: mermaid

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>`;
+            },
+        },
+    };
+}