add toc and format for design

Signed-off-by: NTing Wang <kathy.wangting@huawei.com>

docs/source_zh_cn/design.rst

+设计文档
+===========
+
+.. toctree::
+  :maxdepth: 1
+
+  architecture
+  technical_white_paper
+  design/mindspore/distributed_training_design
+  design/mindinsight/training_visual_design
+  design/mindinsight/graph_visual_design
+  design/mindinsight/tensor_visual_design
\ No newline at end of file

docs/source_zh_cn/design/mindinsight/graph_visual_design.md

@@ -16,6 +16,7 @@
 <a href="https://gitee.com/mindspore/docs/blob/master/docs/source_zh_cn/design/mindinsight/graph_visual_design.md" target="_blank"><img src="../../_static/logo_source.png"></a>
 
 ## 特性背景
+
 计算图可视的功能，主要协助开发者在下面这些场景中使用。
 
  - 开发者在编写深度学习神经网络的代码时，可以使用计算图的功能查看神经网络中算子的数据流走向，以及模型结构。
@@ -25,6 +26,7 @@
 ## 总体设计
 
 ### 概念设计
+
  |概念|说明|
  |--|--|
  |根节点 (root node) 子节点(subnode)|我们根据算子名称中的斜线，对节点划分层级。比如节点A 'Network' 和节点B 'Network/Conv2D'，我们称节点A为根节点， 称节点B为节点A的子节点。|
@@ -46,6 +48,7 @@
 ![类图设计](./images/graph_visual_class_design.png)
 
 ### 前端设计
+
 数据将通过Web UI进行绘图并展示，前端采用d3-graph-viz 3.x插件进行绘图辅助。
 
 ![输入图片说明](./images/graph_visual_right_side.png)  
@@ -59,9 +62,11 @@
 计算图中，根据斜线（/）对节点的名称划分层次，并逐层展示，参考`计算图主体展示`图。双击一个作用域节点后，将会展示它的子节点。
 
 ## 接口设计
+
 计算图中，主要有文件接口和RESTful API接口，其中文件接口为`summary.proto`文件，是MindInsight和MindSpore进行数据对接的接口。
 RESTful API接口是MindInsight前后端进行数据交互的接口。
 
 ### 文件接口设计
