npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

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.

About

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 🙏

© 2020 – Pkg Stats / Ryan Hefner

@antv/x6

v1.1.0

Published

JavaScript diagramming library that uses SVG and HTML for rendering.

Downloads

5,004

Readme

Features

  • 🌱 easy-to-customize: based on well known SVG/HTML/CSS or React to custom nodes and edges
  • 🚀 out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.
  • 🧲 data-driven: base on MVC architecture, you can focus on data logic and business logic
  • 💯 highly-event-driven: you can react on any event that happens inside the graph

Installation

NPM/Yarn

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

# yarn
$ yarn add @antv/x6

CDNs

For learning purposes, you can use the latest version with one of the CDN:

  • https://unpkg.com/@antv/x6/dist/x6.js
  • https://cdn.jsdelivr.net/npm/@antv/x6/dist/x6.js
  • https://cdnjs.com/libraries/@antv/x6
<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>

For production, we recommend linking to a specific version number to avoid unexpected breakage from newer versions:

<script src="https://unpkg.com/@antv/[email protected]/dist/x6.js"></script>

Usage

Step 1: specify a container the render the diagram.

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

Step 2: render nodes and edges.

import { Graph } from '@antv/x6'

// Create an instance of Graph.
const graph = new Graph({
  container: document.getElementById('container'),
  grid: true
})

// Render source node.
const source = graph.addNode({
  x: 300,
  y: 40,
  width: 80,
  height: 40,
  label: 'Hello',
})

// Render target node.
const target = graph.addNode({
  x: 420,
  y: 180,
  width: 80,
  height: 40,
  label: 'World',
})

// Render edge from source to target.
graph.addEdge({
  source,
  target,
})

Documentation

App Demos Build with X6

Flowchart

A flowchart is a type of diagram that represents a workflow or process. A flowchart can also be defined as a diagrammatic representation of an algorithm, a step-by-step approach to solving a task.

DAG

DAG is short for Directed Acyclic Graph, which is a directed graph with no directed cycles. It was originally a common data structure in the computer field. Due to the excellent characteristics brought by the unique topology structure, it is often used to deal with dynamic programming, searching for the shortest path in navigation, data compression and other algorithms.

ERD

An entity relationship diagram (ERD) shows the relationships of entity sets stored in a database. An entity in this context is an object, a component of data. An entity set is a collection of similar entities. These entities can have attributes that define its properties. By defining the entities, their attributes, and showing the relationships between them, an ER diagram illustrates the logical structure of databases.

Experience Improvement Program Description

In order to serve the users better, X6 will send the URL and version information back to the AntV server:

https://kcart.alipay.com/web/bi.do

Except for URL and X6 version information, no other information will be collected. You can also turn it off with the following code:

import { Config } from '@antv/x6'

Config.track(false)

Communication

Welcome to join the X6 Communication Group (Scan the QR Code to Join us). We also welcome the github issues.

Development

# install yarn and lerna
$ npm install yarn -g
$ npm install lerna -g

# install deps and build
$ yarn bootstrap

# run tests
$ yarn test

# build
$ yarn build

Contributing

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

To become a contributor, please follow our contributing guide.

Contributors

License

The scripts and documentation in this project are released under the MIT License.