背景

在很久以前，我给我的Blog的主题加了 Hugo 的针对 Mermaid 和 Chart.js shortcodes 的支持。但是之支持迁入代码的方式。 如果文档很复杂，在Markdown里写大段的代码体验观感也不是很好。 而现在很多Markdown生态里是支持通过代码块的方式嵌入的。 同时现在很多插件可以直接按文件后缀编辑文件，然后直接指向文件的形式引用进来，这样可维护性会好很多。

我之前也懒得一个一个组件去研究和何种模式的测试搭配，现在AI很强了，刚好可以让它帮我把这个优化干了。 并且可以让这些插件都支持各种引入方式，确实是省事儿不少。

实测下来写代码还是Claude强，Google Gemini 3 Pro/Flash 也好，GPT 5.2/5.1-Codex-Max也好都会不同层度的瞎写。 Google Gemini 3 Pro写代码感觉比GPT 5.2强一点。但是通用总结，比如让它给我改Markdown的lingt错误Google Gemini 3 Pro比GPT 5.2差很多。

以下就是花了差不多2个小时，使用的Claude Opus 4.5模型，一口气消耗了Github copilot 75个高级Request（Copilot Pro+订阅的5%）。 最后完成了对 Mermaid、Chart.js、Excalidraw、draw.io/diagrams.net 的统一支持各种引用模式的支持。

AI自动生成的测试用例

This page demonstrates all supported methods for rendering diagrams and charts:

• Draw.io/diagrams.net - .drawio files
• Mermaid - .mermaid files
• Excalidraw - .excalidraw files
• Chart.js - .chart.json files
• ECharts - .echarts.json files
• Plotly.js - .plotly.json files

Each format supports 4 usage methods:

1. Image syntax: ![](file.ext)
2. Code block: ```language
3. Shortcode with src: {{< type src="file" >}}
4. Shortcode inline: {{< type >}}content{{< /type >}}

1. Draw.io/diagrams.net 测试

1.1 图片语法引用 .drawio 文件

下面是通过图片语法引用的 draw.io/diagrams.net 图表：

1.2 代码块方式（内嵌XML）

1.3 Shortcode 引用外部文件

1.4 Shortcode 内联方式

2. Mermaid 图片语法测试

2.1 图片语法引用 .mermaid 文件

下面是通过图片语法引用的 Mermaid 图表：

流程图

2.2 代码块方式

graph LR
    A[代码块方式] --> B{工作正常?}
    B -->|是| C[蓝色流程图]
    B -->|否| D[检查代码]
  

2.3 Shortcode 引用外部文件

Loading mermaid diagram...

2.4 Shortcode 内联方式

graph TD
    A[Shortcode 内联] --> B[Mermaid 图表]
    B --> C{正常显示?}
    C -->|是| D[成功]
    C -->|否| E[检查]
  

3. Excalidraw 图片语法测试

3.1 图片语法引用 .excalidraw 文件

下面是通过图片语法引用的 Excalidraw 图表：

3.2 Shortcode 引用外部文件

3.3 Shortcode 内联方式

3.4 代码块方式

4. Chart.js 测试

4.1 图片语法引用 .chart.json 文件

下面是通过图片语法引用的 Chart.js 图表：

4.2 Shortcode 引用外部文件

4.3 Shortcode 内联方式

4.4 代码块方式

4.5 代码块方式 (chartjs 语法)

5. ECharts 测试

ECharts 的扩展是增量式的：默认只加载核心包（含所有 2D 图表），需要 3D 时通过 extensions="gl" 追加 echarts-gl。下面分别用 2D 数学函数图 y = sin(x) 和 3D 曲面图 z = sin(sqrt(x^2 + y^2)) 覆盖四种引入方式。

5.1 图片语法引用 .echarts.json（2D 数学函数）

最小包即可渲染：

5.2 代码块方式（2D 数学函数）

5.3 Shortcode 引用外部文件（3D 曲面，gl 扩展）

3D 曲面需要 echarts-gl，通过 extensions="gl" 声明：

5.4 Shortcode 内联方式（3D 曲面，gl 扩展）

5.5 代码块方式（3D 曲面，gl 扩展）

代码块里通过 info string 的属性声明扩展：```echarts {extensions="gl"}。

6. Plotly.js 测试

Plotly.js 的 partial bundle（basic / gl3d / cartesian 等）互相覆盖全局 Plotly，无法叠加。因此加载策略是：默认只加载最小包（plotly-basic，含 scatter/bar/pie）；当页面里同时出现最小特性图表和声明了扩展的图表（如 3D 的 extensions="gl3d"）时，自动升级到完整包。本页同时有 2D 和 3D，所以会用完整包渲染。

6.1 图片语法引用 .plotly.json（2D 数学函数）

6.2 代码块方式（2D 数学函数）

6.3 Shortcode 引用外部文件（3D 曲面，gl3d 扩展）

6.4 Shortcode 内联方式（3D 曲面，gl3d 扩展）

6.5 代码块方式（3D 曲面，gl3d 扩展）

7. 测试结果

如果所有图表都能正常显示，说明功能正常工作！