AI编码-模型还差点火候

最近笔记转换到了Obsidian，所以想开发了一个Obsidian插件

需求很简单，把Obsidian里面的笔记一键发布到公众号，在这个里面有个小的需求，需要把mermaid图转换成图片自动上传微信

类似hexo中的hexo-filter-mermaid-diagrams插件

hexo-filter-mermaid-diagrams 是一个用于 Hexo 的 Mermaid 插件。

它的核心思路不是“在构建时把 Mermaid 转成最终图片”，而是：

在页面中注入 Mermaid 脚本，等博客页面加载后，由浏览器再去渲染 Mermaid 图表。

但公众号里面不能这处理

微信公众号复制场景有个关键限制：

• 粘贴到公众号编辑器后，不能依赖额外脚本继续执行 Mermaid

比如一个流程图：

Mermaid 自定义样式渲染修复

问题：Mermaid 图表中使用 style 指令自定义节点颜色（如 style B fill:#e1f5fe）时，导出到 PNG 后节点显示为黑色背景，丢失自定义填充色。

根本原因：

• Mermaid 将自定义样式写入 SVG 元素的 inline style 属性

• Canvg 在光栅化时无法正确处理 inline style 的 CSS 优先级

• <style> 块中的默认主题规则（如 .node rect { fill: #ECECFF; }）覆盖了自定义样式

解决方案：

1. 保留 <style> 块（默认节点依赖它提供填充色和边框）

2. 提取 inline style 中的 SVG 属性（fill、stroke 等）

3. 为包含自定义样式的元素添加唯一 CSS 类

4. 将提取的属性以 !important 规则追加到 <style> 块末尾

5. 同时设置 SVG presentation attributes 作为兜底

这样既保证默认节点的样式完整，又通过 CSS 优先级确保自定义样式正确渲染。

使用 Claude Opus 4.6 模型

使用gpt-5.3-codex 和 gpt-5.4 模型

这么一个需求，模型知错、认错的功夫杠杠的，但就是改不了错

模型切了好几个，token花费不少，可最终问题还是没有完美解决