写文档的人都熟悉这个循环：在画图工具里画好一张流程图，导出成 PNG，传到博客或文档站里。过两天发现图画错了一个箭头，于是回去改图、重新导出、重新上传、替换旧图——如果同一张图贴在了三个地方，这套动作就得做三遍。
截图式的图表有个根本问题：它是"死"的。图和原稿断了联系，每次改动都要手动同步，时间一长，线上那张图到底是不是最新版，自己都说不清。
嵌入（embed）解决的就是这件事。你贴到网站上的不再是一张静态图片，而是一个指向原图的实时窗口——原图改了，所有嵌入的地方跟着变。这篇文章讲 CodePic 的嵌入功能怎么用，以及它在什么场景下比导出图片更合适。
嵌入和导出图片有什么不一样
最直接的区别是同步。
导出 PNG 是把某一刻的图"拍"下来贴出去，之后图和原稿就没关系了。嵌入则是放了一个 <iframe>，里面加载的是你 CodePic 文档的实时内容。你在编辑器里改了图、调整了布局，所有嵌入这张图的页面刷新一下就是新的，不用动任何一个嵌入页面。
第二个区别是清晰度。PNG 是位图，读者在高分屏上放大看就会糊。嵌入的图是在画布上实时渲染的，缩放到多大都清楚，CodePic 标志性的手绘线条也不会变成马赛克。
第三个区别是可交互。嵌入进去的图不是完全静止的——读者可以用手型工具拖动画布、查看图的不同区域。对于那种一屏放不下的大架构图，读者能自己拖着看,比一张挤成一团的截图友好得多。
当然，导出图片也有它的位置：发邮件、发微信、放进 PPT 这种"离线"场景，还是图片省事。嵌入更适合网页——博客、文档站、知识库、内部 wiki，这些会长期维护、内容会更新的地方。
三步把图嵌入网站
整个过程不需要写代码，复制粘贴即可。
第一步：把文档设为公开
这一步很关键，漏了的话嵌入会显示"找不到文档"。
嵌入的本质是让访问你网站的任何人都能加载到这张图，所以图必须是公开可读的。在编辑器里打开分享面板，把文档设为公开/分享状态。设为公开后，没有 CodePic 账号的人也能看到这张图——这正是嵌入需要的。
如果你只想给特定的人看、不希望图被公开，那就不适合用嵌入，导出图片会更合适。
第二步：复制嵌入代码
打开分享面板，里面有一段现成的嵌入代码，长这样：
<iframe
src="https://codepic.cc/en/embed/你的文档ID"
title="CodePic Diagram"
width="800"
height="500"
style="max-width: 100%; border: none;"
frameborder="0"
scrolling="no"
loading="lazy"
allow="fullscreen"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
点一下复制，就拿到了完整代码。注意里面几个已经替你设好的细节：max-width: 100% 让图在窄屏（比如手机）上不会溢出；loading="lazy" 让图在用户滚动到它之前不加载，不拖慢页面打开速度。
第三步：粘贴到你的网站
把这段代码贴进任何支持 HTML 的地方就行：
- 自建博客 / 文档站：直接粘到 HTML 或 MDX 里。
- Notion：用
/embed命令，粘贴嵌入链接。 - WordPress：用"自定义 HTML"区块。
- 语雀 / 飞书 / Confluence 等知识库：找"嵌入网页"或"iframe"类组件，粘贴链接。
贴好后图就出现了，会自动缩放到合适大小铺满整个框。
嵌入后是什么样的
读者看到的是一张完整渲染的图，默认已经帮你自适应缩放好了——不管原图多大，打开时都会缩放到刚好填满嵌入框，不会出现"只看到图的左上角一小块"这种尴尬情况。画布背景色也会跟原图保持一致。
图是只读的，读者不能误改你的内容，但可以拖动画布查看不同部分。右上角有一个小小的跳转按钮，点了会在新标签页打开这张图的完整查看页——对你来说这是个顺带的好处：每一张被嵌入的图，都是一个把读者引回 CodePic 的入口。
想调整嵌入图的大小，改 <iframe> 上的 width 和 height 就行，单位用像素或百分比都可以。
几个适合用嵌入的场景
写技术博客。讲系统设计、讲某个功能的实现流程，配一张架构图。用嵌入而不是截图，好处是文章发出去之后，如果你发现图里有个地方画错了，直接在 CodePic 里改，博客里的图自动就更新了，不用回去重新传图。
团队文档和 wiki。内部文档里的流程图最容易过期——流程变了，文档里的图还是老的。把图嵌进去之后，维护流程图的人只管在 CodePic 里改，所有引用这张图的文档同步更新，不用挨个通知别人换图。
产品文档 / API 文档。把请求流程、状态机、数据流这类图嵌进文档站。这些图随版本迭代经常要改，嵌入能省掉大量"改图—导出—替换"的重复劳动。
课程和教程。教程里的步骤流程图、知识结构图，嵌入之后学生在网页上能放大看清细节，比一张固定分辨率的截图体验好。
小结
嵌入不是为了取代导出图片，而是为了解决"图会变"这个问题。只要这张图所在的地方是个会长期维护、内容会更新的网页，嵌入就比截图划算——改一次原图，所有地方同步更新。
记住一个前提就行：文档要先设为公开，嵌入才能正常显示。剩下的就是复制那段 iframe 代码，粘到你的网站里。
