Diagram Design ER图完全指南数据模型与实体关系可视化【免费下载链接】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在设计数据库、梳理领域模型时ER图实体关系图是最直观的数据模型可视化方式一张图讲清楚有哪些实体、每个实体有哪些字段、实体之间是什么关系。Diagram Design是一个面向 Claude Code、Codex、Pi 等 AI 助手的开源绘图技能内置 27 种编辑级图表类型其中ER / 数据模型类型专为数据库 Schema、API 资源关系与领域模型设计生成的是自包含的 HTML SVG 文件——无阴影、无花哨特效开箱即用的专业质感。上面这张图来自项目自带的示例example-er.html展示了内容平台的数据模型Author作者、Article文章、Tag标签三个实体以及 ArticleTag 连接表完整呈现了主键、外键与 1:N 关系。下面我们就从 ER 图的基本构成讲起看看如何用它快速绘制专业的数据模型图。什么是ER图数据模型可视化的核心工具ER 图也叫实体关系图是数据库设计与领域建模中最常用的可视化语言。它回答三个问题有哪些实体Entity相当于数据库中的表例如用户、订单、商品。每个实体有哪些字段字段名 类型主键、外键一目了然。实体之间是什么关系一对一、一对多、多对多以及关系名称如下单属于。相比文字描述或表格ER 图把数据结构压缩成一张可以一眼扫完的图是团队评审数据库设计、API 资源建模时最高效的沟通媒介。ER图的三大构成要素Diagram Design 的 ER 图把每个实体画成上下两段的盒子表头类型标签ENTITY 实体名称使用 Geist 无衬线字体清晰易读。字段区一行一个字段使用等宽字体主键用#前缀标记外键用→前缀标记类型写在右侧。实体之间用连线表示关系线的两端标注基数Cardinality1、N、0..1、1..*关系名称如WRITES、TAGGED居中放在连线上。聚合根或模型的核心实体用珊瑚色accent突出让读者的视线第一时间落在最重要的实体上。一键生成ER图向AI助手描述你的数据模型使用 Diagram Design 生成 ER 图非常自然——你只需要用一句话描述数据模型剩下的交给 AI画一个电商的ER图用户、订单、订单项、商品、分类AI 会自动选择ER / 数据模型类型读取 type-er.md 中的布局规范生成自包含的 HTML 文件浏览器直接打开即可查看。你也可以从模板手动起步cp skills/diagram-design/assets/template.html my-er.html # 浅色极简 cp skills/diagram-design/assets/template-full.html my-er.html # 编辑风带摘要卡片完整的 ER 图示例有浅色、深色、编辑风三种变体分别对应 example-er.html、example-er-dark.html和example-er-full.html总有一款适合你的使用场景。快速定制品牌风格默认皮肤是白烟纸 珊瑚橙的编辑风配色开箱即可截图使用。如果想要匹配自己品牌的颜色与字体运行 onboarding 流程把网站 URL 交给技能它会自动提取主色调与字体栈映射到语义化的设计令牌paper、ink、accent…并写入 style-guide.md。所有后续生成的图表都会自动继承你的品牌风格同时自动校验 WCAG AA 对比度。从draw.io或Mermaid导入并重绘ER图项目里已经有旧图Diagram Design 支持从.drawio文件或 Mermaid.mmd、.mermaid甚至 Markdown 里的 mermaid 代码块导入但不是简单转换而是重绘——保留内容实体、字段、关系、分组丢掉源文件的坐标、配色和渲染器布局用这套编辑设计系统重新排布。/diagram-design:import platform.drawio --sizeslide-16x9 --detailbalanced /diagram-design:import-mermaid model.mmd --detailsimplified --audienceexecutive导入遵循四个旋钮格式html / svg / png、尺寸文档内嵌 / 幻灯片 / 社交卡片等、细节faithful / balanced / simplified与受众工程师 / 混合 / 管理层。导入结束还会输出一份保真清单告诉你哪些节点被合并、折叠或丢弃全程透明。详细流程见 import-drawio.md 与 import-mermaid.md。导出PNG或SVG用于文档与幻灯片生成的 HTML 是自包含的但分享到文档、幻灯片或社交卡片时你可能需要 PNG 或 SVG。使用导出命令即可/diagram-design:export my-er.html --png-only --scale3 /diagram-design:export my-er.html --svg-onlySVG 会保留可访问名称与描述方便嵌入网页或 FigmaPNG 默认 2 倍分辨率渲染透明背景可直接放到任何底色上。完整流程见 export.md。新手常犯的ER图错误Diagram Design 的规范里专门列出了 ER 图的反模式避免画出一张AI 味十足的图❌ 给几十个外键每个都画箭头 → 应按集群布局而不是画满连线。❌ 同一条关系两端基数标注不一致 → 两端必须统一。❌ 把所有字段盒子撑成等高 → 内容自然高度就好。❌ 大量使用阴影、圆角过大的盒子、彩虹配色 → 细边框 克制的圆角 单一强调色。一条黄金法则图中每个节点都必须有存在的理由强调色只留给 1–2 个最重要的实体。整份规范与检查清单在 SKILL.md 中其中第 9 节Pre-Output Checklist是生成任何图表前必须过一遍的品味闸门。总结从今天开始画出专业ER图无论你是数据库设计师、后端开发者还是架构师一份清晰的数据模型图都能显著提升沟通效率。Diagram Design 把 ER 图的门槛降到说一句话的程度同时保证输出的是无阴影、无冗余、经得起推敲的编辑级图表。想要体验可以 clone 仓库到本地打开skills/diagram-design/assets/index.html画廊翻看全部 27 种图表然后对 AI 说出你的数据模型一张专业的 ER 图就会出现在眼前。git clone https://gitcode.com/GitHub_Trending/di/diagram-design【免费下载链接】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），仅供参考