介绍如何在文章中添加mermaid语法支持介绍如何在文章中添加mermaid语法支持介绍如何在文章中添加mermaid语法支持

修改主题文件

将以下代码粘贴至Gridea站点源文件夹中里post.ejs文件的部分
例如我的源文件夹是E:\Gridea主题使用的是 gridea-theme-next
那我这个文件完整路径就是E:\Gridea\themes\gridea-theme-next\templates\post.ejs

<script>
// 加载外部脚本
function loadScript(src, callback) {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.onload = callback;
    document.head.appendChild(script);
}

// 初始化Mermaid
function initializeMermaid(config) {
    mermaid.initialize(config);
}

// 渲染单个Mermaid图表
function renderMermaidChart(element, index) {
    let graphDefinition = element.textContent.trim();
    if (graphDefinition) {
        let svg = mermaid.render(`ha_mermaid_${index}`, graphDefinition);
        if (svg) {
            let svgElement = document.createElement('div');
            svgElement.innerHTML = svg;
            svgElement.classList.add('mermaid');
            svgElement.setAttribute('data-processed', 'true');
            element.parentNode.replaceChild(svgElement, element);
        }
    }
}

// 懒加载Mermaid图表
function lazyLoadMermaidCharts() {
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                observer.unobserve(entry.target);
                renderMermaidChart(entry.target);
            }
        });
    }, { threshold: 0.5 }); // 触发加载的阈值为元素显示50%时

    const elements = document.querySelectorAll(".language-mermaid");
    elements.forEach(element => {
        observer.observe(element);
    });
}

// 当DOM加载完成时执行
document.addEventListener("DOMContentLoaded", function() {
    // 异步加载Mermaid.js
    loadScript('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js', function() {
        // Mermaid配置选项
        const mermaidConfig = {
            startOnLoad: true,
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true
            }
        };
        // 初始化Mermaid
        initializeMermaid(mermaidConfig);
        // 懒加载Mermaid图表
        lazyLoadMermaidCharts();
    });
});
</script>

如何引用

只需在中间添加对应代码即可

<div class="mermaid">
图表内容
</div>

流程图语法示例：

<div class="mermaid">
graph TD
  A[开始] --> B{条件判断}
  B -->|是| C[操作1]
  B -->|否| D[操作2]
  C --> E[结束]
  D --> E
</div>

流程图显示为：

本文方法来自于：杂乱的杂货铺