📝 update docs for getting started

packages/graphin-site/docs/manual/Contributing.zh.md

@@ -68,7 +68,7 @@ Graphin 团队会关注所有的 pull request，我们会 review 以及合并你
 
 npm run start 在本地运行 Graphin 和 Graphin Components 的构建
 
-npm run dev 在本地运行 Graphin Studio 的网站。
+npm run studio 在本地运行 Graphin Studio 的网站。
 
 npm run lint 检查代码风格。
 

packages/graphin-site/docs/manual/FAQ.en.md

@@ -4,21 +4,22 @@ order: 6
 icon: none
 ---
 
-### 01.What is the relationship between Graphin and G6?
+### 01. What is the relationship between Graphin and G6?
 
 It's important to understand the relationship between Graphin and G6. Although Graphin is a React component library based on G6, this is just a technical implementation, not its positioning. G6 is an analysis engine for graph analysis and graph visualization. In the field of analysis, G6 can be used for relationshp visual analysis and flow visual analysis. Graphin is only a solution in the field of relational visual analysis, as shown in the following figure. Show:
+
 <img  src='https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*CkJcSqfJJiQAAAAAAAAAAABkARQnAQ' width="100%"/>
 
--   Project plan: There is a threshold to use G6. Graphin provides a set of engineering solutions: rendering, interaction and layout and encapsulates capability of G6 intp API.
+-   Project plan: There is a learning cost to use G6. Graphin provides a set of engineering solutions: rendering, interaction, layout and encapsulates capability of G6's API.
 
 -   Product Capability: Graphin has a heart that wants to make products. After open source, We will continue to improve Graphin in all aspects. We plan to add Map Mode, Timebar and other advanced analysis methods.
 
 -   Easy to use: Graph visualization is a complex concept. Graphin removes some graph visualization concepts of G6. Botn interaction and layout are encapsulated inside GraphinYou and You can register nodeShape by JSON schema. Graphin is just a React component for users.
 
-### 02.What is the future plan of Graphin?
+### 02. What is the future plan of Graphin?
 
 Before answering this question, we have to talk about where Graphin comes from.
 
-Graphin was born in a graph analysis business team. the first version was developed using cytoscape.js. With the development of business, there are more customized needs, so we switched the engine to G6 and worked closely with the developers of G6 to slowly integrate into the entire AntV system. These parts with tick markers of the mind map are features that Graphin has already done.
+Graphin was born in a graph analysis business team. The first version was developed using cytoscape.js. With the development of business, there are more customized needs, so we switched the engine to G6 and worked closely with the developers of G6 to slowly integrate into the entire AntV system. These parts with tick markers of the mind map are features that Graphin has already done.
 
 <img src='https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*UKJkQYwpyu0AAAAAAAAAAABkARQnAQ' width='100%'/>

packages/graphin-site/docs/manual/FAQ.zh.md

@@ -4,18 +4,19 @@ order: 6
 icon: none
 ---
 
-### 01.Graphin 与 G6 的关系是什么？
+### 01. Graphin 与 G6 的关系是什么？
 
 搞懂 Graphin 与 G6 的关系非常重要，虽然 Graphin 是基于 G6 封装的 React 组件库，这只是它的技术实现，并不是它的定位。G6 是图分析与图可视化的分析引擎，在分析领域，可以使用 G6 做关系可视分析，也可以使用 G6 做流量可视分析，Graphin 只是一个在关系可视分析领域的解决方案，如下图所示：
+
 <img  src='https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*CkJcSqfJJiQAAAAAAAAAAABkARQnAQ' width="100%"/>
 
--   工程方案：G6 有一定的上手门槛，Graphin 提供了一套工程方案，渲染，交互，布局流程内置，与 React 框架整合，把 G6 能力封装聚合成 API
+-   工程方案：G6 有一定的上手门槛，Graphin 提供了一套工程方案，渲染，交互，布局流程内置，与 React 框架整合，把 G6 能力封装聚合成 API。
 
