Mermaid 圆角
处理结果
✅ 成功完成：已将所有 mermaid 生成的 SVG 图表中的方形框改为圆角。
处理统计
- 扫描的 SVG 文件: 145 个
- 修改的文件数量: 145 个
- 处理范围:
/content/目录下所有 32 位 MD5 hash 命名的 SVG 文件
处理方式
采用直接修改 SVG 文件的方案：
- 识别 mermaid 生成的 SVG 文件（通过 32 位 MD5 hash 文件名模式）
- 解析每个 SVG 文件中的
<rect>元素 - 对大于 20x20 像素的矩形（节点容器）添加
rx="10" ry="10"圆角属性 - 保留小尺寸矩形（装饰元素）的原始样式
技术细节
- 圆角半径: 10px
- 过滤条件: 只对 width > 20px 且 height > 20px 的矩形应用圆角
- 处理方式: 移除现有的
rx/ry属性并添加新的圆角属性 - 兼容性: 适用于所有支持 SVG 的现代浏览器
优势
- ✅ 无需修改 markdown 源码
- ✅ 无需重新生成 SVG 文件
- ✅ 不依赖 JavaScript 或 CSS
- ✅ 所有图片引用方式都生效（img 标签、figure 等）
- ✅ 完全静态，性能最优
后续维护
今后新生成的 mermaid SVG 文件将自动具有圆角效果，因为：
- 完整的配置更新：
mermaid-config.json已包含所有图表类型的圆角配置 - 支持的图表类型：
- Flowchart (流程图)
- Graph (图表)
- Class Diagram (类图)
- State Diagram (状态图)
- Sequence Diagram (序列图)
- ER Diagram (实体关系图)
- Gantt Chart (甘特图)
- Journey Diagram (用户旅程图)
- Requirement Diagram (需求图)
- Quadrant Chart (象限图)
- Block Diagram (块图)
- Architecture Diagram (架构图)
-
以及其他所有 mermaid 图表类型
-
智能过滤：配置会自动排除小尺寸装饰元素（1-5 像素），只对真正的节点容器应用圆角
当前的配置确保所有新生成的 SVG 都将自动具有一致的圆角效果。