| 术语 | 定义 | 与本工具的关系 |
|---|---|---|
| GraphQL | 一种由 Facebook(现 Meta)于 2015 年发布的开源 API 查询语言和运行时环境。与传统的 REST API 不同,GraphQL 允许客户端精确指定需要获取的数据字段,避免了过度获取和不足获取的问题。GraphQL 使用强类型系统来定义 API 的数据结构,所有可用的查询和变更操作都在 Schema 中明确定义。 | 本工具专门针对 GraphQL 技术栈,用于可视化分析 GraphQL 服务的 Schema 定义,帮助开发者快速理解 GraphQL API 的数据模型。 |
| Schema | GraphQL Schema 是使用 SDL 编写的 API 契约文档,它定义了所有可用的类型、字段、查询、变更和订阅端点。Schema 是客户端和服务器之间的类型安全契约,确保数据查询的可靠性。一个完整的 Schema 通常包含 Query、Mutation 和 Subscription 根类型。 | 本工具的核心功能就是解析和可视化展示 GraphQL Schema 的完整结构,帮助开发者直观理解 API 契约中的所有类型和关系。 |
| SDL (Schema Definition Language) | GraphQL 的模式定义语言,是一种用于描述 GraphQL Schema 的声明式文本格式。SDL 使用简洁的语法定义类型系统,支持注解、描述字符串和各种类型修饰符。SDL 是一种与具体编程语言无关的 Schema 描述方式。 | 本工具接受 SDL 格式的文本输入,内置 SDL 解析器将文本转换为内部类型图谱数据结构。用户只需粘贴 SDL 文本即可生成可视化图谱。 |
| Object Type | GraphQL 中最常用的类型,表示可返回的数据对象。对象类型包含一组命名字段,每个字段都有对应的类型。例如 type User { id: ID!, name: String! } 定义了一个包含 id 和 name 字段的用户类型。对象类型是构建 GraphQL API 的基础构建块。 | 图谱中以蓝色节点呈现对象类型,本工具会解析对象类型的所有字段引用关系并在图谱中以连线展示数据依赖关系。 |
| Interface | GraphQL 接口是一种抽象类型,定义了一组字段规范,其他类型可以通过 implements 关键字实现该接口。实现接口的类型必须包含接口定义的所有字段。接口支持多实现,一个类型可以同时实现多个接口。 | 图谱中以绿色节点呈现接口类型,implements 关系会以特殊连线标注,帮助开发者快速查看继承层次和多态结构。 |
| Union | 联合类型是一种组合类型,表示一个字段可以返回多种不同类型中的一种。联合类型中的成员类型不需要有共同字段,使用 union 关键字定义。联合类型常用于搜索结果或通知等可能返回多种数据的场景。 | 图谱中以橙色节点呈现联合类型,联合成员关系通过连线连接联合类型和其成员类型,清晰展示多态返回值结构。 |
| Enum | 枚举类型定义了一组命名常量值,限制字段只能取预定义的值之一。常用于表示状态码、类型分类等有限取值的场景,例如 enum Status { ACTIVE, INACTIVE, DELETED }。枚举类型在 API 文档和类型检查中提供更强的语义信息。 | 图谱中以紫色节点呈现枚举类型,当字段类型引用枚举时,连线连接字段所属类型和对应的枚举类型,展示约束关系。 |
| Input Type | 输入类型专门用于向 GraphQL 服务传递参数数据,通常用作 mutation 的参数定义。输入类型与对象类型语法相似,但仅支持作为输入使用,不支持循环引用。输入类型使用 input 关键字定义。 | 图谱中以红色节点呈现输入类型,便于区分输出类型和输入类型,避免混淆数据流方向和参数传递关系。 |
| Scalar | 标量类型是 GraphQL 类型系统中的叶子节点,表示不可再分的原子值。内置标量类型包括 Int、Float、String、Boolean 和 ID,开发者也可以通过 scalar 关键字定义自定义标量类型如 DateTime、JSON 等。 | 图谱中以灰色节点呈现标量类型。由于标量类型没有子字段,它们在图谱中通常作为终端节点出现,表示数据的最终值类型。 |
| Field Reference | 当一个对象类型的字段类型指向另一个类型时,就形成了字段引用关系。例如 User 类型中 posts: [Post!]! 字段引用了 Post 类型。字段引用是 GraphQL Schema 中最基本的关系类型,构成了数据模型间的导航路径。 | 本工具的图谱通过连线直观展示字段引用关系,帮助开发者追踪数据模型间的依赖路径和 API 查询时的数据加载链路。 |
| Nullability | GraphQL 类型系统中的可空性修饰,感叹号 (!) 表示该类型非空,没有感叹号则表示该类型可空(可能返回 null)。数组类型和嵌套类型同样适用此规则。正确的可空性标注对于 API 的可靠性至关重要。 | 本工具在类型详情面板中展示字段的可空性信息,帮助开发者了解哪些字段可能返回空值,从而在客户端做相应的容错处理。 |
| Introspection | GraphQL 提供的内省机制允许客户端查询 Schema 本身的元数据信息,例如获取所有可用类型、字段定义和指令等。许多 GraphQL 工具利用内省功能从运行中的服务获取 Schema,通过发送特殊的 Introspection Query 实现。 | 开发者可以使用内省工具从服务端点下载 Schema,然后粘贴到本工具中进行可视化分析,是获取 SDL 内容的常用方式之一。 |
网页元数据查看器 - Open Graph/Twitter Card
输入网址,抓取并展示该页面的标题、描述、OG标签和Twitter Card信息。
JSON Schema 示例生成器 - 根据定义产出示例数据
提供JSON Schema定义,自动生成符合约束的示例JSON数据,用于接口文档说明。
结构化数据 (JSON-LD) 验证器 - Schema.org 类型检测
粘贴JSON-LD,校验其是否符合Schema.org语法并预览可能触发的丰富结果类型。
CSS Grid交互演示 - 网格布局可视化学习
通过控件调整网格轨道、间距和对齐,实时展示效果及对应CSS代码,轻松掌握Grid。
GraphQL 查询成本计算器 - 估算字段解析复杂度
粘贴 GraphQL 查询和 Schema(或模拟类型权重),计算请求的代价分,辅助限流策略。
工作任务分解结构(WBS)图 - 在线绘制并导出
拖拽创建树形工作分解结构,清晰展示项目交付物与任务包,支持导出PNG/SVG,项目规划利器。
三分法构图覆盖 - 上传图片加九宫格参考线
为上传的照片添加可调节的三分线、斐波那契螺旋等构图辅助线。
高级占位图生成器 - 渐变/几何/文字组合
生成漂亮几何图案或文字占位图,指定尺寸,下载用于原型。
Alexa Skill 意图模型验证器 - 检查 JSON 语法
粘贴 Alexa 技能交互模型 JSON,验证格式并检查常见错误。
占位图构建器 - 指定宽高文字自动生成
输入宽高、背景色和文字,生成对应尺寸的占位图片,适用于原型设计和文档填充。
JSON 数据表格生成器 - 自动列与样式
粘贴 JSON 数组,自动生成带搜索、排序和分页功能的数据表格组件。
HAR 文件分析器 - 网络请求日志可视化
上传HTTP Archive格式文件,生成请求瀑布图与状态统计,深入了解网页加载细节。
ASCII字符画编辑器 - 网格绘制导出
在字符网格上通过工具绘制猫、超人等各种图案,导出为.txt ASCII艺术。
CSS Subgrid 布局生成器 - 可视化创建子网格
拖拽嵌套网格项,预览并生成使用 CSS Subgrid 对齐父子网格的代码。
原型链浏览器 - 查看对象继承关系
输入一个对象构造器名称,以树状图显示其原型链,帮助理解 JS 继承机制。
Temporal API 演练场 - 现代日期时间处理实验
使用 Temporal 提案中的对象(PlainDate, ZonedDateTime 等)进行日期运算和格式化。
CSS Subgrid 布局构建器 - 对齐嵌套网格轨道
拖拽设计包含 Subgrid 的嵌套网格,直观展示子网格如何继承父网格轨道并进行独立调整,生成代码。
在线SVG基础编辑器 - 矢量图形可视化绘制
直接编写SVG代码并实时预览,或通过基本形状工具绘制矩形、圆形、路径,适合动态图形调试。
函数绘图器 - 在线绘制数学函数图像
输入 f(x) 表达式,可同时绘制多条函数曲线,支持缩放、拖拽和坐标点追踪,辅助数学学习。
像素画编辑器 - 在线网格绘图与导出
在可缩放网格上逐点绘制像素艺术,支持调色板、橡皮擦和导出PNG。
在线像素标尺 - 测量网页元素宽高
在页面移动鼠标时显示十字参考线和像素距离,方便UI开发。
占位图片生成器 - 在线生成示意图片(Canvas)
自定义尺寸、背景色、文字,纯前端生成占位图,适用于原型设计和网页排版,无需依赖外部服务。
网页整页截图生成器 - html2canvas当前页面捕获
使用html2canvas截取当前网页的完整内容(需粘贴HTML或演示),生成长图并下载。
CSS @scope 规则演示 - 作用域样式隔离
演示新的 CSS @scope 规则如何限定样式作用范围,对比传统 BEM 和 CSS Modules。
布局蓝图生成器 - 线框容器配置
选择页眉、侧边栏、主体、页脚的网格布局,生成基本的布局骨架代码。
书脊设计预览 - 输入文字看效果
设定书脊宽度,排版书名和出版社文字,模拟书脊在书架上的外观。
几何图案生成器 - 交互式重复纹理SVG
选择基本形状(六边形、菱形等)和配色,无缝拼接生成SVG几何背景图案。
响应式表格生成器 - 移动端堆叠表格
将HTML表格转换为移动端友好的折叠行显示模式,并生成相应CSS。
视图过渡动画演示 - View Transitions API
在多页面或元素切换时呈现流畅的交叉淡入淡出和变形动画,体验原生视图过渡。
Web Worker 线程池演示 - 多任务并行处理
创建多个 Worker 同时执行计算任务,对比串行与并行的效率。
UD5工具箱