--   产品能力：Graphin 有一颗想做产品的心，开源后，我们将对标商业图分析工具 ReGraph 去打造，参考业界优秀图分析产品的功能特性，内置 布局切换，关系扩散，撤销重做等功能，未来计划新增 地图模式(Map Mode)，时序分析(Timebar),团伙导航等高级分析方法。
+-   产品能力：Graphin 有一颗想做产品的心，开源后，我们将对标商业图分析工具 ReGraph 去打造，参考业界优秀图分析产品的功能特性，内置 布局切换，关系扩散，撤销重做等功能，未来计划新增 地图模式(Map Mode)，时序分析（Timebar），团伙导航等高级分析方法。
 
--   简单易用：本身是一个比较复杂的概念，Graphin 屏蔽了 G6 的一些图可视化概念，注册节点也可以通过 JSON schema 去描述，交互，布局等概念都封装在 Graphin 内部，用户只需要像使用普通 React 组件一样去使用 Graphin 即可
+-   简单易用：本身是一个比较复杂的概念，Graphin 屏蔽了 G6 的一些图可视化概念，注册节点也可以通过 JSON schema 去描述，交互，布局等概念都封装在 Graphin 内部，用户只需要像使用普通 React 组件一样去使用 Graphin 即可。
 
-### 02.Graphin 未来的计划是什么？
+### 02. Graphin 未来的计划是什么？
 
 回答 Graphin 未来去哪儿的问题，我们得先得回答 Graphin 从哪儿来的问题
 

packages/graphin-site/docs/manual/change-log.en.md

