From 32c2a72d2be30f5eac2a8083093b79dd44fbbae0 Mon Sep 17 00:00:00 2001 From: nanhaoluo <3075912108@qq.com> Date: Sat, 24 Jan 2026 21:02:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20Mermaid=20Shortcod?= =?UTF-8?q?e=20=E6=94=AF=E6=8C=81=EF=BC=88=E6=8E=A8=E8=8D=90=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 [mermaid]...[/mermaid] shortcode - 支持 theme、width、height、align 参数 - 不依赖 WP-Markdown 的处理方式 - 不会被 WordPress 自动格式化破坏 - 在原生编辑器中清晰可见 - 添加完整的使用指南和示例 --- argontheme.js | 8 +- docs/mermaid-shortcode-guide.md | 505 +++++++++++++++++++++++ functions.php | 29 +- tests/test-shortcode-example.md | 365 ++++++++++++++++ tests/test-single-element-container.html | 197 +++++++++ 5 files changed, 1102 insertions(+), 2 deletions(-) create mode 100644 docs/mermaid-shortcode-guide.md create mode 100644 tests/test-shortcode-example.md create mode 100644 tests/test-single-element-container.html diff --git a/argontheme.js b/argontheme.js index c8acd42..8ba663a 100644 --- a/argontheme.js +++ b/argontheme.js @@ -4429,6 +4429,7 @@ void 0; // 检测规则（优先级从高到低） const selectors = [ + 'div.mermaid-shortcode', // Shortcode 格式（推荐） 'div.mermaid', // 标准格式 'pre code.language-mermaid', // Markdown 格式 'pre[data-lang="mermaid"]', // 自定义属性格式 @@ -4690,8 +4691,13 @@ void 0; extractMermaidCode(element) { let code = ''; + // 处理 Shortcode 格式（推荐） + if (element.classList.contains('mermaid-shortcode')) { + code = element.textContent; + this.logDebug('从 Shortcode 格式提取代码'); + } // 处理 Markdown 容器语法格式 - if (element.classList.contains('mermaid-container-block')) { + else if (element.classList.contains('mermaid-container-block')) { code = element.textContent; this.logDebug('从 Markdown 容器语法提取代码'); } diff --git a/docs/mermaid-shortcode-guide.md b/docs/mermaid-shortcode-guide.md new file mode 100644 index 0000000..bcf8089 --- /dev/null +++ b/docs/mermaid-shortcode-guide.md @@ -0,0 +1,505 @@ +# Mermaid Shortcode 使用指南 + +## 为什么使用 Shortcode？ + +在 WP-Markdown 环境下，使用 Shortcode 是最可靠的 Mermaid 图表标记方式： + +### 优点 ✅ + +1. **不依赖 WP-Markdown 的处理方式** + - 不会被 WordPress 自动格式化破坏 + - 不会将 `-->` 转换为 `–>` + - 不会丢失换行符 + +2. **在原生编辑器中清晰可见** + - 经典编辑器：文本模式下直接可见 + - Gutenberg 编辑器：使用"短代码"块 + - 易于编辑和维护 + +3. **支持参数配置** + - 可以设置主题（theme） + - 可以设置宽度（width） + - 可以设置高度（height） + - 可以设置对齐方式（align） + +4. **完全兼容** + - 与其他 Shortcode 一样使用 + - 不需要额外插件 + - 不需要修改 WP-Markdown + +### 对比其他方式 + +| 方式 | 优点 | 缺点 | +|------|------|------| +| **Shortcode** ⭐ | 可靠、易用、支持参数 | 需要记住语法 | +| 容器语法 `::: mermaid` | 符合 Markdown 规范 | 被 WP 格式化破坏 | +| 代码块 ` ```mermaid ` | 通用 | 被代码高亮干扰 | +| HTML `
` | 灵活 | 编辑不便 | + +--- + +## 基本用法 + +### 语法 + +``` +[mermaid] +flowchart TD + A[开始] --> B[处理] + B --> C[结束] +[/mermaid] +``` + +### 在经典编辑器中使用 + +1. 切换到"文本"模式（不是"可视化"模式） +2. 输入 Shortcode： + ``` + [mermaid] + 你的 Mermaid 代码 + [/mermaid] + ``` +3. 保存并预览 + +### 在 Gutenberg 编辑器中使用 + +1. 添加"短代码"块（Shortcode Block） +2. 输入 Shortcode： + ``` + [mermaid] + 你的 Mermaid 代码 + [/mermaid] + ``` +3. 保存并预览 + +--- + +## 参数说明 + +### theme - 主题 + +设置图表主题，支持以下值： +- `default` - 默认主题（浅色） +- `dark` - 深色主题 +- `forest` - 森林主题 +- `neutral` - 中性主题 + +**示例**： +``` +[mermaid theme="dark"] +flowchart TD + A --> B +[/mermaid] +``` + +### width - 宽度 + +设置图表容器宽度，支持： +- 百分比：`100%`, `80%`, `50%` +- 像素值：`800px`, `600px` +- 自动：`auto` + +**示例**： +``` +[mermaid width="80%"] +flowchart TD + A --> B +[/mermaid] +``` + +### height - 高度 + +设置图表容器高度，支持： +- 像素值：`600px`, `400px` +- 自动：`auto`（默认） + +**示例**： +``` +[mermaid height="500px"] +flowchart TD + A --> B +[/mermaid] +``` + +### align - 对齐方式 + +设置图表对齐方式，支持： +- `left` - 左对齐 +- `center` - 居中（默认） +- `right` - 右对齐 + +**示例**： +``` +[mermaid align="left"] +flowchart TD + A --> B +[/mermaid] +``` + +### 组合使用 + +``` +[mermaid theme="dark" width="80%" height="500px" align="center"] +flowchart TD + A[开始] --> B[处理] + B --> C[结束] +[/mermaid] +``` + +--- + +## 使用示例 + +### 示例 1: 简单流程图 + +``` +[mermaid] +flowchart TD + Start([开始]) --> Process[处理数据] + Process --> Decision{是否成功?} + Decision -->|是| Success[显示成功] + Decision -->|否| Error[显示错误] + Success --> End([结束]) + Error --> End +[/mermaid] +``` + +### 示例 2: 时序图 + +``` +[mermaid] +sequenceDiagram + participant User as 用户 + participant Server as 服务器 + participant DB as 数据库 + + User->>Server: 发送请求 + Server->>DB: 查询数据 + DB-->>Server: 返回数据 + Server-->>User: 返回响应 +[/mermaid] +``` + +### 示例 3: 类图 + +``` +[mermaid] +classDiagram + class Animal { + +String name + +int age + +makeSound() + } + class Dog { + +String breed + +bark() + } + class Cat { + +String color + +meow() + } + Animal <|-- Dog + Animal <|-- Cat +[/mermaid] +``` + +### 示例 4: 甘特图 + +``` +[mermaid] +gantt + title 项目进度 + dateFormat YYYY-MM-DD + section 设计 + 需求分析 :a1, 2024-01-01, 7d + UI设计 :a2, after a1, 5d + section 开发 + 前端开发 :b1, after a2, 10d + 后端开发 :b2, after a2, 12d + section 测试 + 功能测试 :c1, after b1, 5d + 性能测试 :c2, after b2, 3d +[/mermaid] +``` + +### 示例 5: 状态图 + +``` +[mermaid] +stateDiagram-v2 + [*] --> 待审核 + 待审核 --> 已通过: 审核通过 + 待审核 --> 已拒绝: 审核拒绝 + 已通过 --> [*] + 已拒绝 --> [*] +[/mermaid] +``` + +### 示例 6: 饼图 + +``` +[mermaid] +pie title 编程语言使用占比 + "JavaScript" : 386 + "Python" : 285 + "Java" : 215 + "C++" : 115 + "其他" : 85 +[/mermaid] +``` + +### 示例 7: ER 图 + +``` +[mermaid] +erDiagram + USER ||--o{ ORDER : places + ORDER ||--|{ ORDER_ITEM : contains + PRODUCT ||--o{ ORDER_ITEM : "ordered in" + + USER { + int id PK + string name + string email + } + ORDER { + int id PK + int user_id FK + date created_at + } + PRODUCT { + int id PK + string name + decimal price + } +[/mermaid] +``` + +### 示例 8: 带样式的流程图 + +``` +[mermaid] +flowchart TD + Start([用户提交评论]) --> PreProcess[预处理] + PreProcess --> CheckEnabled{启用 AI 检测?} + CheckEnabled -->|是| AICheck[AI 检测] + CheckEnabled -->|否| Save[保存评论] + AICheck --> Result{检测结果?} + Result -->|垃圾评论| Trash[移入回收站] + Result -->|正常评论| Save + + style Start fill:#e1f5e1,stroke:#2e7d32,stroke-width:2px + style Trash fill:#ff6b6b,stroke:#c62828,stroke-width:2px + style Save fill:#95e1d3,stroke:#2e7d32,stroke-width:2px +[/mermaid] +``` + +--- + +## 常见问题 + +### 1. Shortcode 不生效怎么办？ + +**可能原因**： +- 主题未更新到最新版本 +- 使用了"可视化"模式编辑 + +**解决方案**： +1. 更新 Argon 主题到最新版本 +2. 切换到"文本"模式编辑 +3. 检查 Shortcode 语法是否正确 + +### 2. 图表渲染失败怎么办？ + +**排查步骤**： + +1. **检查 Mermaid 语法** + - 访问 [Mermaid Live Editor](https://mermaid.live/) + - 粘贴你的代码验证语法 + +2. **查看浏览器控制台** + - 按 F12 打开开发者工具 + - 查看 Console 标签页 + - 搜索错误信息 + +3. **检查主题设置** + - WordPress 后台 → 外观 → Argon 主题选项 + - 找到"Mermaid 图表"分类 + - 确认"启用 Mermaid 支持"已开启 + +### 3. 如何迁移现有的容器语法？ + +如果你之前使用了 `::: mermaid ... :::` 语法，可以批量替换： + +**查找**： +``` +::: mermaid +``` + +**替换为**： +``` +[mermaid] +``` + +**查找**： +``` +::: +``` + +**替换为**： +``` +[/mermaid] +``` + +### 4. 可以在评论中使用吗？ + +不可以。Shortcode 只能在文章和页面中使用，评论中不支持。 + +### 5. 可以嵌套使用吗？ + +不可以。Shortcode 不支持嵌套，每个图表需要独立的 `[mermaid]...[/mermaid]` 标签。 + +--- + +## 最佳实践 + +### 1. 使用有意义的节点 ID + +**推荐**： +``` +[mermaid] +flowchart TD + UserSubmit([用户提交]) --> Validate[验证数据] + Validate --> Save[保存数据] +[/mermaid] +``` + +**不推荐**： +``` +[mermaid] +flowchart TD + A --> B + B --> C +[/mermaid] +``` + +### 2. 添加适当的注释 + +``` +[mermaid] +flowchart TD + %% 用户流程 + Start([开始]) --> Login[登录] + + %% 验证流程 + Login --> Check{验证成功?} + Check -->|是| Dashboard[进入控制台] + Check -->|否| Error[显示错误] +[/mermaid] +``` + +### 3. 使用样式定义 + +``` +[mermaid] +flowchart TD + Success[成功] --> End + Error[错误] --> End + + style Success fill:#95e1d3,stroke:#2e7d32 + style Error fill:#ff6b6b,stroke:#c62828 +[/mermaid] +``` + +### 4. 保持图表简洁 + +- 避免过多的节点（建议 < 20 个） +- 使用子图（subgraph）组织复杂流程 +- 考虑拆分为多个图表 + +### 5. 测试后再发布 + +1. 先在 [Mermaid Live Editor](https://mermaid.live/) 中测试 +2. 确认语法正确后再粘贴到文章中 +3. 使用"预览"功能查看效果 +4. 确认无误后再发布 + +--- + +## 技术细节 + +### Shortcode 实现 + +Argon 主题在 `functions.php` 中注册了 `mermaid` shortcode： + +```php +add_shortcode('mermaid','shortcode_mermaid'); +function shortcode_mermaid($attr,$content=""){ + // 预处理内容 + $content = shortcode_content_preprocess($attr, $content); + + // 获取参数 + $theme = isset( $attr['theme'] ) ? $attr['theme'] : 'default'; + $width = isset( $attr['width'] ) ? $attr['width'] : '100%'; + $height = isset( $attr['height'] ) ? $attr['height'] : 'auto'; + $align = isset( $attr['align'] ) ? $attr['align'] : 'center'; + + // 生成 HTML + $out = '
'; + $out .= '
'; + $out .= esc_html($content); + $out .= '
'; + + return $out; +} +``` + +### JavaScript 检测 + +在 `argontheme.js` 中，Mermaid 渲染器会自动检测 `div.mermaid-shortcode` 元素： + +```javascript +const selectors = [ + 'div.mermaid-shortcode', // Shortcode 格式（推荐） + 'div.mermaid', // 标准格式 + // ... +]; +``` + +### 安全性 + +- 使用 `esc_html()` 转义输出，防止 XSS 攻击 +- 使用 `esc_attr()` 转义属性值 +- 不执行任何用户提供的 JavaScript 代码 + +--- + +## 相关资源 + +- [Mermaid 官方文档](https://mermaid.js.org/) +- [Mermaid Live Editor](https://mermaid.live/) +- [WordPress Shortcode API](https://developer.wordpress.org/plugins/shortcodes/) +- [Argon 主题文档](https://argon-docs.solstice23.top/) + +--- + +## 更新日志 + +### 2026-01-24 +- ✅ 添加 Mermaid Shortcode 支持 +- ✅ 支持 theme、width、height、align 参数 +- ✅ 自动检测和渲染 +- ✅ 完整的使用文档和示例 + +--- + +## 总结 + +使用 Shortcode 是在 WP-Markdown 环境下最可靠的 Mermaid 图表标记方式： + +1. **简单易用**：`[mermaid]...[/mermaid]` +2. **功能强大**：支持主题、尺寸、对齐等参数 +3. **完全兼容**：不需要额外插件或修改 +4. **易于维护**：在编辑器中清晰可见 + +推荐所有用户使用 Shortcode 方式编写 Mermaid 图表！ diff --git a/functions.php b/functions.php index 6f33a51..7dd6823 100644 --- a/functions.php +++ b/functions.php @@ -4586,6 +4586,32 @@ function shortcode_video($attr,$content=""){ $out .= ""; return $out; } +add_shortcode('mermaid','shortcode_mermaid'); +function shortcode_mermaid($attr,$content=""){ + // 预处理内容：移除 WordPress 自动添加的

和
标签 + $content = shortcode_content_preprocess($attr, $content); + + // 获取参数 + $theme = isset( $attr['theme'] ) ? $attr['theme'] : 'default'; + $width = isset( $attr['width'] ) ? $attr['width'] : '100%'; + $height = isset( $attr['height'] ) ? $attr['height'] : 'auto'; + $align = isset( $attr['align'] ) ? $attr['align'] : 'center'; + + // 生成唯一 ID + $chart_id = 'mermaid-' . mt_rand(1000000000, 9999999999); + + // 构建输出 + $out = '

'; + $out .= '
'; + $out .= esc_html($content); + $out .= '
'; + $out .= '
'; + + return $out; +} add_shortcode('hide_reading_time','shortcode_hide_reading_time'); function shortcode_hide_reading_time($attr,$content=""){ return ""; @@ -9200,7 +9226,8 @@ function argon_has_mermaid_content($content) { '/]*class=["\']([^"\']*\s)?mermaid(\s[^"\']*)?["\'][^>]*>/i', //
'/]*class=["\']([^"\']*\s)?language-mermaid(\s[^"\']*)?["\'][^>]*>/i', // '/]*data-lang=["\']mermaid["\'][^>]*>/i', // 
-		'/]*class=["\']([^"\']*\s)?mermaid(\s[^"\']*)?["\'][^>]*>/i'  // 
+		'/]*class=["\']([^"\']*\s)?mermaid(\s[^"\']*)?["\'][^>]*>/i',  // 
+		'/:::\s*mermaid/i'  // ::: mermaid (Markdown 容器语法)
 	];
 	
 	foreach ($patterns as $pattern) {
diff --git a/tests/test-shortcode-example.md b/tests/test-shortcode-example.md
new file mode 100644
index 0000000..adbfa13
--- /dev/null
+++ b/tests/test-shortcode-example.md
@@ -0,0 +1,365 @@
+# AI 垃圾评论检测系统架构
+
+## 系统概述
+
+本文档展示 Argon 主题的 AI 垃圾评论检测系统的完整架构和流程。
+
+## 主流程图
+
+[mermaid theme="default" width="100%" align="center"]
+flowchart TD
+    Start([用户提交评论]) --> PreProcess[预处理评论]
+    PreProcess --> CheckEnabled{启用 AI 检测?}
+    
+    CheckEnabled -->|否| DirectSave[直接保存评论]
+    CheckEnabled -->|是| CheckMode{检测模式?}
+    
+    CheckMode -->|manual| DirectSave
+    CheckMode -->|keyword| CheckKeyword[检查关键字]
+    CheckMode -->|sample| CheckSample[智能抽样]
+    CheckMode -->|all| NeedCheck[需要检测]
+    
+    CheckKeyword --> KeywordMatch{匹配关键字?}
+    KeywordMatch -->|是| NeedCheck
+    KeywordMatch -->|否| DirectSave
+    
+    CheckSample --> SampleDecision{抽中?}
+    SampleDecision -->|是| NeedCheck
+    SampleDecision -->|否| DirectSave
+    
+    NeedCheck --> SetPending[设置待审核状态]
+    SetPending --> SaveWithFlag[保存评论并标记]
+    SaveWithFlag --> TriggerDetect[触发 AI 检测]
+    
+    TriggerDetect --> CallAPI[调用 AI API]
+    CallAPI --> ParseResult[解析结果]
+    
+    ParseResult --> CheckConfidence{置信度?}
+    CheckConfidence -->|高| AutoHandle[自动处理]
+    CheckConfidence -->|中| ManualReview[人工审核]
+    CheckConfidence -->|低| MarkNormal[标记正常]
+    
+    AutoHandle --> CheckAction{处理方式?}
+    CheckAction -->|trash| MoveTrash[移入回收站]
+    CheckAction -->|hold| KeepPending[保持待审核]
+    CheckAction -->|mark| JustMark[仅标记]
+    
+    MoveTrash --> NotifyAdmin[通知管理员]
+    KeepPending --> NotifyAdmin
+    JustMark --> SaveResult[保存结果]
+    ManualReview --> SaveResult
+    MarkNormal --> SaveResult
+    NotifyAdmin --> SaveResult
+    
+    SaveResult --> AILearn{启用学习?}
+    AILearn -->|是| ExtractKeywords[提取关键词]
+    AILearn -->|否| End([结束])
+    ExtractKeywords --> UpdateDB[更新词库]
+    UpdateDB --> End
+    
+    DirectSave --> End
+    
+    style Start fill:#e1f5e1,stroke:#2e7d32,stroke-width:2px
+    style End fill:#e1f5e1,stroke:#2e7d32,stroke-width:2px
+    style MoveTrash fill:#ff6b6b,stroke:#c62828,stroke-width:2px
+    style MarkNormal fill:#95e1d3,stroke:#2e7d32,stroke-width:2px
+    style ManualReview fill:#ffa500,stroke:#ff8f00,stroke-width:2px
+[/mermaid]
+
+## 检测模式详解
+
+[mermaid theme="default" width="80%" align="center"]
+flowchart LR
+    subgraph Manual[Manual 模式]
+        M1[关闭实时检测]
+        M2[仅手动扫描]
+    end
+    
+    subgraph Keyword[Keyword 模式]
+        K1[关键字触发]
+        K2[精准检测]
+        K3[低成本]
+    end
+    
+    subgraph Sample[Sample 模式]
+        S1[智能抽样]
+        S2[平衡准确性]
+        S3[控制成本]
+    end
+    
+    subgraph All[All 模式]
+        A1[全量检测]
+        A2[最高准确性]
+        A3[高成本]
+    end
+    
+    style Manual fill:#e3f2fd
+    style Keyword fill:#fff3e0
+    style Sample fill:#f3e5f5
+    style All fill:#fce4ec
+[/mermaid]
+
+## AI 检测流程
+
+[mermaid theme="default" width="90%"]
+sequenceDiagram
+    participant User as 用户
+    participant WP as WordPress
+    participant Argon as Argon 主题
+    participant AI as AI API
+    participant DB as 数据库
+    
+    User->>WP: 提交评论
+    WP->>Argon: 触发 preprocess_comment
+    Argon->>Argon: 检查检测规则
+    
+    alt 需要检测
+        Argon->>DB: 保存评论（待审核）
+        Argon->>AI: 发送检测请求
+        AI-->>Argon: 返回检测结果
+        Argon->>Argon: 解析结果和置信度
+        
+        alt 高置信度垃圾评论
+            Argon->>DB: 移入回收站
+            Argon->>WP: 发送通知邮件
+        else 中等置信度
+            Argon->>DB: 标记待人工审核
+        else 正常评论
+            Argon->>DB: 标记为正常
+        end
+        
+        Argon->>DB: 保存检测记录
+        
+        opt 启用 AI 学习
+            Argon->>AI: 提取关键词
+            AI-->>Argon: 返回关键词
+            Argon->>DB: 更新学习词库
+        end
+    else 跳过检测
+        Argon->>DB: 直接保存评论
+    end
+    
+    WP-->>User: 显示提交结果
+[/mermaid]
+
+## 数据库结构
+
+[mermaid theme="default" width="85%"]
+erDiagram
+    COMMENT ||--o{ COMMENT_META : has
+    COMMENT {
+        bigint comment_ID PK
+        bigint comment_post_ID FK
+        text comment_content
+        varchar comment_author
+        varchar comment_author_email
+        varchar comment_author_IP
+        datetime comment_date
+        varchar comment_approved
+    }
+    
+    COMMENT_META {
+        bigint meta_id PK
+        bigint comment_id FK
+        varchar meta_key
+        longtext meta_value
+    }
+    
+    SPAM_DETECTION ||--|| COMMENT : detects
+    SPAM_DETECTION {
+        bigint id PK
+        bigint comment_id FK
+        varchar result
+        float confidence
+        text reason
+        text keywords
+        datetime detected_at
+        varchar detection_code
+    }
+    
+    LEARNED_KEYWORDS ||--o{ SPAM_DETECTION : learns_from
+    LEARNED_KEYWORDS {
+        bigint id PK
+        varchar keyword
+        int weight
+        varchar category
+        datetime created_at
+        datetime updated_at
+    }
+[/mermaid]
+
+## 系统状态机
+
+[mermaid theme="default" width="70%"]
+stateDiagram-v2
+    [*] --> Submitted: 用户提交
+    
+    Submitted --> Pending: 需要检测
+    Submitted --> Approved: 跳过检测
+    
+    Pending --> Detecting: 开始检测
+    Detecting --> Analyzed: 检测完成
+    
+    Analyzed --> Spam: 高置信度垃圾
+    Analyzed --> Suspicious: 中等置信度
+    Analyzed --> Clean: 低置信度/正常
+    
+    Spam --> Trash: 自动处理
+    Spam --> Hold: 保持待审核
+    Spam --> Marked: 仅标记
+    
+    Suspicious --> ManualReview: 等待人工审核
+    Clean --> Approved: 自动通过
+    
+    ManualReview --> Approved: 管理员批准
+    ManualReview --> Trash: 管理员拒绝
+    
+    Hold --> Approved: 管理员批准
+    Hold --> Trash: 管理员拒绝
+    
+    Marked --> Approved: 管理员批准
+    Marked --> Trash: 管理员拒绝
+    
+    Trash --> [*]
+    Approved --> [*]
+    
+    note right of Detecting
+        调用 AI API
+        解析返回结果
+        计算置信度
+    end note
+    
+    note right of ManualReview
+        显示在后台
+        等待管理员操作
+    end note
+[/mermaid]
+
+## 性能优化策略
+
+[mermaid theme="default" width="95%"]
+flowchart TD
+    subgraph Input[输入优化]
+        I1[关键字预过滤]
+        I2[白名单用户]
+        I3[智能抽样]
+    end
+    
+    subgraph Process[处理优化]
+        P1[异步检测]
+        P2[批量处理]
+        P3[缓存结果]
+    end
+    
+    subgraph API[API 优化]
+        A1[Prompt 优化]
+        A2[Token 控制]
+        A3[超时处理]
+    end
+    
+    subgraph Storage[存储优化]
+        S1[索引优化]
+        S2[定期清理]
+        S3[归档历史]
+    end
+    
+    Input --> Process
+    Process --> API
+    API --> Storage
+    
+    style Input fill:#e8f5e9
+    style Process fill:#e3f2fd
+    style API fill:#fff3e0
+    style Storage fill:#f3e5f5
+[/mermaid]
+
+## 配置建议矩阵
+
+[mermaid theme="default" width="100%"]
+graph TB
+    subgraph Small[小型博客 < 100评论/天]
+        S1[检测模式: keyword]
+        S2[Prompt: 标准模式]
+        S3[置信度阈值: > 0.9]
+        S4[自动处理: trash]
+    end
+    
+    subgraph Medium[中型博客 100-500评论/天]
+        M1[检测模式: sample 30%]
+        M2[Prompt: 标准模式]
+        M3[置信度阈值: > 0.85]
+        M4[自动处理: hold]
+    end
+    
+    subgraph Large[大型博客 > 500评论/天]
+        L1[检测模式: sample 40%]
+        L2[Prompt: 极简模式]
+        L3[置信度阈值: > 0.8]
+        L4[自动处理: mark]
+        L5[定期批量扫描]
+    end
+    
+    style Small fill:#c8e6c9
+    style Medium fill:#fff9c4
+    style Large fill:#ffccbc
+[/mermaid]
+
+## 错误处理流程
+
+[mermaid theme="default" width="85%"]
+flowchart TD
+    Start([检测开始]) --> CallAPI[调用 AI API]
+    
+    CallAPI --> CheckResponse{响应状态?}
+    
+    CheckResponse -->|成功| ParseJSON[解析 JSON]
+    CheckResponse -->|超时| Timeout[超时处理]
+    CheckResponse -->|错误| APIError[API 错误]
+    
+    ParseJSON --> ValidateData{数据有效?}
+    ValidateData -->|是| ProcessResult[处理结果]
+    ValidateData -->|否| DataError[数据错误]
+    
+    Timeout --> RetryCheck{重试次数?}
+    RetryCheck -->|< 3| Retry[重试请求]
+    RetryCheck -->|>= 3| FallbackPending[降级：待审核]
+    
+    Retry --> CallAPI
+    
+    APIError --> LogError[记录错误日志]
+    DataError --> LogError
+    
+    LogError --> NotifyAdmin[通知管理员]
+    NotifyAdmin --> FallbackPending
+    
+    ProcessResult --> SaveResult[保存结果]
+    FallbackPending --> SaveResult
+    
+    SaveResult --> End([结束])
+    
+    style Timeout fill:#ffccbc
+    style APIError fill:#ffccbc
+    style DataError fill:#ffccbc
+    style FallbackPending fill:#fff9c4
+    style ProcessResult fill:#c8e6c9
+[/mermaid]
+
+## 总结
+
+通过以上流程图，我们可以清晰地看到：
+
+1. **主流程**：从用户提交到最终处理的完整流程
+2. **检测模式**：四种模式的特点和适用场景
+3. **时序交互**：各组件之间的交互顺序
+4. **数据结构**：数据库表关系和字段定义
+5. **状态机**：评论的各种状态转换
+6. **性能优化**：多层次的优化策略
+7. **配置建议**：不同规模博客的推荐配置
+8. **错误处理**：完善的异常处理机制
+
+这个系统设计充分考虑了：
+- ✅ 准确性：多级置信度判断
+- ✅ 性能：异步处理、智能抽样
+- ✅ 成本：灵活的检测模式
+- ✅ 可靠性：完善的错误处理
+- ✅ 可维护性：清晰的架构设计
diff --git a/tests/test-single-element-container.html b/tests/test-single-element-container.html
new file mode 100644
index 0000000..2688407
--- /dev/null
+++ b/tests/test-single-element-container.html
@@ -0,0 +1,197 @@
+
+
+
+	
+	
+	单元素容器语法测试
+	
+
+
+	
单元素容器语法测试

+	
测试 WP-Markdown 将整个容器语法放在一个 <p> 元素中的情况

+
+	
+	

+		
测试 1: 简单流程图（单元素，带全角箭头）

+		
::: mermaid
flowchart TD
    Start([开始]) –> Process[处理]
    Process –> End([结束])
:::

+		

+	

+
+	
+	

+		
测试 2: 带样式定义（单元素）

+		
::: mermaid
flowchart LR
    A[开始] –> B[处理]
    B –> C[结束]
    style A fill:#e1f5e1,stroke:#2e7d32
    style C fill:#ffe1e1,stroke:#c62828
:::

+		

+	

+
+	
+	

+		
测试 3: 复杂流程图（单元素，多个节点）

+		
::: mermaid
flowchart TD
    Start([用户提交评论]) –> PreProcess[预处理]
    PreProcess –> CheckEnabled{启用 AI 检测?}
    CheckEnabled –>|否| SaveComment[保存评论]
    CheckEnabled –>|是| CheckMode{检测模式?}
    CheckMode –>|manual| SaveComment
    CheckMode –>|keyword/sample/all| AICheck[AI 检测]
    AICheck –> CheckResult{检测结果?}
    CheckResult –>|垃圾评论| Trash[移入回收站]
    CheckResult –>|正常评论| SaveComment
    style Start fill:#e1f5e1,stroke:#2e7d32
    style Trash fill:#ff6b6b,stroke:#c62828
:::

+		

+	

+
+	
+	
+
+