GraphQL Birdseye 简介

我们非常荣幸地正式发布 graphql-birdseye ！Birdseye 允许您将任何 GraphQL 模式以动态交互式图表的形式查看。快来我们的演示网站上试用吧 ！

Birdseye 使用“战争迷雾”🌁导航样式，可动态缩放以一次显示部分架构。与一次性显示整个架构相比，这大大简化了查找相关类型的过程。

入门

您可以阅读此处的说明来开始使用 Birdseye  。该库目前以 React 组件的形式提供，但如果我们收到其他框架（例如 Angular 或 Vue）的请求，我们也很乐意与之合作 🙂。

我们为何建造它

我们受到启发，决定开发一个 GraphQL 模式可视化工具，以便将其添加到其他网站和包中。我们已经看到了一些其他优秀的工具，例如 graphql-rover、  graphql-voyager 和 graphql editor。我们最初计划将 voyager 与 graphql-playground集成，但这会使包的大小增加 1.2 MB。这个包的大小使得该库很难与其他工具集成。

为了解决这个问题，我们创建了 Birdseye，它 轻量级 且与其他工具兼容良好。在此过程中，我们还对用户体验进行了一些有益的改进（📣 感谢 Prisma 帮助我们构思“战争迷雾”导航）。

我们如何构建它

刚开始的时候，我们花了一个月的时间尝试各种图表库，比如 WebCola、  Cytoscape.js、  dagre 等等。有些库支持部分功能，有些则只支持一部分。这时，我们开始考虑构建自己的可视化库，但很快意识到这是多么疯狂的事情😅。

我们决定继续寻找，最终发现了 JointJS  🎊。它提供了一个优秀的 API，让我们能够定义自定义形状，并提供了出色的布局和链接路由算法。它还使我们能够根据需要修改这些算法。最重要的是，它几乎不增加包的大小（约 70kb）。

在确定了 JointJS 之后，项目的其余部分专注于更详细地理解 API 并使用它来构建库。我们使用的一些其他工具包括：

• TypeScript：只要能用，我们都会选择它。它的类型安全机制让我们能够及早发现一些简单的问题，从而避免很多麻烦。
• Rollup：专门打包库的捆绑器。
• svg-pan-zoom：HTML 中 SVG 的简单平移/缩放解决方案。它添加了鼠标滚动、双击和平移的事件监听器。

下一步

我们致力于改进这个库，使其成为可视化架构的首选。我们非常乐意听取您的反馈，以便我们不断改进它，并且我们始终欢迎您的贡献。我们计划进行的一些工作包括：

1. 提高更大模式的性能
2. 切换缩放导航样式的选项
3. 更流畅的 UI 过渡和交互

告诉我们您的想法🤔

如果您喜欢 Birdseye，请在 Twitter 上关注我们 ( @novvumio )，并在GitHub上给我们点个星🌟  ！如果您发现任何问题，我们很乐意为您解决！您可以 在这里提交。

关于我们：Novvum是一家现代软件开发机构，专门从事工程、战略和设计。