@@ -8,11 +8,11 @@ Graphic strictly follows [semantic versioning 2.0.0 semantic version Specificati
 
 Release cycle
 
--Revision number: Daily bugfix updates will be carried out at the end of each week. (if there is an urgent bugfix, it can be released at any time)
+- Revision number: Daily bugfix updates will be carried out at the end of each week. (if there is an urgent bugfix, it can be released at any time)
 
--Minor version number: release a downward compatible version with new features every month.
+- Minor version number: release a downward compatible version with new features every month.
 
--Major version number: contains destructive updates and new features, not in the release cycle.
+- Major version number: contains destructive updates and new features, not in the release cycle.
 
 ## 1.0.0
 

packages/graphin-site/docs/manual/contributing.en.md

@@ -4,7 +4,7 @@ order: 8
 icon: none
 ---
 
-> This guide is referenced from[Ant Design](https://ant.design/docs/react/contributing-cn)
+> This guide is referenced from [Ant Design](https://ant.design/docs/react/contributing-cn)
 
 The following is a set of guidelines for contributing to Graphin. Please spend several minutes reading these guidelines before you create an issue or pull request.
 
@@ -54,7 +54,7 @@ Run npm install in the repository root.
 
 If you've fixed a bug or added code that should be tested, add tests!
 
-Ensure the test suite passes (npm run test). Tip: npm test -- --watch TestName is helpful in development.
+Ensure the test suite passes (npm run test).
 
 Run npm test -- -u to update the jest snapshots and commit these changes as well (if there are any updates).
 
@@ -68,10 +68,10 @@ After cloning Graphin, run npm install and npm run bootstrap to fetch its depend
 
 npm run start runs Graphin and Graphin Components.
 
-npm run dev runs Graphin Studio locally.
+npm run studio runs Graphin Studio locally.
 
 npm run lint checks the code style.
 
-npm test runs the complete test suite.
+npm run test runs the complete test suite.
 
 npm run build compiles Graphin and Graphin Components code to the dist directory.

packages/graphin-site/docs/manual/getting-started.en.md

@@ -165,7 +165,7 @@ const App = () => {
 
 Through the above 4 steps, we have a knowledge of all four core concepts of Graphin: data, layout, components, and events.
 
-As for their usage, there are certainly many students who have doubts. We try to sort out these issues and form a guide. If you have other questions, please ask in the issue.
+<!-- As for their usage, there are certainly many students who have doubts. We try to sort out these issues and form a guide. If you have other questions, please ask in the issue.
 
 -   Data
 
@@ -188,7 +188,7 @@ As for their usage, there are certainly many students who have doubts. We try to
     -   1. Why not provide a callback function for handleEvents, but let the user manually monitor events via Ref?
     -   2. What events do Graphin support in total?
 
-Of course, there are still many problems, which may belong to the high-level guidelines. I will not list them here. Let us enter the second stage and develop some interesting features.
+Of course, there are still many problems, which may belong to the high-level guidelines. I will not list them here. Let us enter the second stage and develop some interesting features. -->
 
 ## more features
 

packages/graphin-site/docs/manual/getting-started.zh.md

@@ -71,7 +71,25 @@ Graphin 组件内置了 6 种布局，默认提供布局为 concentric（同心
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
    ></iframe>
 
-### 03. 使用组件
+### 03. 配置 Node 和 Edge 样式
+
+想要修改 Graphin 的节点和边的样式，我们可以直接修改 data 上的数据：
+
+
+<iframe
+     src="https://codesandbox.io/embed/data-driven-2gsn2?fontsize=14&hidenavigation=1&theme=dark"
+     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="node_edge_style"
+     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+   ></iframe>
+
+`data.node` 和 `data.edge` 上的各个属性，比如 `shape` 和 `style` 等等和 G6 节点和边数据上的是一样的。这里会透传给 G6。这里的配置可以参考 G6 的文档：[内置节点](https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/defaultNode/#%E8%8A%82%E7%82%B9%E7%9A%84%E9%80%9A%E7%94%A8%E5%B1%9E%E6%80%A7) 和 [内置边](https://g6.antv.vision/zh/docs/manual/middle/elements/edges/defaultEdge#%E8%BE%B9%E7%9A%84%E9%80%9A%E7%94%A8%E5%B1%9E%E6%80%A7)。
+
+需要注意的是，如果传入的数据没有 shape，Graphin 给节点的默认 shape 是内置的自定义的 [CircleShape](/zh/docs/manual/main-concepts/data#02-%E4%BB%8E%E6%95%B0%E6%8D%AE%E5%88%B0%E8%A7%86%E5%9B%BE)。默认的边是内置的自定义 LineEdge。
+
+
+### 04. 使用组件
 
 Graphin 目前仅提供两个官方组件，Toolbar 和 ContextMenu。关于它们，你们可以在[核心概念/Components 分析组件](main-concepts/components)中得到更详细的介绍，我们以添加组件 `Toolbar` 为例：
 
@@ -157,9 +175,9 @@ const App = () => {
 
 ### 05. 总结与引导
 
-通过上面的 4 步，我们基本了解了 Graphin 的全部 4 个核心概念 data、layout、components，events。
+通过上面的 4 步，我们基本了解了 Graphin 的全部 4 个核心概念 data（数据）、layout（布局）、components（分析组件），events（数据）。
 
-关于它们的用法，肯定还有很多同学有疑问，我们试着把这些问题整理归纳，形成一个指引。如果有其他问题，还请大家在 issue 中提出。
+<!-- 关于它们的用法，肯定还有很多同学有疑问，我们试着把这些问题整理归纳，形成一个指引。如果有其他问题，还请大家在 issue 中提出。
 
 -   Data
 
@@ -182,7 +200,7 @@ const App = () => {
     -   1. 为什么不提供 handleEvents 的回调函数，而要让用户通过 Ref 手动去监听事件？
     -   2. 一共支持哪些事件呢？
 
-当然，还有很多问题，可能属于高级指引范畴，这里就不一一列举，让我们快进入第二个阶段，开发点有趣的功能。
+当然，还有很多问题，可能属于高级指引范畴，这里就不一一列举，让我们快进入第二个阶段，开发点有趣的功能。 -->
 
 ## 开发点有趣的功能
 
@@ -194,7 +212,7 @@ const App = () => {
 
 因为 Graphin 是 React 组件，改变 `props.layout` 就能改变视图的布局效果，因此我们只要把多种布局 layouts 组合起来，每次切换改变 `props.layout` 即可。
 
--   1. 设计布局切换 `LayoutSelector`组件的接口
+-   1. 设计布局切换 `LayoutSelector`组件的接口。
 
 ```tsx
 interface Layout {
@@ -215,15 +233,14 @@ interface LayoutSelectorProps {
 <LayoutSelector layouts={layouts} value={currentLayout} onChange={handleChange} />;
 ```
 
--   2.  内置布局信息 `layouts` 如何获取？
+-   2.  获取 Graphin 支持的内置布局列表 `layouts`。
 
-Graphin 提供了很多 API，用于将内部的一些状态或者函数封装给用户使用。内置的布局信息也可通过`apis.getInfo().layouts`获得
+Graphin 提供了很多 API，用于将内部的一些状态或者函数封装给用户使用。内置的布局信息可通过注入到 Graphin 子组件 props 中的 `props.apis.getInfo().layouts`获得
 
--   3.  API 如何获得？
+> Graphin 提供两种方式获得 apis 接口，第一种是通过组件的 props 传递，即所有包裹在 Graphin 组件内部的组件，都会获得 `apis` 这个属性。第二种方式是通过 `ref` 实例，详见[进阶指导/GraphRef](advanced-guides/graphRef)。第一种适用于用户自定义组件，非常方便拿到需要的接口。第二种方式更加灵活，可以在 Graphin 外层使用 Graphin 所提供的信息，常用于复杂场景或者多画布实例的情况下。
 
-Graphin 提供两种方式获得 apis 接口，第一种是通过组件的 props 传递，即所有包裹在 Graphin 组件内部的组件，都会获得 apis 这个属性。第二种方式是通过 ref 实例，详见[进阶指导/GraphRef](advanced-guides/graphRef)。第一种适用于用户自定义组件，非常方便拿到需要的接口。第二种方式更加灵活，可以在 Graphin 外层使用 Graphin 所提供的信息，常用于复杂场景或者多画布实例的情况下。
 
--   4. 完整代码如下：
+-   3. 完整代码如下：
 
 <iframe
      src="https://codesandbox.io/embed/layout-selector-oplx5?fontsize=14&theme=dark"
@@ -233,13 +250,16 @@ Graphin 提供两种方式获得 apis 接口，第一种是通过组件的 props
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
    ></iframe>
 
-### 02.节点扩散
+
+### 02. 节点扩散
 
 > 将一个节点扩散出它的一度，二度，多度关系，这是非常常用的一种分析手法。
 
-「节点扩散」在图分析中是一个比较典型的功能。常规情况下，在画布中进行节点操作，比如添加节点，删除节点，我们都会考虑很多问题，比如从 1 个节点变为 10 个节点，画布如何变化呢？新增的 9 个节点会放在什么位置呢？使用 Graphin 时，我们就不需要考虑这么多，只需要记住它是数据驱动的，我们不需要关心内部的实现，只需要告诉 Graphin 你需要渲染的数据是什么就可以。增加节点不用使用 `graph.add(node)`，删除节点也不用调用 `graph.remove(node)`，一切都是改变数据 `props.data` 即可。
+「节点扩散」在图分析中是一个比较典型的功能。常规情况下，在画布中进行节点操作，比如添加节点，删除节点，我们都会考虑很多问题，比如从 1 个节点变为 10 个节点，画布如何变化呢？新增的 9 个节点会放在什么位置呢？使用 Graphin 时，我们就不需要考虑这么多，只需要记住它是数据驱动的，我们不需要关心具体的实现，只需要告诉 Graphin 你需要渲染的数据是什么就可以。增加节点不用使用 `graph.add(node)`，删除节点也不用调用 `graph.remove(node)`，一切都是改变数据 `props.data` 即可。
+
+步骤：
 
--   1. 对选中的节点进行数据 Mock。
+-   1. 对选中的节点进行数据 Mock，模拟出节点扩散的结果（实际应用中这可能是从服务端返回的数据）。
 -   2. Click 事件触发改变 `state.data` 即可。
 
 ```tsx
@@ -296,7 +316,7 @@ const App = () => {
 };
 ```
 
--   4. 完整代码如下：
+完整代码如下：
 
 <iframe
      src="https://codesandbox.io/embed/nodeexpand-3io3m?fontsize=14&theme=dark"