npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details


  • User packages



Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.


Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2022 – Pkg Stats / Ryan Hefner




JavaScript diagramming library that uses SVG and HTML for rendering.




简体中文 | English


  • 🌱 极易定制:支持使用 SVG/HTML/React/Vue 定制节点样式和交互
  • 🚀 开箱即用:内置 10+ 图编辑配套扩展,如框选、对齐线、小地图等
  • 🧲 数据驱动:基于 MVC 架构,用户更加专注于数据逻辑和业务逻辑
  • 💯 事件驱动:完备的事件系统,可以监听图表内发生的任何事件


使用 NPM/Yarn

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

使用 CDN

可以使用下面任意一个最新版本的 CDN 地址:

<script src=""></script>


<script src="[email protected]/dist/x6.js"></script>


Step 1: 指定渲染图的容器。

<div id="container" style="width: 600px; height: 400px"></div>

Step 2: 渲染节点和边。

// 从 node_modules 引入
import { Graph } from '@antv/x6'
// 从 CDN 引入时,我们暴露了 X6 这个全局变量
// const { Graph } = X6

// 创建 Graph 的实例
const graph = new Graph({
  container: document.getElementById('container'),
  grid: true

// 渲染源节点
const source = graph.addNode({
  x: 300,
  y: 40,
  width: 80,
  height: 40,
  label: 'Hello',

// 渲染目标节点
const target = graph.addNode({
  x: 420,
  y: 180,
  width: 80,
  height: 40,
  label: 'World',

// 渲染边





如果你在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。欢迎提 issues 交流,也可以使用钉钉扫描下面二维码加入X6 交流群

需要注意的是,提问题时请配上 CodeSandbox 的复现代码,方便快速定位和解决问题。


我们使用了 lerna 来管理项目,目录结构如下:

├── examples
│   ├── x6-app-dag            # dag 图示例
│   ├── x6-app-draw           # 流程图示例
│   ├── x6-app-er             # ER 图示例
│   └── x6-example-features   # 特性演示示例
├── packages
│   ├── x6                    # X6
│   ├── x6-react              # X6 的 React 封装(预留)
│   ├── x6-react-components   # 配套 React 组件库
│   ├── x6-react-shape        # 支持使用 React 渲染节点
│   └── x6-vue-shape          # 支持使用 Vue 渲染节点
└── sites
    ├── x6-sites              # 官网和文档
    ├── x6-sites-demos        # 文档中嵌入的 DEMO
    └── x6-sites-demos-helper # 构建文档 DEMO 的工具


# 全局安装 yarn 和 lerna 工具
$ npm install yarn -g
$ npm install lerna -g

# 安装项目依赖和初始化构建
$ yarn bootstrap


如本地启动 examples/x6-example-features 示例:

cd examples/x6-example-features

yarn start

修复 X6 的 BUG 时可以开启 watch 模式,配合上面启动的本地 DEMO,实时查看修复效果:

cd packages/x6

// esm 模式,动态构建 es 产物
yarn build:watch:esm

// commonjs 模式,动态构建 lib 产物
yarn build:watch:cjs


如果你在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

如需提交代码,请遵从我们的贡献指南。我们会收集贡献者的 Github 头像到下面贡献者清单中。


该项目的代码和文档基于 MIT License 开源协议。