背景

在很久以前，我给我的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

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. 测试结果

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