用途概括使用 Beautiful Mermaid 库与 agent-browser 将 Mermaid 图渲染为 SVG 和 PNG。技能会生成或校验 Mermaid 代码、渲染矢量 SVG、通过无头浏览器截取高清 PNG，并清理临时文件。产出可缩放 SVG 与 4K PNG，便于文档与分享。
业务领域
Design
技能形态
Workflow
业务领域
技能形态
技能解析
剖析技能的工作原理和产出物，快速判断你的场景与价值。
当用户要求将 Mermaid 图渲染为 SVG 或 PNG，或提供了需要可视化的 Mermaid 代码/描述时。
bun run scripts/render.ts（或 tsx/deno 替代）渲染 SVG在工作目录中生成可无限缩放的 SVG 和高分辨率 PNG 图表，可直接用于文档或分享。
使用场景
开发人员在写技术文档时需要展示 CI/CD 流水线。他们用文字描述流程，技能生成合法 Mermaid 代码，渲染出整洁的 SVG 和选用主题（如 GitHub Dark）的 4K PNG 并保存到仓库。节省手绘时间，获得专业且可版本控制的图表。
设计师制作幻灯片时需要状态机图的高清图像。他们提供 Mermaid 代码，技能渲染 SVG 并用 agent-browser 截取带留白、4K 高清的 PNG。输出契合幻灯片的暗色主题，在投影上清晰，提升演示质量。
技能关系
依赖关系读作「上一格指向下一格」。当前 Skill 位于第二格，上下分别是影响它与被它影响的 Skill。
第一层 · 这些 Skills 用了我
第二层 · 当前 Skill
第三层 · 我用了这些 Skills
在所属技能集的全局上下文中浏览当前 Skill 的关系。点击节点切换右侧详情,搜索框可快速定位技能。
技能文件