用途：在 CocoIndex 文档站（docs/src/content/docs/ 下的 .mdx 页面）新增、编辑或替换内联 SVG 图组件，审查渲染布局与样式，或改造旧的 <img src="/docs/img/...svg"> 引用。不适用于 cocoindex.github.io/ 营销站图，也不适用于该目录之外的通用 SVG 编辑。
主要能力：文档图以 Astro 组件编写，位于 docs/src/components/diagrams/，由共享调色板与样式的形状语义原语组合：DataBox（数据）、LogicBox（子系统/逻辑）、ProcessingComponent（处理组件容器）、AppContainer（CocoIndex App 容器）、TargetBullet（目标状态）、FlowArrow（动态虚线流程箭头）、Connector（静态虚线绑定）。状态与缓存注解通过 state（new、updated、removed、changed、idle）与 status（cache-ready、refreshing）等属性以正交方式叠加在任意形状上。
使用方式：先读 docs/src/components/diagrams/README.md 及三个随附参考（workflow.md、pitfalls.md、layout-patterns.md）。设计时先在 .astro 顶部用配置对象写下具体坐标，用基于内容的 viewBox 与命名常量，容器尺寸由内容推导。标签通过 foreignObject 自动换行，只需传 label 字符串。嵌入 MDX 时从站点根用绝对路径导入，例如 import ComponentWithChunks from '/src/components/diagrams/concepts/ComponentWithChunks.astro';，然后以 <ComponentWithChunks /> 使用。
验证与限制：用 scripts/preview.sh <docs-slug> 构建、镜像到匹配 /docs 基路径的临时路径、起本地 HTTP 服务、无头 Chrome 截图并输出 PNG；必须看图自检，不能只凭“构建通过”就判定完成，非平凡图通常需 2–4 轮预览迭代。新图不应使用旧式静态 .svg 导出文件；不要用 dg-step 于静态内容（默认 35% 不透明度，仅悬停点亮，专供渐进式揭示）；状态规则用直接子代选择器避免级联；动画默认静止、仅在 .dg-root:hover 激活，并需在 diagrams.css 的 prefers-reduced-motion 块中注册；新增形状原语应基于 ShapeGroup 组合而非重写。官方资料未提供收费与价格信息。