feat: update graphin readme

antvis · Nov 21, 2019 · 935c894 · 935c894
1 parent eee43fc
commit 935c894
Show file tree

Hide file tree

Showing 3 changed files with 178 additions and 103 deletions.
diff --git a/README.cn-ZH.md b/README.cn-ZH.md
@@ -0,0 +1,111 @@
+## Graphin
+
+![](https://camo.githubusercontent.com/2b77a87432d47fb4f20f5b0bfbdcb2db15775dab/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f6d646e2f726d735f3030656463622f616674732f696d672f412a456b4a6d52726d754a41674141414141414141414141426b4152516e4151)
+
+[English](./README.en-US.md)
+
+Graphin 取名意为 Graph Insight（图的分析洞察），是一个基于 G6 封装的 React 组件库。简单，高效，开箱即用。它的 Logo 是一个石墨烯（Graphene），意为蕴藏未来的潜力。
+
+Graphin 采用 lerna 包管理机制，packages 中包含以下 4 个 package
+
+```bash
+/packages
+    graphin
+    graphin-components
+    graphin-studio
+    graphin-site
+```
+
+他们依次对应的包名与解释如下：
+
+| 包名                                                                                                  | 说明                                                   |
+| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| [@antv/graphin](https://github.com/antvis/graphin/tree/master/packages/graphin)                       | Graphin 中的图分析内核，基于 G6 封装 的 React 组件     |
+| [@antv/graphin-components](https://github.com/antvis/graphin/tree/master/packages/graphin-components) | Graphin 中的图分析组件                                 |
+| [@antv/graphin-site](https://github.com/antvis/graphin/tree/master/packages/graphin-site)             | Graphin 文档官网                                       |
+| [graphin-studio](https://github.com/antvis/graphin/tree/master/packages/graphin-studio)               | Graphin 演示 DEMO：基于 Graphin 实现的通用关系分析平台 |
+
+### Graphin 快速开始
+
+#### 安装
+
+```bash
+npm run --save @antv/graphin
+```
+
+#### Usage
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Graphin, { Utils } from '@antv/graphin';
+
+import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+import './styles.css';
+
+const App = () => {
+    const data = Utils.mock(10).graphin();
+    return (
+        <div className="App">
+            <Graphin data={data} />
+        </div>
+    );
+};
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<App />, rootElement);
+```
+
+### 开发
+
+-   设置 npmClient
+
+在 lerna.json 中设置你的 npmClient，中国地区的朋友可以设置 [cnpm](https://www.npmjs.com/package/cnpm)
+
+```json
+// ./lerna.json
+{
+    "packages": ["packages/*"],
+    "npmClient": "cnpm",
+    "version": "0.0.0"
+}
+```
+
+-   安装依赖
+
+```bash
+cnpm i
+```
+
+-   安装各 packages 的依赖
+
+```bash
+npm run bootstrap
+```
+
+-   启动 graphin 与 graphin-components 的本地编译
+
+```bash
+npm run start
+```
+
+> 在`npm run start`后
+
+-   启动 Graphin Demo：Graphin Studio
+
+```bash
+npm run studio
+```
+
+-   启动 Graphin 文档站点
+
+```bash
+npm run site
+```
+
+### 更多信息
+
+-   [Graphin 简介](https://antvis.github.io/graphin/zh/docs/manual/introduction)
+-   [快速上手](https://antvis.github.io/graphin/zh/docs/manual/getting-started)
+-   [API 文档](https://antvis.github.io/graphin/zh/docs/api/graphin)
+-   [GraphinStudio](https://antvis.github.io/graphin/zh/GraphinStudio)
diff --git a/README.en-US.md b/README.en-US.md
diff --git a/README.md b/README.md
@@ -1,76 +1,114 @@
 ## Graphin
 
-[English README](./README.en-US.md)
+![](https://camo.githubusercontent.com/2b77a87432d47fb4f20f5b0bfbdcb2db15775dab/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f6d646e2f726d735f3030656463622f616674732f696d672f412a456b4a6d52726d754a41674141414141414141414141426b4152516e4151)
 
-Graphin 采用 lerna 包管理机制，packages 中包含以下 4 个 package
+[中文](./README.cn-ZH.md)
+
+Graphin means Graph Insight (analysis of graphs). It is a library based on G6 and React and offers graph analysis toolkit out of the box. Graphin's logo is graphene, which means the potential in the future.
+
+For more infomation, please check the [Graphin Website](https://antv.vision/graphin).
+
+Graphin use lerna to management this repo. This repo contains the  following packages:
 
 ```bash
 /packages
-    graphin
-    graphin-components
-    graphin-studio
-    graphin-site
+    graphin
+    graphin-components
+    graphin-studio
+    graphin-site
 ```
 
-他们依次对应的包名与解释如下
+Please checkout the specific package：
+
+| Package Name             | Description                                                            |
+| ------------------------ | ---------------------------------------------------------------------- |
+| [@antv/graphin](https://github.com/antvis/graphin/tree/master/packages/graphin)  |    Core React component of Graphin                    |
+| [@antv/graphin-components](https://github.com/antvis/graphin/tree/master/packages/graphin-components) | Graphin components                                            |
+| [@antv/graphin-site](https://github.com/antvis/graphin/tree/master/packages/graphin-site)       | Graphin documentation website                                               |
+| [graphin-studio](https://github.com/antvis/graphin/tree/master/packages/graphin-studio)           | A Graphin demo: generic graph analysis workbench based on Graphin |
+
+### Graphin Quick Start
+
+#### Install
+
+```bash
+npm run --save @antv/graphin
+```
+
+#### Usage
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Graphin, { Utils } from '@antv/graphin';
+
+import "@antv/graphin/dist/index.css"; // 引入Graphin CSS
+import './styles.css';
+
+const App = () => {
+    const data = Utils.mock(10).graphin();
+    return (
+        <div className="App">
+            <Graphin data={data} />
+        </div>
+    );
+};
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<App />, rootElement);
+```
 
-|   包名                   | 说明                                                   |
-| ------------------------ | ------------------------------------------------------ |
-| @antv/graphin            | Graphin 中的图分析内核，基于 G6 封装 的 React 组件     |
-| @antv/graphin-components | Graphin 中的图分析组件                                 |
-| @antv/graphin-site       | Graphin 文档官网                                       |
-| graphin-studio           | Graphin 演示 DEMO：基于 Graphin 实现的通用关系分析平台 |
 
-### 快速开始
+### Develop 
 
--   设置 npmClient
+-   Set npmClient
 
-在 lerna.json 中设置你的 npmClient，中国地区的朋友可以设置 [cnpm](https://www.npmjs.com/package/cnpm)
+Set your npmClient in lerna.json, developers in China can set [cnpm](https://www.npmjs.com/package/cnpm)
 
 ```json
 // ./lerna.json
 {
     "packages": ["packages/*"],
-    "npmClient": "cnpm",
+    "npmClient": "yarn", // cnpm/npm
     "version": "0.0.0"
 }
 ```
 
--   安装依赖
+-   Install dependencies
 
 ```bash
-cnpm i
+npm i
 ```
 
--   安装各 packages 的依赖
+-   Install dependencies for each package
 
 ```bash
 npm run bootstrap
 ```
 
--   启动 graphin 与 graphin-components 的 start 本地编译
+-   Start the local compilation of graphin and graphin-components
 
 ```bash
 npm run start
 ```
 
-> 在`npm run start`后
+> after `npm run start`
 
--   查看 graphin-studio 的 demo 示例
+-   Start the Graphin studio demo
 
 ```bash
 npm run studio
 ```
 
--   查看 graphin-sire 的 gatsby 官方
+-   Start Graphin Doc site
 
 ```bash
 npm run site
 ```
 
-### 使用文档
+### More
 
--   [Graphin 简介](https://antvis.github.io/graphin/zh/docs/manual/introduction)
--   [快速上手](https://antvis.github.io/graphin/zh/docs/manual/getting-started)
--   [API 文档](https://antvis.github.io/graphin/zh/docs/api/graphin)
--   [GraphinStudio](https://antvis.github.io/graphin/zh/GraphinStudio)
+-   [Introduction to Graphin](https://antv.vision/graphin/en/docs/manual/introduction)
+-   [Getting started](https://antv.vision/graphin/en/docs/manual/getting-started)
+-   [API documentation](https://antv.vision/graphin/en/docs/api/graphin)
+-   [GraphinStudio](https://antv.vision/graphin/en/GraphinStudio)