From 627a57c5e9ed5f92b220083bacacb4b41aa3116c Mon Sep 17 00:00:00 2001
From: nanhaoluo <3075912108@qq.com>
Date: Fri, 23 Jan 2026 18:50:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20Mermaid=20?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在设置页功能增强分类中添加 Mermaid 图表设置项
- 支持启用/禁用 Mermaid 渲染
- 支持自定义 CDN 地址（默认 jsdelivr）
- 提供 4 种主题选择（默认/森林/暗色/中性）
- 在 footer.php 中添加 Mermaid 库加载和初始化逻辑
- 自动识别 language-mermaid 和 mermaid 类的代码块
- 在 style.css 中添加 Mermaid 图表样式
- 支持响应式布局和夜间模式
- 使用方式：在代码块中指定语言为 mermaid
---
 footer.php   | 48 +++++++++++++++++++++++++++++++++++
 settings.php | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css    | 32 +++++++++++++++++++++++
 3 files changed, 152 insertions(+)

diff --git a/footer.php b/footer.php
index 0d428b0..d07f187 100644
--- a/footer.php
+++ b/footer.php
@@ -147,6 +147,54 @@
 
 		<?php }?>
 
+		<?php if (get_option('argon_enable_mermaid') == 'true') { /*Mermaid*/?>
+
+			<script src="<?php echo get_option('argon_mermaid_cdn_url') == '' ? '//cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js' : get_option('argon_mermaid_cdn_url'); ?>"></script>
+
+			<script>
+
+				document.addEventListener("DOMContentLoaded", function() {
+
+					mermaid.initialize({
+
+						startOnLoad: true,
+
+						theme: '<?php echo get_option('argon_mermaid_theme', 'default'); ?>',
+
+						securityLevel: 'loose',
+
+						flowchart: {
+
+							useMaxWidth: true,
+
+							htmlLabels: true
+
+						}
+
+					});
+
+					// 自动渲染所有 mermaid 代码块
+
+					document.querySelectorAll('pre code.language-mermaid, pre code.mermaid').forEach(function(element) {
+
+						let pre = element.parentElement;
+
+						let mermaidDiv = document.createElement('div');
+
+						mermaidDiv.className = 'mermaid';
+
+						mermaidDiv.textContent = element.textContent;
+
+						pre.parentNode.replaceChild(mermaidDiv, pre);
+
+					});
+
+				});
+
+			</script>
+
+		<?php }?>
+
 
 
 		<?php if (get_option('argon_enable_code_highlight') == 'true') { /*Highlight.js*/?>
diff --git a/settings.php b/settings.php
index f60404e..5f165e5 100644
--- a/settings.php
+++ b/settings.php
@@ -2824,6 +2824,70 @@ function themeoptions_page(){
 
 					</tr>
 
+					<tr><th class="subtitle"><h3 id="subsection-mermaid"><?php _e('Mermaid 图表', 'argon');?></h3></th></tr>
+
+					<tr>
+
+						<th><label><?php _e('启用 Mermaid 图表渲染', 'argon');?></label></th>
+
+						<td>
+
+							<select name="argon_enable_mermaid">
+
+								<?php $argon_enable_mermaid = get_option('argon_enable_mermaid', 'false'); ?>
+
+								<option value="false" <?php if ($argon_enable_mermaid=='false'){echo 'selected';} ?>><?php _e('不启用', 'argon');?></option>
+
+								<option value="true" <?php if ($argon_enable_mermaid=='true'){echo 'selected';} ?>><?php _e('启用', 'argon');?></option>
+
+							</select>
+
+							<p class="description"><?php _e('启用后，文章中的 Mermaid 代码块会被自动渲染为图表。使用方式：在代码块中指定语言为 mermaid', 'argon');?></p>
+
+						</td>
+
+					</tr>
+
+					<tr>
+
+						<th><label>Mermaid CDN <?php _e('地址', 'argon');?></label></th>
+
+						<td>
+
+							<input type="text" class="regular-text" name="argon_mermaid_cdn_url" value="<?php echo get_option('argon_mermaid_cdn_url') == '' ? '//cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js' : get_option('argon_mermaid_cdn_url'); ?>"/>
+
+							<p class="description"><?php _e('默认为', 'argon');?> <code>//cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js</code></p>
+
+						</td>
+
+					</tr>
+
+					<tr>
+
+						<th><label><?php _e('Mermaid 主题', 'argon');?></label></th>
+
+						<td>
+
+							<select name="argon_mermaid_theme">
+
+								<?php $argon_mermaid_theme = get_option('argon_mermaid_theme', 'default'); ?>
+
+								<option value="default" <?php if ($argon_mermaid_theme=='default'){echo 'selected';} ?>><?php _e('默认', 'argon');?></option>
+
+								<option value="forest" <?php if ($argon_mermaid_theme=='forest'){echo 'selected';} ?>><?php _e('森林', 'argon');?></option>
+
+								<option value="dark" <?php if ($argon_mermaid_theme=='dark'){echo 'selected';} ?>><?php _e('暗色', 'argon');?></option>
+
+								<option value="neutral" <?php if ($argon_mermaid_theme=='neutral'){echo 'selected';} ?>><?php _e('中性', 'argon');?></option>
+
+							</select>
+
+							<p class="description"><?php _e('选择 Mermaid 图表的配色主题', 'argon');?></p>
+
+						</td>
+
+					</tr>
+
 					<tr><th class="subtitle"><h3 id="subsection-lazyload">Lazyload</h3></th></tr>
 
 					<tr>
@@ -6733,6 +6797,14 @@ function argon_update_themeoptions(){
 
 		argon_update_option('argon_lazyload_loading_style');
 
+		//Mermaid 相关
+
+		argon_update_option('argon_enable_mermaid');
+
+		argon_update_option('argon_mermaid_cdn_url');
+
+		argon_update_option('argon_mermaid_theme');
+
 
 
 		//图片缩放预览相关
diff --git a/style.css b/style.css
index f650373..d79936f 100644
--- a/style.css
+++ b/style.css
@@ -9585,6 +9585,38 @@ pre.hljs-codeblock.hljs-codeblock-fullscreen .hljs-control-fullscreen > i:before
 
 }
 
+/* ========== Mermaid 图表样式 ========== */
+
+article .mermaid {
+
+	text-align: center;
+
+	margin: 20px 0;
+
+	padding: 20px;
+
+	background: rgba(255, 255, 255, 0.5);
+
+	border-radius: var(--card-radius);
+
+	overflow-x: auto;
+
+}
+
+html.darkmode article .mermaid {
+
+	background: rgba(66, 66, 66, 0.5);
+
+}
+
+article .mermaid svg {
+
+	max-width: 100%;
+
+	height: auto;
+
+}
+
 
 
 /*==========Style-Dark==========*/