用途：将 Rivet 文档中的 Mermaid 图转换为手写的、响应式的内联 SVG 架构图或序列图，采用符合自托管周界的视觉风格，并保证无障碍可访问性。
适用范围：只处理 website/src/content/docs//*.mdx。website/src/content/cookbook/ 下的图必须保留 Mermaid，不得转换，包括全仓库清理时；posts、changelog 等其他内容树默认不在范围内，除非用户明确指名。
工作流：先用 rg -n 'mermaid' website/src/content/docs 盘点 Mermaid，记录每个节点、边界、边方向、边标签和换行，不要将搜索扩大到 cookbook 或 posts。根据拓扑与嵌套部署边界选择架构模式，或根据参与者间按时间排序的消息选序列模式。把每个代码块替换为字面内联 <svg>...</svg>，不使用 Mermaid、脚本、导入组件、外部 SVG 或图片资源。保留全部语义细节：<--> 双向箭头两端都要有标记，--> 为单向，嵌套边界完整，原用 <br/> 的标签改为显式 <text> 行。每个 SVG 加 role="img" 和简洁完整的 aria-label；marker ID 每页每图唯一且具描述性。启动网站预览，在桌面视口和 390 CSS 像素处截图每张改动图。Playwright 中传 viewport 而非 viewportSize，并在信任移动端截图前断言 window.innerWidth。激活每个标签页以捕获隐藏图。截图前滚动目标避开固定站点栏，或仅截图时隐藏。对可横向滚动的图，桌面截完整图，390px 截左右滚动末端，并记录 clientWidth 与 scrollWidth 确认溢出真实。检查截图像素而非仅 DOM 边界，拒绝过多空白、过长箭头、文字压线、路径穿越无关节点、标签截断或节点样式不一致，修复后重截至全部通过。最后用 rg -n 'mermaid|foreignObject|<style' 检查改动页，并运行 Astro 或网站构建校验。
视觉约定：画布宽度由内容决定，勿默认 760px；双参与者建议 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"，viewBox 匹配自然宽度。简单图可流式缩放；密集图可用 overflow-x:auto 包裹，但最小宽度须为该图的紧凑自然宽度。部署与机器边界用虚线松绿 #2E4034、#faf8f3 填充、圆角、大写等宽标签。节点白底、暖黑 #1b1916 细线、rx="7"，关键运行时或存储节点用浅松绿 #e7ece7。文字主标签暖黑，次标签 #56524a 或 #8a8578；边界标签用 ui-monospace,monospace。箭头暖黑或松绿 1.4px，绕开节点，减少交叉，与箭头或生命线相交的标签后置不透明底。390px 下保持标签可读，避免不必要空白；横向滚动仅用于真实密度。避免 Mermaid 亮色、CSS 类、foreignObject、渐变、阴影、JavaScript 和外部资源。
限制：未提供收费、价格、平台或性能信息；该技能并非通用绘图工具，仅限指定文档目录，且需人工截图校验，不自动应用。