Skip to content

Commit

Permalink
docs: 📚️ update readme and contributing
Browse files Browse the repository at this point in the history
  • Loading branch information
@NewByVector
NewByVector committed Mar 18, 2022
1 parent 5a3b957 commit 6415927
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 294 deletions.
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,8 @@ Look at [these files](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJyg

X6 uses semantic versioning in release process based on [semver](https://semver.org/).

- [Publishing maintenance releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/maintenance-releases.md)
- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/pre-releases.md)
- [Publishing maintenance releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/maintenance-releases.md)
- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/pre-releases.md)

### Branch Strategy

Expand Down
10 changes: 5 additions & 5 deletions CONTRIBUTING.zh-CN.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 代码贡献规范

有任何疑问，欢迎提交 [issue](https://github.com/antvis/x6/issues) 或 [PR](https://github.com/antvis/x6/pulls)!
如果你有任何疑问，欢迎提交 [issue](https://github.com/antvis/x6/issues) 或 [PR](https://github.com/antvis/x6/pulls)!

## 提交 issue

Expand Down Expand Up @@ -109,8 +109,8 @@ BREAKING CHANGE:

## 发布管理

- [Publishing maintenance releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/maintenance-releases.md)
- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/pre-releases.md)
- [发布维护版本](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/maintenance-releases.md)
- [发布预发版本](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/pre-releases.md)

X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布。

Expand All @@ -121,7 +121,7 @@ X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布

### 发布策略

每个大版本都有一个发布经理管理（PM），他/她要做的事情
在每个大版本的发布中，都会有一个PM，他在发布的不同阶段负有以下职责：

#### 准备工作：

Expand All @@ -135,6 +135,6 @@ X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布

#### 发布时：

- 将老的稳定版本（master）备份到以当前大版本为名字的分支上（例如 `1.x`），并设置 tag 为 {v}.x`（ v 为当前版本，例如 `1.x`）。
- 将老的稳定版本（master）备份到以当前大版本为名字的分支上（例如 `1.x`），并设置 tag 为 {v}.x（ v 为当前版本，例如 `1.x`）。
- 发布新的稳定版本到 [npm](http://npmjs.com)，并通知上层框架进行更新。
- `npm publish` 之前，请先阅读[『我是如何发布一个 npm 包的』](https://fengmk2.com/blog/2016/how-i-publish-a-npm-package)。
169 changes: 27 additions & 142 deletions README.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@

<p align="center"><img src="/flow.svg"></p>

<p align="center"><strong>Graph Editing Engine Of AntV</strong></p>
<p align="center"><strong>JavaScript diagramming library that uses SVG and HTML for rendering</strong></p>

<p align="center"><a href="https://x6.antv.vision/en/docs/tutorial/about">Tutorials</a> · <a href="https://x6.antv.vision/en/examples/gallery">Examples</a> · <a href="https://x6.antv.vision/en/docs/api/graph">API</a></p>

<p align="center">
<a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/workflow/status/antvis/x6/%F0%9F%91%B7%E3%80%80CI/master?logo=github&style=flat-square"></a>
<a href="https://app.codecov.io/gh/antvis/X6"><img alt="coverage" src="https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=flat-square&token=15CO54WYUV"></a>
Expand All @@ -23,14 +22,21 @@

## Features

- 🌱　easy-to-customize: based on well known SVG/HTML/CSS or React/Vue 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
- 🌱　Easy-to-customize: based on well known SVG/HTML/CSS or React/Vue/Angular 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
## Environment Support

- Modern browsers and Internet Explorer 11 (with polyfills)
- Server-side Rendering

### NPM/Yarn
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
| --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |

## Installation

```shell
# npm
Expand All @@ -40,51 +46,20 @@ $ npm install @antv/x6 --save
$ 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.cloudflare.com/ajax/libs/antv-x6/1.3.20/x6.js

```html
<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:

- https://unpkg.com/@antv/[email protected]/dist/x6.js
- https://cdn.jsdelivr.net/npm/@antv/[email protected]/dist/x6.js
- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.1.1/x6.js

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

## Usage

**Step 1**: specify a container the render the diagram.

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

**Step 2**: render nodes and edges.

```ts
// import from node_modules
import { Graph } from '@antv/x6'
// or use the global variable `X6` exported from CDN links
// const { Graph } = 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,
Expand All @@ -93,7 +68,6 @@ const source = graph.addNode({
label: 'Hello',
})

// Render target node.
const target = graph.addNode({
x: 420,
y: 180,
Expand All @@ -102,93 +76,22 @@ const target = graph.addNode({
label: 'World',
})

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

<img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*o4W3RLZicagAAAAAAAAAAAAAARQnAQ" alt="HelloWorld" />

## Documentation

- [About](https://x6.antv.vision/en/docs/tutorial/about)
- [Getting Started](https://x6.antv.vision/en/docs/tutorial/getting-started)
- [Basic Usage](https://x6.antv.vision/en/docs/tutorial/basic/graph)
- [Advanced Practice](https://x6.antv.vision/en/docs/tutorial/intermediate/serialization)
- [Senior Guidance](https://x6.antv.vision/en/docs/tutorial/advanced/animation)
- [ChangeLog](https://x6.antv.vision/en/docs/tutorial/log)

## App Demos Build with X6

<center>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#flowchart" target="_blank" rel="noopener noreferrer">
<img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*JSr-RbwCgmcAAAAAAAAAAAAAARQnAQ" alt="Flow"/>
</a>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#dag" target="_blank" rel="noopener noreferrer">
<img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*RPiGRaSus3UAAAAAAAAAAAAAARQnAQ" alt="Dag"/>
</a>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#mindmap" target="_blank" rel="noopener noreferrer">
<img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*GsEGSaBkc84AAAAAAAAAAAAAARQnAQ" alt="MindMap"/>
</a>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#bpmn" target="_blank" rel="noopener noreferrer">
<img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*aPSySa8oz4sAAAAAAAAAAAAAARQnAQ" alt="BPMN"/>
</a>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#class" target="_blank" rel="noopener noreferrer">
<img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*OaCpR7t_mVoAAAAAAAAAAAAAARQnAQ" alt="Class"/>
</a>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#org" target="_blank" rel="noopener noreferrer">
<img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*FWx5SYDzLw4AAAAAAAAAAAAAARQnAQ" alt="ORG"/>
</a>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#er" target="_blank" rel="noopener noreferrer">
<img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*7yVJQoM6-9AAAAAAAAAAAAAAARQnAQ" alt="ER"/>
</a>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#swimlane" target="_blank" rel="noopener noreferrer">
<img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*mUVrSJMkP1UAAAAAAAAAAAAAARQnAQ" alt="SwimLane"/>
</a>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#tree" target="_blank" rel="noopener noreferrer">
<img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*XDnNRqnj4WkAAAAAAAAAAAAAARQnAQ" alt="Tree"/>
</a>
<a href="https://x6.antv.vision/zh/examples/showcase/practices#elk" target="_blank" rel="noopener noreferrer">
<img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Z3ebTKy0w9cAAAAAAAAAAAAAARQnAQ" alt="ELK"/>
</a>
</center>

## Communication

Welcome to join the **X6 Communication Group** (Scan the QR Code to Join us). We also welcome the github [issues](https://github.com/antvis/x6/issues).

<a href="https://qr.dingtalk.com/action/joingroup?code=v1,k1,rOHuvgq5s0EHDktyyQJffDE3ZAmHnbB2e6iwn/w4BKs=&_dt_no_comment=1&origin=11" target="_blank" rel="noopener noreferrer">
<img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Up-4S4v8H-0AAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群1" width="375" />
<img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*4Y_5S7i26LAAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群2" width="375" />
<img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*KHB4QJAsW4QAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群3" width="375" />
</a>
## Links

## Development
- [Documents](https://x6.antv.vision/zh/docs/tutorial/about)
- [Samples](https://x6.antv.vision/zh/examples/gallery)
- [Blog](https://www.yuque.com/antv/x6/td7srh)
- [Versioning Release Note](https://www.yuque.com/antv/x6/bbfu6r)
- [FAQ](https://www.yuque.com/antv/x6/be9pfx)
- [CodeSanbox Template](https://codesandbox.io/s/qosj0?file=/src/app.tsx)

This repo is based on [lerna](https://github.com/lerna/lerna) with the following structure:

```
.
├── examples
│ ├── x6-app-dag # example of dag graph
│ ├── x6-app-draw # example of flowchart
│ ├── x6-app-er # example of ER chart
│ └── x6-example-features # example of basic features
├── packages
│ ├── x6 # X6
│ ├── x6-react # wrap X6 with react(reserved)
│ ├── x6-react-components # react componets to build graph apps
│ ├── x6-react-shape # support render node with react
│ └── x6-vue-shape # support render node with vue
└── sites
├── x6-sites # sites and documents
├── x6-sites-demos # demos in documents
└── x6-sites-demos-helper # tools to build demos
```

We need to install some necessary global tools before getting started.
## Development

```shell
# install yarn and lerna
Expand All @@ -197,37 +100,19 @@ $ npm install lerna -g

# install deps and build
$ yarn bootstrap
```

Then we can `cd` to dirs to development and debugging.

Such as, we can start `examples/x6-example-features` locally:
# enter the specified project development and debugging
cd packages/x6
yarn build:watch

```shell
# start example to see the effect
cd examples/x6-example-features

yarn start
```

When need to fix some bugs of X6, we can start with **watch** mode:

```shell
cd packages/x6

// build esm to "em" dir
yarn build:watch:esm

// build commonjs to "lib" dir
yarn build:watch:cjs
```

## Contributing

Please let us know how can we help. Do check out [issues](https://github.com/antvis/x6/issues) for bug reports or suggestions first.

To become a contributor, please follow our [contributing guide](/CONTRIBUTING.md).

## Contributors
To become a contributor, please follow our [contributing guide](/CONTRIBUTING.md). If you are an active contributor, you can apply to be a outside collaborator.

<a href="https://github.com/antvis/x6/graphs/contributors">
<img src="/CONTRIBUTORS.svg" alt="Contributors" width="740" />
Expand Down
Loading

0 comments on commit 6415927

Please sign in to comment.