diff --git a/src/app/shared/components/markdown-render/markdown-render.component.ts b/src/app/shared/components/markdown-render/markdown-render.component.ts
index 5c97b06a..e1a7cc23 100644
--- a/src/app/shared/components/markdown-render/markdown-render.component.ts
+++ b/src/app/shared/components/markdown-render/markdown-render.component.ts
@@ -1,5 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {MarkdownService} from 'ngx-markdown';
+import marked from 'marked';
+import { zip } from 'lodash-es';
 
 @Component({
   selector: 'component-markdown-render',
@@ -59,6 +61,8 @@ export class MarkdownRenderComponent implements OnInit {
 
       if (lang === 'process') {
         return this.buildCodeProcess(code);
+      } else if (lang === 'process-table') {
+        return this.buildTableProcess(code);
       }
 
       if (options.highlight) {
@@ -106,21 +110,59 @@ export class MarkdownRenderComponent implements OnInit {
     for (let index = 0; index < length; index++) {
       let str = splitCode[index];
       str = str.substr(1, str.length - 2);
-      items += `
+      items += this.buildProcessHeaderItem(index, str);
+    }
+
+    return this.buildProcessHeader(items);
+  }
+
+  private buildProcessHeaderItem(index: number, str: string) {
+    return `
       <div class="flex-row cell type_${index}">
         ${str}
       </div>
       `;
-    }
+  }
 
-    return `
-      <div class="process-table">
+  private buildProcessHeader(items: string) {
+    return `<div class="process-table">
   <div class="table-container" role="table" aria-label="Destinations">
     <div class="flex-table header" role="rowgroup">
       ${items}
     </div>
     </div>
-  </div>
-      `;
+  </div>`;
+  }
+
+  private buildTableProcess(code: any) {
+    let resultStr = '';
+    let headers = [];
+    let cells = [];
+
+    const tokens = marked.lexer(code);
+    for (const token of tokens) {
+      if (token.type === 'table') {
+        headers = token.header;
+        cells = this.transpose(token.cells);
+      }
+    }
+    resultStr += this.buildProcessHeader(this.buildHeaderItem(headers));
+
+    return resultStr;
+  }
+
+  private buildHeaderItem(headers: any[]) {
+    let headerStr = '';
+    const length = headers.length;
+    for (let index = 0; index < length; index++) {
+      const header = headers[index];
+      headerStr += this.buildProcessHeaderItem(index, header);
+    }
+
+    return headerStr;
+  }
+
+  transpose(arr: any[][]) {
+    return zip.apply(this, arr);
   }
 }
diff --git a/src/assets/docs/casestudies/daocloud.md b/src/assets/docs/casestudies/daocloud.md
index 8e02e813..1909b286 100644
--- a/src/assets/docs/casestudies/daocloud.md
+++ b/src/assets/docs/casestudies/daocloud.md
@@ -4,11 +4,13 @@
 
 ### DevOps 典型工具链
 
+```process-table
 | 项目管理 | 持续集成 | 持续部署 | 发布 | 质量 | 测试 |  运维 | 协作 |   
 |---|---|---|---|---|---|---|---|
 | 任务管理：Jira | 源码：GitHub 企业版 | 发布：DCS | 制品仓库：Nexus| 代码质量管理：SonarQube | 单元测试：JUnit | 应用监控： APM | 知识库：Confluence |  
 | 问题管理：Jira | 代码评审：GitHub 企业版 |    | | 代码安全扫描： CheckMarx | 接口测试: RTF | 系统运维：DCE | |
 |||||||压力测试：JMeter|日志管理: GrayLog||
+```
 
 ### DevSecOps 典型工具链
 
diff --git a/src/assets/docs/pattern.md b/src/assets/docs/pattern.md
index ff408c73..6493bf6e 100644
--- a/src/assets/docs/pattern.md
+++ b/src/assets/docs/pattern.md
@@ -22,3 +22,7 @@ based on: MDB & [https://martinfowler.com/articles/agileFluency.html](https://ma
 | 执行 | 掌握实践 | 组织职能 | 企业级流程、实践、技术和工具，与客户价值交付相一致。 | 产品/服务周期时间缩短，部署更多数字服务（例如IoT）能力的增强。频繁变更并快速获取数据的能力，促成更具适应性的商业模式。 |  设计思维、数据战略、人才招聘、技术战略和路线图 | 6 - 18 个月  |
 | 优化 | 消除约束 | 组织结构 | 关键业务能力投放在最需要的地方，模糊性和自主性影响领导力风格。 | 价值交付的速度和技术采用的简便性带来了更高的回报，高价值的新业务模式逐步浮现。 | 适应性领导力、产品专业知识、适应性架构、开发者体验 | +1-3 年 |
 | 强化 | 强化整体 | 组织节奏 | 新的工作方式变得制度化，但组织的迭代和持续演进成为新常态。规划通过数据自动流转、测试和验证。 |  创新和产品卓越重塑市场，形成独特的收入模式。组织在各个方面的高响应力成为其核心能力，创造出亲密的客户互动。 | 平台商业模式、实验文化、智能生态 | 迭代改进，持续进行 |
+
+## 架构适应度函数
+
+