Diagram Design导出PNG与SVGFigma、幻灯片与社交媒体的交付指南【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-designdiagram-design 是一个为 Claude Code、Codex 和 Pi 等 AI Agent 打造的图表设计技能内置 29 种编辑级图表类型架构图、流程图、时序图、泳道图、象限图……默认输出自包含的 HTMLSVG 文件无需构建、无需联网即可在浏览器中打开。但当图表需要交付给 Figma 继续编辑、投放到幻灯片或发布到社交媒体时PNG 与 SVG 导出就是你必须掌握的能力。这篇文章将带你从格式选择、导出命令、尺寸缩放到避坑技巧完整走一遍图表导出交付流程。为什么要把 Diagram Design 图表导出成 PNG 与 SVGHTML 适合网页内嵌却不适合跨工具交付Figma 无法直接读取 HTML 文件Keynote 和 PPT 不认 HTML社交媒体后台更只接受图片。diagram-design 的导出功能正好补齐这一环——无论 SVG 还是 PNG导出的都是纯图表本体仅svg节点-full变体中的编辑卡片和页眉会被自动剔除确保交付物干净、聚焦。流程图是使用频率最高的图表类型之一导出后可直接投放到幻灯片或插入博客文章。一图看懂SVG 与 PNG 该如何选择交付场景推荐格式尺寸预设Figma / Illustrator 继续编辑SVGfitKeynote / PowerPoint / Google SlidesPNG2×slide-16x9X / LinkedIn / OG 链接卡片PNG2×social-og博客 / README / 文档PNG 或 HTML 内嵌doc-inline打印讲义 / PDF 手册PNG3×print-a4-landscape一句话总结要编辑选 SVG要发布选 PNG。更完整的格式 × 尺寸 × 细节 × 受众四维选型规则见 output-spec.md。最快导出方法一条命令同时输出 SVG 和 PNG无需任何配置在 Claude Code 中调用导出命令即可/diagram-design:export path/to/diagram.html如果你使用 Pi命令是/export-diagram path/to/diagram.html。默认行为是同时生成.svg和.png两个文件PNG 以 2 倍清晰度渲染。也可以用自然语言直接说把这张图导出成 SVG 和 PNGAgent 会自动完成。常用参数一览--svg-only只输出 SVG跳过 PNG 渲染--png-only只输出 PNG--scale1|2|3覆盖 PNG 缩放倍率--outputpath自定义输出路径完整命令规范见 commands/export-diagram.mdClaude Code和 prompts/export-diagram.mdPi。导出 SVG 给 Figma保留矢量与可编辑性SVG 导出会把 HTML 中的第一个svg节点提取出来自动补全xmlns命名空间与viewBox并注入 Google Fonts 样式使其成为独立可打开的矢量文件——在 Figma、Illustrator 和现代浏览器中都能正确渲染。图表原有的无障碍标题title与描述desc也会被完整保留多个 SVG 可以安全地内嵌在同一页面而不冲突。⚠️ 一个需要注意的点离线 Illustrator 或部分 Figma 导入路径不会在导入时拉取远程字体字体可能被替换显示。如果需要像素级一致的交付效果推荐改用 PNG 导出。导出 PNG 给幻灯片透明背景 2 倍清晰度PNG 导出通过 Playwright 渲染原始 HTML只截取 SVG 元素的包围盒并默认开启透明背景——背景完全透明无论放到深色还是浅色幻灯片上都不会出现白色色块。默认 2× 缩放保证投影时文字依然锐利。首次使用需要一次性安装 Playwrightpip install playwright playwright install chromium幻灯片场景推荐在绘制时就用slide-16x9尺寸预设1280×720 画布导出 2× 后得到 2560×1440 的超清图从后排也能看清 16px 的节点文字。社交媒体尺寸OG 卡片与方形帖子的正确姿势社交媒体对图片尺寸非常敏感。diagram-design 内置了social-og1200×632约 1.9:1和social-square1080×10801:1两种预设前者用于 X / LinkedIn 的链接预览卡片后者用于信息流帖子和轮播图。social-og预设还会在外侧保留 64px 安全边距防止不同平台的卡片裁剪吃掉内容。精确控制导出尺寸Scale 缩放比例指南以 1280×720 的viewBox为例不同缩放倍率对应不同用途目的地缩放结果尺寸文档 / README / Wiki2×2560×1440幻灯片投影2×2560×1440打印 / PDF 讲义3×3840×2160内嵌缩略图 / 邮件1×1280×720需要精确像素时比如 OG 卡片必须正好 1200×630用公式scale 目标宽度 ÷ viewBox 宽度计算Playwright 支持小数缩放。两条铁律绝不低于 1会糊字绝不超过 4等于放大一个为小画布设计的布局。更合适的做法是回到绘制阶段重选尺寸预设而不是在导出时硬凑。导出避坑指南4 个常见问题不小心导出了画廊文件assets/index.html包含多个 SVG会被拒绝导出——请指向具体的那一个图表文件。文件里没有svg块说明它不是图表文件导出会直接拒绝且不会写入任何内容。PNG 导出报 Playwright 缺失工具会原样提示安装命令不会擅自安装系统依赖。带动画的图表导出前先打开?motionstatic等待document.fonts.ready并确认动画根节点处于静态帧再截图绝不在任意延时后截取。结语从 Figma 矢量编辑到幻灯片投影再到社交媒体卡片diagram-design 用一条命令就能完成图表交付。核心流程都在 export.md 中尺寸预设规则见 output-spec.md你还可以打开本地画廊 assets/index.html 预览全部 29 种图表类型。把导出能力记在脑子里下一次做 deck 或发推时你就能在 30 秒内拿到一张能直接用的图。【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考