JSON Crack

JSON Crack是什么？

JSON Crack是一款免费开源的在线数据可视化工具，可将JSON、YAML、XML、CSV等格式一键生成交互式图形图表。可以多种数据格式交换，数据美化、生成 Mock 数据。可用于 API 调试、配置文件分析、依赖分析、数据反推等等。所有数据本地处理，安全无缓存。

JSON Crack主要功能

• 图形化展示数据：JSON 等数据绘制成思维导图风格的节点树或是力导向的关系图，支持拖放、缩放、展开节点和折叠节点等行为。
• 多格式转换与处理：支持 JSON、YAML、XML、CSV、TOML 等数据的相互转出，支持数据的美化、验证。
• 代码与模拟数据生成：可以自动生成 TypeScript 代码的接口或者是 Mock 数据，协助调试。
• 本地安全处理：所有数据解析和渲染都在浏览器本地完成，不上传到服务器，不留服务器缓存。
• 多平台集成：插件NPM包可以装入React应用中，与 VS Code 的扩展插件兼容，方便开发者在里面直接使用。

适用场景

• API接口数据调试：快速梳理和检查后端返回的深层的JSON数据结构，找对字段。
• 配置文件可视化：查看和理解复杂的 YAML 或 TOML 配置文件（Kubernetes、Ansible 等）。
• 依赖关系分析：查看 package.json、requirements.txt 等的包依赖关系，辅助维护复杂项目。
• 数据探索与团队协作：把数据和数据结构可视化后，向非技术人员（产品、运营）解释使用，或生成图表输出到文档和团队交流。
• 格式转换与数据验证：实现不同的数据格式转换，或判定数据合法性。 

JSON Crack怎么使用？

1. 打开浏览器访问JSON Crack 官网（https://jsoncrack.com）。该工具免费开源，不需要下载安装，所有处理都在你的浏览器上完成，不用上传到服务器。
2. 导入数据：在左侧编辑区默认例子里的代码删除，将你自己的JSON、YAML、XML、CSV数据粘贴进去；也可选择“Open”、“Upload”上传文件，或者在“Load URL”处直接输入抓取API的URL。
3. 将右侧画布生成图可以拖动鼠标滚轮放大或缩小、按住鼠标左键拖动画布可整体浏览或细节浏览；单击右键给节点左右折叠；右上角的搜索框输入内容快速搜索自己想要的。
4. 图表中节点的彩色表示着不同的数据类型：字符串是橙色、数字是蓝色、Boolean 是绿色、object 嵌套值是灰色，使数据结构看起来很容易。
5. 实时编辑：在左侧编辑器编辑数据，也可以双击右侧画布节点编辑修改数据，画布图标也实时更新。修改完画图可以直接获取格式化后完整的 JSON 代码保存。
6. 导出图片：点击导出按钮，可以将本图表导出 PNG、JPEG、SVG 等图片文档用于文章报告中。
7. 高级功能：工具还有一些 AI 数据转换/过滤功能、jq 查询、JSON 路径等较多的进阶功能。
8. 集成使用：可以通过 iframe 标签引用可视化功能到自己的网页里面；也可以在 VS Code 上安装 JSON Crack 这个插件，打开 .json 文件后，使用命令“Open with JSON Crack”，可在编辑器上查看图示。
9. 团队部署：可以使用 Docker 简单部署内部的实例，同时团队成员也可以共享可视化的工具、使用工具，保障数据安全。
10. 性能建议：可以使用简单的扩展方法处理大 JSON 文件（比如几千行）的性能问题，可以在本地剪裁大 JSON 文件或者只在大 JSON 文件上加载一部分，保证顺畅。