同步操作将从 antv/X6 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
JavaScript diagramming library that uses SVG and HTML for rendering.
简体中文 | English
# npm
$ npm install @antv/x6 --save
# yarn
$ yarn add @antv/x6
For learning purposes, you can use the latest version with one of the CDN:
<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/x6@1.1.1/dist/x6.js"></script>
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 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,
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,
})
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 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.
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.
Welcome to join the X6 Communication Group (Scan the QR Code to Join us). We also welcome the github issues.
This repo is base on lerna with the following structor:
.
├── 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.
# install yarn and lerna
$ npm install yarn -g
$ 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:
cd examples/x6-example-features
yarn start
When need to fix some bugs of X6, we can start with watch mode:
cd packages/x6
// build esm to "em" dir
yarn build:watch:esm
// build commonjs to "lib" dir
yarn build:watch:cjs
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.
The scripts and documentation in this project are released under the MIT License.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。