Created
Aug 16, 2024 12:32 AM
Favorite
Favorite
Priority
备注
推荐
类型
- 戳上方蓝字“开源先锋”关注我
推荐阅读：
大家好，我是开源君！
现在很多朋友都喜欢使用 JSON 格式来处理 API 和数据库等数据。
有时，JSON 请求或响应可能非常简单。但是也有很多时候，JSON 结果往往令人意想不到，最难过的是，我们因为种种原因，需要对 JSON 进行深入研究。
今天开源君分享一个非常优雅的 JSON 数据可视化工具 -
jsoncrack，一眼就能看穿 JSON 的玄机。项目简介
jsoncrack 是一个用于可视化 JSON 数据的工具。它可以将复杂的 JSON 数据转换为树状图，使其更易于理解和分析。这个工具最大的亮点就是，不仅可以对数据进行格式化，还能生成带有可视化思维导图的形式，让数据变得更加立体有层次感。
目前在收获了 29.1k Star，非常受欢迎。
功能特色
- 支持暗黑模式。
- 可以导出为PNG、SVG、JPEG格式，也可以直接复制到剪贴板。
- 支持缩放和平移，可以用手势来操作。
- 提供多种实用工具 - 搜索、JSON路径、节点内容查看、展开/折叠、自动格式化...
- 支持分享、导入和获取。
- 可以轻松嵌入到网页中的iframe小部件。
快速安装
项目支持本地部署以及Docker部署，按照项目操作命令即可，很简单，
不过需要提前准备Node.js (版本大于18.x)、Pnpm 环境。
本地部署，依次执行下面的命令，
之后浏览器打开 http://localhost:3000/ 。
Docker的话，安装命令如下：
之后浏览器打开 http://localhost:8888/ 。
项目体验展示
官方提供了Demo站供我们体验使用，打开工具主页，
点击 “EDITOR”，这里会默认展示一个作者准备好的 JSON 示例。
清空左边的代码，将你需要可视化的 JSON 代码粘贴进去即可将 JSON 可视化，非常简单。
把左边的代码清空，粘贴进去你要处理的 Json 代码，右边会有可视化的效果，很简单。
接下来看看其他的功能。
放大缩小
如果你觉得可视化图太小，看不清楚，可以用Ctrl+鼠标滚轮进行调整，或者点右上角的+/-号进行调整。
有需要处理 JSON 数据，可以尝试使用体验一下 jsoncrack，帮助你更高效地工作。
保存
可以对处理好的Json代码可视化图进行保存，还能自定义背景颜色。
有需要处理 JSON 数据，可以尝试使用体验一下 jsoncrack，帮助你更高效地工作。
另外还支持对导图的旋转、压缩/恢复结点、搜索节点、导入、保存（下载）、分享以及节点、主题等等的设置。
有需要处理 JSON 数据，可以尝试使用体验一下 jsoncrack，帮助你更高效地工作。
有需要处理 JSON 数据，可以尝试使用体验一下 jsoncrack，帮助你更高效地工作。
更多细节功能，感兴趣的可以到项目地址查看：
项目地址：
https://github.com/AykutSarac/jsoncrack.com
开源192
TypeScript19