用途
该技能面向文档中的图表制作，把文档页面里的 Mermaid 代码块改写成手工编写、可访问的内联 SVG 架构图或序列图，使图表符合 Rivet 的自托管风格。
适用范围
- 仅处理
website/src/content/docs/**/*.mdx下的文档页面。 website/src/content/cookbook/**下的所有图表保持 Mermaid，不转换为原始 SVG，即使在做全仓库图表清理时也是如此。- 文章、变更日志及其他内容目录默认不在范围内，除非用户明确指定。
主要能力
- 支持两类图表：描述拓扑与嵌套部署边界的架构图，以及按时间顺序描述参与者之间消息的序列图。
- 要求保留全部语义细节：双向
<-->两端都带标记，-->保持单向，嵌套边界完整，原本用<br/>的标签改用显式<text>行。 - 每个 SVG 需要
role="img"和简洁完整的aria-label；标记 ID 按页面和 SVG 取唯一、描述性名称。 - 规定了视觉契约：画布宽度由内容推导（两个参与者约 480–560px，三个约 600–700px，四个约 700–800px，仅在标签确有必要时超过 800px）；外层 SVG 使用
style="width:100%;max-width:<canvas-width>px;height:auto;display:block;margin:2.5rem auto;font-family:system-ui,sans-serif"；部署与机器边界用#2E4034虚线、#faf8f3填充、圆角和等宽大写标签；节点用#ffffff填充、#1b1916约 1.3–1.4px 描边、rx="7"；关键运行时或存储节点用#e7ece7突出；文字用系统字体，边界标签用等宽字体；箭头为暖黑或松绿色 1.4px，绕开节点并减少交叉；与箭头或生命线相交的标签下需放不透明底色。 - 禁止使用亮色 Mermaid 配色、CSS 类、
foreignObject、渐变、阴影、JavaScript 和外部资源。
使用方式
- 编辑前用
rg -n '```mermaid' website/src/content/docs清点 Mermaid 图，记录每个节点、边界、连边方向、边标签和换行，搜索范围不扩大到 cookbook 或 posts。 - 根据拓扑结构选择架构图模式或序列图模式。
- 将每个代码块替换为字面量内联
<svg>...</svg>，不使用 Mermaid、脚本、导入组件、外部 SVG 或图片资源。 - 启动网站预览，对每个改动的图在桌面视口和 390 CSS 像素视口截图；Playwright 中使用
viewport而非viewportSize，并在信任移动端截图前断言window.innerWidth；激活所有标签页以捕获隐藏图；通过滚动目标或仅截图时隐藏站点固定栏来避免其进入元素截图；对可横向滚动的图，在桌面截完整图，并在 390px 下截左右滚动边界，记录clientWidth和scrollWidth以确认截图反映真实溢出。 - 检查截图像素而非仅看 DOM 边界，排除过多空白、过长箭头、文字压线、路径穿过无关节点、标签裁切或节点样式不一致等问题，修复并重新截图直至通过。
- 运行
rg -n '```mermaid|foreignObject|<style' <changed-pages>，再运行 Astro 或网站构建验证。
适用场景
适用于需要为 Rivet 文档页面补充或替换架构图、序列图的编辑工作，尤其是希望图表可访问、响应式、不依赖 Mermaid 渲染的场景。
限制
- 不适用于 cookbook、文章、变更日志等目录。
- 不使用 Mermaid、脚本、外部 SVG、图片资源、CSS 类、
foreignObject、渐变、阴影或 JavaScript。 - 横向滚动只是应对真实信息密度的回退手段，不能替代紧凑布局。
暂未提供
该技能暂无许可证、安装命令、版本、收费或平台支持等信息的说明。