@bkdgiffug: 任何使用 Claude Code 绘制 SVG 架构图的人可能都曾被‘歪斜的线条、文本溢出…’所困扰。

X AI KOLs Timeline 工具
svg-diagrams ai-code-generation agent-tools diagram-automation cursor-integration claude-code

摘要

介绍了一个 svg-diagram Agent Skill，它为 AI 生成的 SVG 图表提供标准，以修复歪斜的线条和文本溢出等问题，并与 Cursor 和 Claude Code 等工具集成。

任何使用 Claude Code 绘制 SVG 架构图的人可能都曾被‘歪斜的线条、文本溢出和乱码中文字符’所困扰。 svg-diagram Agent Skill 仅为 AI 添加了一套 SVG 绘图标准： ① 框高根据字体大小计算，线条和箭头位置有明确规则 ② 内置零依赖检查器，直接检查最终 SVG，涵盖字体、空白、重叠和转义等 12 个问题 ③ 发现问题时，会准确告诉你哪里出错，如边距不足或元素溢出 ④ 可通过一条命令集成到 Cursor、Codex、Claude Code 等 Agent 中 ⑤ 甚至预先计算中文标签的文本宽度，以减少布局问题 规则中甚至包括文本基线计算。 本质上，它为 AI 生成的 SVG 添加了一层‘自动验收测试’，让您在生成后无需手动修复图表的痛苦。 🔗
查看原文
查看缓存全文

缓存时间: 2026/09/26 21:05

任何用过Claude Code绘制SVG架构图的人，大概都受过“歪斜线条、文字溢出、中文乱码”的折磨。

svg-diagram Agent Skill本质上是为AI添加了一套SVG绘制规范：

1 根据字体大小计算方框高度，明确线条与箭头定位规则 2 内置零依赖检查器，直接检测最终SVG文件，涵盖字体、间距、重叠、转义等12类问题 3 发现问题时精准提示，比如边距不足或元素溢出 4 只需单条命令即可集成至Cursor、Codex、Claude Code等智能体 5 提前计算中文标签的文字宽度，减少布局崩溃 规范中甚至包含了文本基线计算的细则。

它相当于为AI生成的SVG增加了“自动验收测试”环节，省去你手动修复图表的部分痛苦。 🔗

相似文章

cathrynlavery/diagram-design

GitHub Trending (daily)

An open-source agent skill for Claude Code, Codex, and Pi that generates 27 types of editorial-quality diagrams, automatically matching your brand by reading your website, and can redraw existing draw.io/Mermaid diagrams.

@alin_zone: 发现一个专门给 AI Agent 画技术架构图的 Skill：Archify。 不用学 Mermaid，也不用手动拖框拉线。直接用大白话告诉 Claude Code / Codex： “读一下这几个仓库，帮我画张架构对比图。” 它就会生成…

X AI KOLs Timeline

Archify is an open-source skill for AI agents like Claude Code and Codex CLI that generates interactive, self-contained HTML architecture diagrams from plain-English descriptions, supporting multiple diagram types and export formats.