diff --git a/src/app/presentation/ledge-helper/ledge-helper.component.ts b/src/app/presentation/ledge-helper/ledge-helper.component.ts
index 5dc78fca..4b40583f 100644
--- a/src/app/presentation/ledge-helper/ledge-helper.component.ts
+++ b/src/app/presentation/ledge-helper/ledge-helper.component.ts
@@ -9,6 +9,32 @@ export class LedgeHelperComponent implements OnInit {
   content = `
 # Syntax Test
 
+\`\`\`process-step
+ - 平台层
+   - 运维平台
+   - 小米私有云
+   - 小米生态云
+ - 能力层
+   - 团队注册
+   - 一键接入
+   - 检测扫描工具集成
+   - 发布部署
+   - 标准化工具接入
+ - 工具层
+   - Gitlab
+   - Phabricator
+   - Jenkins on K8s
+   - 代码质量扫描
+   - 安全/法律合规扫描
+   - 二进制&产出物存储
+   - 二进制安全扫描
+   - 二进制法务审计扫描
+   - 部署服务
+ - 数据层
+   - 数据智能应用
+   - 研发效能数据仓库
+\`\`\`
+
 \`\`\`javascript
 console.log('hello, world');
 \`\`\`
@@ -25,7 +51,6 @@ console.log('hello, world');
 | Git | TSLint | Git (history) | Jasmine | GitHub Action | GitHub Traffic | GitHub Projects |
 | GitHub | Code Climate | |  Jest | | Google Analysis |  |
 \`\`\`
-
 `;
 
   constructor() { }
diff --git a/src/app/shared/components/ledge-render/ledge-render.component.html b/src/app/shared/components/ledge-render/ledge-render.component.html
index 5e94b679..28e41bd3 100644
--- a/src/app/shared/components/ledge-render/ledge-render.component.html
+++ b/src/app/shared/components/ledge-render/ledge-render.component.html
@@ -25,9 +25,19 @@
       <div [innerHTML]="item.data"></div>
     </div>
 
+    <div *ngSwitchCase="'process-step'">
+      <div class="markdown-process-step">
+        <div class="process-step-column" *ngFor="let row of item.data.childrens">
+          <div class="process-title">{{row.name}}</div>
+          <div class="process-body">
+            <div class="process-step-item" *ngFor="let cell of row.childrens">{{cell.name}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div *ngSwitchCase="'process-table'">
       <div class="process-table markdown-table">
-        {{stringify(item.data)}}
         <div class="table-container" role="table" aria-label="Destinations">
           <div class="flex-table header" role="rowgroup">
             <div class="flex-row cell type_{{index}}" *ngFor="let header of item.data.header;let index = index;">
diff --git a/src/app/shared/components/ledge-render/ledge-render.component.ts b/src/app/shared/components/ledge-render/ledge-render.component.ts
index 1a173549..117ddeaf 100644
--- a/src/app/shared/components/ledge-render/ledge-render.component.ts
+++ b/src/app/shared/components/ledge-render/ledge-render.component.ts
@@ -87,6 +87,13 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
           data: this.buildBarChartData(chartData.tables[0])
         });
         break;
+      case 'process-step':
+        const stepData = LedgeMarkdownConverter.toJson(codeBlock.text);
+        this.markdownData.push({
+          type: 'process-step',
+          data: stepData.lists[0]
+        });
+        break;
       case 'process-table':
         const tableData = LedgeMarkdownConverter.toJson(codeBlock.text);
         this.markdownData.push({
diff --git a/src/assets/docs/casestudies/xiaomi.md b/src/assets/docs/casestudies/xiaomi.md
index e672f202..03ec3f59 100644
--- a/src/assets/docs/casestudies/xiaomi.md
+++ b/src/assets/docs/casestudies/xiaomi.md
@@ -74,6 +74,7 @@ config: {"type": "group-square"}
 	
 
 架构分析:
+
 ```process-step
  - 平台层
    - 运维平台
@@ -88,7 +89,7 @@ config: {"type": "group-square"}
  - 工具层
    - Gitlab
    - Phabricator 
-   -Jenkis on K8s
+   - Jenkins on K8s
    - 代码质量扫描
    - 安全/法律合规扫描
    - 二进制&产出物存储