+
 MindSpore与MindInsight之间的数据交互，采用[protobuf](https://developers.google.cn/protocol-buffers/docs/pythontutorial?hl=zh-cn)定义数据格式。
 [summary.proto文件](https://gitee.com/mindspore/mindinsight/blob/master/mindinsight/datavisual/proto_files/mindinsight_summary.proto)为总入口，计算图的消息对象定义为 `GraphProto`。`GraphProto`的详细定义可以参考[anf_ir.proto文件](https://gitee.com/mindspore/mindinsight/blob/master/mindinsight/datavisual/proto_files/mindinsight_anf_ir.proto)。

tutorials/source_zh_cn/design/mindinsight/tensor_visual_design.md → docs/source_zh_cn/design/mindinsight/tensor_visual_design.md

-# 张量可视
+# 张量可视设计
 
 <!-- TOC -->
 
-- [张量可视](#张量可视)
+- [张量可视设计](#张量可视设计)
     - [特性背景](#特性背景)
     - [总体设计](#总体设计)
         - [后端设计](#后端设计)
@@ -12,8 +12,12 @@
 
 <!-- /TOC -->
 
+<a href="https://gitee.com/mindspore/docs/blob/master/docs/source_zh_cn/design/mindinsight/tensor_visual_design.md" target="_blank"><img src="../../_static/logo_source.png"></a>
+
 ## 特性背景
+
 张量可视能够帮助用户直观查看训练过程中的Tensor值，既支持以直方图的形式呈现Tensor的变化趋势，也支持查看某次step的具体Tensor值。Tensor包括权重值、梯度值、激活值等。
+
 ## 总体设计
 
 Tensor可视主要是解析由MindSpore的`TensorSummary`算子记录的Tensor数据生成的Summary文件，并把结果返回给前端展示。
@@ -48,9 +52,11 @@ Tensor可视支持1-N维的Tensor以表格或直方图的形式展示，对于0
 图2将用户所记录的张量以直方图的形式进行展示。
 
 ### 接口设计
+
 在张量可视中，主要有文件接口和RESTful API接口，其中文件接口为[summary.proto](https://gitee.com/mindspore/mindspore/blob/master/mindspore/ccsrc/utils/summary.proto)文件，是MindInsight和MindSpore进行数据对接的接口。 RESTful API接口是MindInsight前后端进行数据交互的接口，是内部接口。
 
 #### 文件接口设计
+
 `summary.proto`文件为总入口，其中张量的数据（TensorProto）存放在Summary的Value中，如下所示：
 ```
 {

docs/source_zh_cn/design/mindinsight/training_visualization.md → docs/source_zh_cn/design/mindinsight/training_visual_design.md

 # MindInsight训练可视总体设计
 
+<!-- TOC -->
+
 - [MindInsight训练可视总体设计](#mindinsight训练可视总体设计)
     - [MindInsight训练可视逻辑架构](#mindinsight训练可视逻辑架构)
         - [训练信息收集架构](#训练信息收集架构)
@@ -16,6 +18,10 @@
                 - [迭代数（step）](#迭代数step)
                 - [数据的查询和展示](#数据的查询和展示)
 
+<!-- /TOC -->
+
+<a href="https://gitee.com/mindspore/docs/blob/master/docs/source_zh_cn/design/mindinsight/training_visual_design.md" target="_blank"><img src="../../_static/logo_source.png"></a>
+
 [MindInsight](https://gitee.com/mindspore/mindinsight)是MindSpore的可视化调试调优组件。通过MindInsight可以完成训练可视、性能调优、精度调优等任务。
 
 训练可视功能主要包括训练看板、模型溯源、数据溯源等功能，训练看板中又包括标量、参数分布图、计算图、数据图、数据抽样等子功能。

docs/source_zh_cn/design/mindspore/dp_internal_design.md → docs/source_zh_cn/design/mindspore/distributed_training_design.md

-# 分布式训练架构设计概述
+# 分布式训练设计
 
 <!-- TOC -->
-- [分布式训练架构设计概述](#分布式训练架构设计概述)
+
+- [分布式训练设计](#分布式训练设计)
     - [背景](#背景)
-	- [概述](#概述)
+    - [概念](#概念)
         - [集合通信](#集合通信)
         - [同步模式](#同步模式)
     - [数据并行](#数据并行)
         - [设计原理](#设计原理)
         - [代码实现](#代码实现)
         - [其他并行](#其他并行)
-<!-- TOC -->
 
+<!-- /TOC -->
+
+<a href="https://gitee.com/mindspore/docs/blob/master/docs/source_zh_cn/design/mindspore/distributed_training_design.md" target="_blank"><img src="../../_static/logo_source.png"></a>
 
 ## 背景
+
 随着深度学习的快步发展，为了提升神经网络的精度和泛化能力，数据集和参数量都在呈指数级向上攀升。分布式并行训练成为一种解决超大规模网络性能瓶颈的发展趋势。MindSpore支持了当前主流的分布式训练范式并开发了一套自动混合并行解决方案。本篇设计文档将会集中介绍几种并行训练方式的设计原理，同时指导用户进行自定义开发。
 
 
 ## 概念
+
 ### 集合通信
+
 集合通信指在一组进程间通信，组内所有进程满足一定规则的发送和接收数据。MindSpore通过集合通信的方式进行并行训练过程中的数据传输工作，在Ascend芯片上它依赖于华为集合通信库HCCL完成。
 
 ### 同步模式
+
 在同步模式下，所有的设备同时读取参数的取值，并且当反向传播算法完成之后同步更新参数的取值。MindSpore目前采用的是同步训练模式。
 
 ## 数据并行
+
 这个小节介绍了在MindSpore中`ParallelMode.DATA_PARALLEL`数据并行模式是如何工作的。
 
 ### 设计原理
@@ -52,6 +60,7 @@
     因为引入了梯度聚合操作，所以各卡的模型会以相同的梯度值一起进入参数更新步骤。因此MindSpore实现的是一种同步数据并行训练方式。理论上最终每卡训练出来的模型是相同的，如果网络中含有在样本维度的归约类型操作，网络的输出可能会有所差别，这是由数据并行的切分性质决定的。
 
 ### 代码实现
+
 1. 集合通信
 
     - [management.py](https://gitee.com/mindspore/mindspore/blob/master/mindspore/communication/management.py): 这个文件中涵盖了集合通信过程中常用的`helper`函数接口，例如获取集群数量和卡的序号等。当在Ascend芯片上执行时，框架会加载环境上的`libhccl.so`库文件，通过它来完成从Python层到底层的通信接口调用。
@@ -63,6 +72,7 @@
 
 
 ### 其他并行
-建设中，即将上线
+
+建设中，即将上线。
 
 

docs/source_zh_cn/index.rst

@@ -10,10 +10,9 @@ MindSpore文档
    :glob:
    :maxdepth: 1
 
-   architecture
+   design
    roadmap
    benchmark
-   technical_white_paper
    network_list
    operator_list
    constraints_on_network_construction