Diagram Design社交媒体卡片实战用导出功能制作OG图放大传播【免费下载链接】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 编程助手的开源图表技能内置 29 种编辑级图表类型输出全部是自包含的 HTML SVG 文件无需任何构建步骤。它的导出功能可以一键把任意图表变成社交媒体卡片无论你的内容发布在微信、X推特还是 LinkedIn分享链接时展示的 OG 图Open Graph 卡片都能用专业图表取代普通截图。这篇文章是一份完整的 OG 图制作实战指南教你用几个命令把架构图、流程图导出成 1200×630 的标准社交卡片让每一次分享都更有传播力。为什么你的分享需要一张OG图当你在微信、X、LinkedIn 等平台粘贴一个链接时平台会自动抓取页面的 Open Graph 信息生成一张链接预览卡片——这就是 OG 图。标准 OG 图尺寸为 1200×630 像素。大多数内容在信息流里只露出这一张缩略图它的设计质量直接决定了读者是否愿意点进来。一张信息密度合适、排版专业的图表卡片比纯文字链接的点击率高得多数据、观点、流程一图胜千言。上图就是由 Diagram Design 生成的流程图节点极简、单一焦点色、无阴影干扰缩到 600 像素宽的社交卡片里依然清晰可读是天然的 OG 图素材。Diagram Design为内容传播而生的图表设计工具Diagram Design 的核心设计理念是编辑级质量editorial quality专门解决 AI 生成图表最常见的两个问题千篇一律的圆角盒子以及看起来像 Mermaid 自动排版的AI 味。它提供的 29 种图表类型覆盖了内容创作的绝大多数场景系统类架构图、时序图、状态机、ER 数据模型、IT 现状图流程类流程图、泳道图、过程图、数据流图规划类象限图、雷达图、树状图、组织架构图、时间线、甘特图数据类柱状图、折线图、散点图、金字塔、维恩图、奖章架构每种类型都提供极简浅色、极简深色、完整编辑版三种变体全部输出为单个 HTML 文件双击即可在浏览器打开无 JavaScript、无外部图片依赖。设计系统更是严格1px 发丝线、最大 10px 圆角、无任何阴影、所有坐标严格对齐 4px 网格这让导出后的图片在任何平台上都保持干净专业。以上图为例即使信息量较大通过分区和焦点色引导缩略图状态下依然能快速传达系统结构。社交尺寸预设social-og 与 social-square 两把尺子Diagram Design 的导出功能背后有一套完整的尺寸预设体系定义在 skills/diagram-design/references/output-spec.md 中。针对社交媒体场景内置了两个专用预设绘制图表前告诉 AI 即可预设画布尺寸2倍导出PNG长宽比最佳用途social-og1200×6322400×1264约 1.9:1链接预览卡片OG 图social-square1080×10802160×21601:1信息流帖子、轮播图两个细节让社交卡片体验远超普通截图独立字体档位社交预设使用 presentation 档位的排版——节点名 16px、子标签 12px而不是文档图表的 12px/9px。画布变大了字也必须跟着变大否则缩略图里文字会糊成一片。预留安全边距social-og 预设要求四周保留 64px 净空因为不同平台的链接卡片裁剪规则不可预测留白才能保证核心内容永远不被裁掉。三步用导出功能制作OG图接下来是完整的实战流程全程不需要打开任何设计软件。第一步让AI生成社交尺寸的图表在 Claude Code、Codex 或 Pi 中直接描述需求把尺寸预设说清楚即可Make me a diagram of our content pipeline at social-og sizeI need a quadrant showing Q2 priorities — size social-square把我们的发布流程画成 social-og 尺寸的流程图AI 会选择合适的图表类型、按社交画布排版生成一个自包含的 HTML 文件例如 my-diagram.html。第二步一键导出PNG得到高清社交媒体卡片Claude Code 中使用导出命令命令定义在 commands/export-diagram.md完整流程见 skills/diagram-design/references/export.md/diagram-design:export my-diagram.htmlPi 用户使用对应的 /export-diagram 命令。默认会同时产出 .svg 和 .png 两个文件PNG 以 2 倍分辨率渲染——1200×632 的画布得到 2400×1264 的高清图无论是微信推送还是微博配图都足够锐利。PNG 导出基于 Playwright 渲染首次使用需要一次性安装运行环境pip install playwright playwright install chromium值得强调的是导出的 PNG 默认是透明背景可以无白边地放在任何颜色的幻灯片、网页或社交平台上这是很多截图工具做不到的。第三步导出SVG矢量版备用如果这张图还要进 Figma、Illustrator 继续加工或者要用于印刷级输出只需要矢量版本/diagram-design:export my-diagram.html --svg-only导出功能会提取图表中的节点、注入 Google Fonts 字体并补全 XML 声明生成的 .svg 在任何现代浏览器中都能独立渲染在 Figma、Illustrator 中打开也不会缺字体。OG图导出参数速查表参数作用示例--png-only只导出 PNG跳过 SVG/diagram-design:export my.html --png-only--svg-only只导出 SVG无需 Playwright/diagram-design:export my.html --svg-only--scale33 倍分辨率输出适合打印/diagram-design:export my.html --png-only --scale3--outputpath自定义输出路径/diagram-design:export my.html --outputdocs/og-card精确像素小技巧当平台要求恰好 1200×630 的 OG 图时用公式scale 目标宽度 ÷ 画布宽度计算缩放系数。但要记住两条红线不要缩到 1 以下字体会发虚也不要超过 4等于在放大一个为小画布设计的布局。提升OG图传播效果的实战技巧把导出功能用好只是第一步下面这些技巧能让你的社交媒体卡片真正脱颖而出60 秒品牌化让 AI 从你的官网读取配色与字体自动映射到图表的语义色板paper、ink、accent 等之后所有图表都是你的品牌色分享出去自带辨识度。焦点色只给 1–2 处整个图表只允许 1–2 个焦点元素使用强调色读者的视线会被精准引导到最重要的信息上——这是编辑级设计区别于AI 批量生成的关键。控制信息密度社交卡片上节点控制在 9 个以内内容复杂就拆成总览 细节两张图分别导出而不是塞进一张图。复用旧图素材draw.io 或 Mermaid 里的旧图可以直接交给它重绘成社交尺寸内容不变、设计系统焕然一新。如上图所示一个 12 节点的 draw.io 文件被重绘为编辑级图表六种过去式的填充色收敛为一个焦点色手工拖拽的坐标被整理到 4px 网格上——同样的内容完全是可发布的质感。常见问题OG图导出的疑问解答Q导出文件生成在哪里A默认输出在源 HTML 旁边diagram.html 会生成 diagram.svg 和 diagram.png 两个文件。Q导出会修改原来的 HTML 文件吗A不会。导出功能从不修改源文件也不会在生成图表时自动附带导出文件——导出始终是手动触发的。Q想要包含标题卡片和摘要的整页图怎么办A导出只输出图表本身SVG 节点编辑卡片的整页效果请使用浏览器整页截图或打印为 PDF。Q动画图表能导出吗A可以。先打开 ?motionstatic 等待静态帧渲染完成再执行导出确保抓到的是完整首帧。从生成图表到导出 OG 图全程只需要几句自然语言和一条命令。Diagram Design 把专业图表 社交卡片这条链路彻底打通内容创作者不用再为一张分享图去学设计软件AI 编程助手的每一次绘图都能直接变成放大传播的社交媒体卡片。【免费下载链接】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），仅供参考