尧图网站建设 
axton-obsidian-visual-skills 常见陷阱清单文字偏移、元素重叠与中文手写字体失效的真相与解法【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skillsaxton-obsidian-visual-skills是一个面向 Claude Code 的 Obsidian 可视化 Skills 套装用自然语言就能生成 Excalidraw 手绘图、Mermaid 流程图和 Canvas 思维导图。它内置了大量防坑规则但实际使用中仍常遇到文字偏移、元素重叠、中文手写字体失效这三类典型问题。本文结合仓库中的规则文档逐条讲清现象背后的真相并给出可直接照做的解法 ️三件套概览陷阱在哪里埋着Skill产物高频陷阱防坑规则所在文件Excalidraw 图表生成器.md/.excalidraw文字偏移、元素重叠、中文手写字体失效excalidraw-diagram/SKILL.mdMermaid 可视化器Mermaid 代码块列表语法冲突、子图命名报错mermaid-visualizer/SKILL.mdObsidian Canvas 创建器.canvas文件节点重叠、引号转义破坏 JSONobsidian-canvas-creator/SKILL.md 想本地体验通过 Claude Code 插件市场安装或克隆仓库后将三个 Skill 文件夹复制到~/.claude/skills/git clone https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills下图是 Excalidraw 技能生成的手绘风格关系图中文手写字体正常加载时的效果陷阱一文字偏移——独立文本不会自动居中现象标题或标签没有落在图形正中央整体偏向一侧。真相Excalidraw 的独立text元素没有自动居中机制x坐标是文字的左边缘而不是中心点。若不手动计算文字必然偏移。解法技能文档已内置此规则规则见 excalidraw-diagram/SKILL.md估算文字宽度文字宽度 ≈ 字符数 × 字号 × 0.5中文等 CJK 字符按× 1.0估算居中公式x 中心点 - 估算宽度 ÷ 2例字号 20 的英文 Hello5 字符居中于 x300 → 宽度 50 →x 300 - 25 275。另外两个连带坑箭头标签溢出长标签超出短箭头保持标签简短和标题未居中于整图标题应居中于图表整体宽度而非固定在 x0详见 excalidraw-diagram/SKILL.md 的常见错误清单。陷阱二元素重叠——间距不是看着差不多现象节点堆在一起、卡片互相压盖整张图显得杂乱。真相AI 生成坐标时若凭感觉放点y 坐标相近的元素极易堆叠。仓库为此定义了硬性间距标准而非模糊经验Excalidraw元素间最小间距20–30px画布四周留50–80px内边距SKILL.mdCanvas节点中心点之间最小横向 320px、纵向 200px并定义了碰撞检测公式——放置每个节点前先算中心距距离小于两节点宽度之和的一半 间距即判定重叠references/layout-algorithms.md解法生成后按 obsidian-canvas-creator/references/layout-algorithms.md 的碰撞检测思路自查一遍层级顺序别搞反输出 JSON 时分组group先输出、子分组次之、文本节点最后避免视觉层级错乱SKILL.md节点文字别贪多单节点超过 2 行就考虑拆节点或改用文件节点下图是 Canvas 技能输出的彩色卡片布局节点间距均匀、无压盖陷阱三中文手写字体失效——字体其实要联网加载现象英文是 Excalifont 手写体中文却回退成了系统默认字体。真相README.md 的 Troubleshooting 章节技能正确写入了fontFamily: 5Excalifont但Excalifont 只覆盖拉丁字符中文手写字体小赖字体需要运行时从 Excalidraw.com 动态加载。所以这不是技能生成的问题而是网络问题离线、内网、防火墙拦截 Excalidraw.com都会导致加载失败两种解法场景做法在线环境确保网络可访问 Excalidraw.com字体随插件自动加载离线环境下载 CJK 字体文件放入仓库的Excalidraw/CJK Fonts目录 → 在 Excalidraw 插件设置中开启启动时从文件加载中文字体 →重启 Obsidian必须重启才生效顺带避坑Mermaid 渲染失败的三个惯犯Mermaid 技能的规则文档把最常见的解析错误总结成了三条铁律mermaid-visualizer/references/syntax-rules.md1. 文字触发列表冲突节点文本写成1. 感知会被解析成 Markdown 有序列表报错Unsupported markdown: list。改成① 感知、(1) 感知或去掉点号即可子图名带空格必须加 ID写subgraph 核心流程会解析失败正确写法是subgraph core[核心流程]且连线时引用 ID 而不是显示名引号与括号转义文本中的和()容易破坏解析统一替换为『』和「」下图是 Mermaid 技能输出的层级流程图节点文本、连线与配色均通过语法校验一页自检清单生成后先过一遍再交付独立文本已用居中公式手算过 x 坐标没有整体偏移相邻元素间距 ≥ 20–30pxCanvas 节点中心距 ≥ 320/200px四周留有边距中文字体显示为手写体离线环境已配置本地 CJK 字体并重启 ObsidianMermaid 节点文本无数字. 空格模式子图均使用ID[显示名]格式引号已替换为『』/「」JSON 可正常解析字号未低于 14px、正文 ≥ 16px白底文字颜色不浅于#757575图表文本中没有 Emoji用颜色或图形代替视觉标记Excalidraw 元素未混入frameId、index、versionNonce等额外字段可能导致 excalidraw.com 打开异常见 excalidraw-diagram/SKILL.md延伸阅读这些规则文件的正确打开方式excalidraw-diagram/SKILL.md — 三种输出模式、配色规范与常见错误清单excalidraw-diagram/references/excalidraw-schema.md — 全部元素类型与字段模板mermaid-visualizer/references/syntax-rules.md — 完整语法参考与报错对照表obsidian-canvas-creator/references/layout-algorithms.md — 碰撞检测、放射布局与网格分区算法obsidian-canvas-creator/references/canvas-spec.md — JSON Canvas 格式规范README.md — 官方故障排查含中文字体离线方案⚠️ 该项目处于**实验性Experimental**阶段输出质量会受模型版本和输入结构影响。遇到问题时建议按仓库要求提交输入 输出文件 复现步骤帮助定位是技能规则还是环境配置的问题。把上面三个真相记住——文本要手算居中、间距要有硬标准、中文字体依赖网络——再配合文末的自检清单大部分图坏了的情况都能在你打开文件之前就被拦下来 ✅【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 axton-obsidian-visual-skills 常见陷阱清单：文字偏移、元素重叠与中文手写字体失效的真相与解法
axton-obsidian-visual-skills 常见陷阱清单文字偏移、元素重叠与中文手写字体失效的真相与解法【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skillsaxton-obsidian-visual-skills是一个面向 Claude Code 的 Obsidian 可视化 Skills 套装用自然语言就能生成 Excalidraw 手绘图、Mermaid 流程图和 Canvas 思维导图。它内置了大量防坑规则但实际使用中仍常遇到文字偏移、元素重叠、中文手写字体失效这三类典型问题。本文结合仓库中的规则文档逐条讲清现象背后的真相并给出可直接照做的解法 ️三件套概览陷阱在哪里埋着Skill产物高频陷阱防坑规则所在文件Excalidraw 图表生成器.md/.excalidraw文字偏移、元素重叠、中文手写字体失效excalidraw-diagram/SKILL.mdMermaid 可视化器Mermaid 代码块列表语法冲突、子图命名报错mermaid-visualizer/SKILL.mdObsidian Canvas 创建器.canvas文件节点重叠、引号转义破坏 JSONobsidian-canvas-creator/SKILL.md 想本地体验通过 Claude Code 插件市场安装或克隆仓库后将三个 Skill 文件夹复制到~/.claude/skills/git clone https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills下图是 Excalidraw 技能生成的手绘风格关系图中文手写字体正常加载时的效果陷阱一文字偏移——独立文本不会自动居中现象标题或标签没有落在图形正中央整体偏向一侧。真相Excalidraw 的独立text元素没有自动居中机制x坐标是文字的左边缘而不是中心点。若不手动计算文字必然偏移。解法技能文档已内置此规则规则见 excalidraw-diagram/SKILL.md估算文字宽度文字宽度 ≈ 字符数 × 字号 × 0.5中文等 CJK 字符按× 1.0估算居中公式x 中心点 - 估算宽度 ÷ 2例字号 20 的英文 Hello5 字符居中于 x300 → 宽度 50 →x 300 - 25 275。另外两个连带坑箭头标签溢出长标签超出短箭头保持标签简短和标题未居中于整图标题应居中于图表整体宽度而非固定在 x0详见 excalidraw-diagram/SKILL.md 的常见错误清单。陷阱二元素重叠——间距不是看着差不多现象节点堆在一起、卡片互相压盖整张图显得杂乱。真相AI 生成坐标时若凭感觉放点y 坐标相近的元素极易堆叠。仓库为此定义了硬性间距标准而非模糊经验Excalidraw元素间最小间距20–30px画布四周留50–80px内边距SKILL.mdCanvas节点中心点之间最小横向 320px、纵向 200px并定义了碰撞检测公式——放置每个节点前先算中心距距离小于两节点宽度之和的一半 间距即判定重叠references/layout-algorithms.md解法生成后按 obsidian-canvas-creator/references/layout-algorithms.md 的碰撞检测思路自查一遍层级顺序别搞反输出 JSON 时分组group先输出、子分组次之、文本节点最后避免视觉层级错乱SKILL.md节点文字别贪多单节点超过 2 行就考虑拆节点或改用文件节点下图是 Canvas 技能输出的彩色卡片布局节点间距均匀、无压盖陷阱三中文手写字体失效——字体其实要联网加载现象英文是 Excalifont 手写体中文却回退成了系统默认字体。真相README.md 的 Troubleshooting 章节技能正确写入了fontFamily: 5Excalifont但Excalifont 只覆盖拉丁字符中文手写字体小赖字体需要运行时从 Excalidraw.com 动态加载。所以这不是技能生成的问题而是网络问题离线、内网、防火墙拦截 Excalidraw.com都会导致加载失败两种解法场景做法在线环境确保网络可访问 Excalidraw.com字体随插件自动加载离线环境下载 CJK 字体文件放入仓库的Excalidraw/CJK Fonts目录 → 在 Excalidraw 插件设置中开启启动时从文件加载中文字体 →重启 Obsidian必须重启才生效顺带避坑Mermaid 渲染失败的三个惯犯Mermaid 技能的规则文档把最常见的解析错误总结成了三条铁律mermaid-visualizer/references/syntax-rules.md1. 文字触发列表冲突节点文本写成1. 感知会被解析成 Markdown 有序列表报错Unsupported markdown: list。改成① 感知、(1) 感知或去掉点号即可子图名带空格必须加 ID写subgraph 核心流程会解析失败正确写法是subgraph core[核心流程]且连线时引用 ID 而不是显示名引号与括号转义文本中的和()容易破坏解析统一替换为『』和「」下图是 Mermaid 技能输出的层级流程图节点文本、连线与配色均通过语法校验一页自检清单生成后先过一遍再交付独立文本已用居中公式手算过 x 坐标没有整体偏移相邻元素间距 ≥ 20–30pxCanvas 节点中心距 ≥ 320/200px四周留有边距中文字体显示为手写体离线环境已配置本地 CJK 字体并重启 ObsidianMermaid 节点文本无数字. 空格模式子图均使用ID[显示名]格式引号已替换为『』/「」JSON 可正常解析字号未低于 14px、正文 ≥ 16px白底文字颜色不浅于#757575图表文本中没有 Emoji用颜色或图形代替视觉标记Excalidraw 元素未混入frameId、index、versionNonce等额外字段可能导致 excalidraw.com 打开异常见 excalidraw-diagram/SKILL.md延伸阅读这些规则文件的正确打开方式excalidraw-diagram/SKILL.md — 三种输出模式、配色规范与常见错误清单excalidraw-diagram/references/excalidraw-schema.md — 全部元素类型与字段模板mermaid-visualizer/references/syntax-rules.md — 完整语法参考与报错对照表obsidian-canvas-creator/references/layout-algorithms.md — 碰撞检测、放射布局与网格分区算法obsidian-canvas-creator/references/canvas-spec.md — JSON Canvas 格式规范README.md — 官方故障排查含中文字体离线方案⚠️ 该项目处于**实验性Experimental**阶段输出质量会受模型版本和输入结构影响。遇到问题时建议按仓库要求提交输入 输出文件 复现步骤帮助定位是技能规则还是环境配置的问题。把上面三个真相记住——文本要手算居中、间距要有硬标准、中文字体依赖网络——再配合文末的自检清单大部分图坏了的情况都能在你打开文件之前就被拦下来 ✅【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考