diff --git a/.gitignore b/.gitignore
index 726398f..a1ea5d9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,3 @@ components/demos
 dist
 logs
 assets/data
-static/images/mermaid
diff --git a/assets/styles/mermaid-cli.css b/assets/styles/mermaid-cli.css
deleted file mode 100644
index 165758d..0000000
--- a/assets/styles/mermaid-cli.css
+++ /dev/null
@@ -1,50 +0,0 @@
-svg {
-  font-family: "Helvetica Neue", Arial, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 13px;
-}
-
-svg .label {
-  color: #333;
-}
-svg .node rect,
-svg .node circle,
-svg .node ellipse,
-svg .node polygon {
-  fill: #eee;
-  stroke: #999;
-  stroke-width: 1px;
-}
-svg .node.clickable {
-  cursor: pointer;
-}
-svg .arrowheadPath {
-  fill: #333;
-}
-svg .edgePath .path {
-  stroke: #666;
-  stroke-width: 1.5px;
-}
-svg .edgeLabel {
-  background-color: #fff;
-}
-svg .cluster rect {
-  fill: #eaf2fb !important;
-  stroke: #26a !important;
-  stroke-width: 1px !important;
-}
-svg .cluster text {
-  fill: #333;
-}
-svg div.mermaidTooltip {
-  position: absolute;
-  text-align: center;
-  max-width: 200px;
-  padding: 2px;
-  font-family: "Helvetica Neue", Arial, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 12px;
-  background: #eaf2fb;
-  border: 1px solid #26a;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 100;
-}
diff --git a/assets/styles/mermaid.css b/assets/styles/mermaid.css
deleted file mode 100644
index 876f393..0000000
--- a/assets/styles/mermaid.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.mermaid {
-  font-family: "Helvetica Neue", Arial, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 13px;
-}
-
-.mermaid .label {
-  color: #333;
-}
-.mermaid .node rect,
-.mermaid .node circle,
-.mermaid .node ellipse,
-.mermaid .node polygon {
-  fill: #eee;
-  stroke: #999;
-  stroke-width: 1px;
-}
-.mermaid .node.clickable {
-  cursor: pointer;
-}
-.mermaid .arrowheadPath {
-  fill: #333;
-}
-.mermaid .edgePath .path {
-  stroke: #666;
-  stroke-width: 1.5px;
-}
-.mermaid .edgeLabel {
-  background-color: #fff;
-}
-.mermaid .cluster rect {
-  fill: #eaf2fb !important;
-  stroke: #26a !important;
-  stroke-width: 1px !important;
-}
-.mermaid .cluster text {
-  fill: #333;
-}
-.mermaid div.mermaidTooltip {
-  position: absolute;
-  text-align: center;
-  max-width: 200px;
-  padding: 2px;
-  font-family: "Helvetica Neue", Arial, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 12px;
-  background: #eaf2fb;
-  border: 1px solid #26a;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 100;
-}
diff --git a/assets/styles/post.styl b/assets/styles/post.styl
index ff76ce9..1bd9aca 100644
--- a/assets/styles/post.styl
+++ b/assets/styles/post.styl
@@ -1,5 +1,4 @@
 @import "~highlight.js/styles/atom-one-dark.css"
-@import "./mermaid.css"
 
 margin-y($top, $bottom = $top)
   margin-top $top
diff --git a/one/build/generator.js b/one/build/generator.js
index c76abd3..90c155c 100644
--- a/one/build/generator.js
+++ b/one/build/generator.js
@@ -9,14 +9,12 @@ import { get, removeFile } from './deps'
 const DOCS_DIR = resolve(__dirname, '../docs')
 const PAGES_DIR = resolve(__dirname, '../../pages')
 const DEMOS_DIR = resolve(__dirname, '../../components/demos')
-const MERMAID_DIR = resolve(__dirname, '../../static/images/mermaid')
 const ASSETS_DIR = resolve(__dirname, '../../assets')
 
 export function generatePages (file, stats) {
   if (!file) {
     rimraf.sync(PAGES_DIR)
     rimraf.sync(DEMOS_DIR)
-    rimraf.sync(MERMAID_DIR)
     rimraf.sync(resolve(__dirname, './deps.json'))
     console.log('Regenerating all files...')
     handleFile(DOCS_DIR)
diff --git a/one/build/page.js b/one/build/page.js
index 24e6944..a616e6e 100644
--- a/one/build/page.js
+++ b/one/build/page.js
@@ -5,7 +5,6 @@ import slug from 'remark-slug'
 import frontmatter from 'remark-frontmatter'
 import highlight from 'remark-highlight.js'
 import shortcodes from 'remark-shortcodes'
-import mermaid from 'one-remark-mermaid'
 import remarkToRehype from 'remark-rehype'
 import raw from 'rehype-raw'
 import html from 'rehype-stringify'
@@ -25,8 +24,6 @@ import { vue } from './language'
 
 const DOCS_DIR = resolve(__dirname, '../docs')
 const PAGES_DIR = resolve(__dirname, '../../pages')
-const STYLES_DIR = resolve(__dirname, '../../assets/styles')
-const MERMAID_DIR = resolve(__dirname, '../../static/images/mermaid')
 const PAGE_TPL = readFileSync(resolve(__dirname, '../templates/page.etpl'))
 
 const renderPage = etpl.compile(PAGE_TPL)
@@ -39,10 +36,6 @@ const md = remark()
   .use(ref)
   .use(frontmatter)
   .use(shortcodes)
-  .use(mermaid, {
-    cssFile: join(`${STYLES_DIR}`, 'mermaid-cli.css'),
-    theme: 'none'
-  })
   .use(demo)
   .use(extractFrontmatter)
   .use(highlight)
@@ -55,7 +48,6 @@ const md = remark()
   .use(html, { allowDangerousHTML: true })
 
 export function render (contents, path, data = {}) {
-  data.destinationDir = MERMAID_DIR
   return md.processSync(vfile({ contents, path, data }))
 }
 
diff --git a/one/build/rehype-preview-img.js b/one/build/rehype-preview-img.js
index df5cd7a..cf5b43b 100644
--- a/one/build/rehype-preview-img.js
+++ b/one/build/rehype-preview-img.js
@@ -1,11 +1,8 @@
-import { resolve, join } from 'path'
 import visit from 'unist-util-visit'
 import h from 'hastscript'
 import { removeClass, addClass, hasClass } from './rehype-util-class'
-import { readFileSync } from './util'
 
 const RE_SPACE = /[\w\r\n]*/
-const MERMAID_DIR = resolve(__dirname, '../../static/images/mermaid')
 
 export default function attacher () {
   return tree => {
@@ -15,21 +12,6 @@ export default function attacher () {
         return
       }
 
-      if (title && title.indexOf('mermaid') !== -1) {
-        let fig = h(
-          'figure.hero.mermaid',
-          {
-            'v-once': true
-          },
-          {
-            type: 'raw',
-            value: readFileSync(join(MERMAID_DIR, src))
-          }
-        )
-        children.splice(index, 1, fig)
-        return
-      }
-
       src = src.replace(/(\.\.)?\/assets\//g, '/images/content/')
 
       if (hasClass(node, 'preview')) {
diff --git a/one/docs/components/form.md b/one/docs/components/form.md
index c69eeca..d27f3e4 100644
--- a/one/docs/components/form.md
+++ b/one/docs/components/form.md
@@ -102,18 +102,7 @@
 
 ### 表单提交流程
 
-```mermaid
-graph TD
-A[Native submit event] --> B[Clone data object]
-B --> C["beforeValidate(data)"]
-C -- not set / resolved --> D["validate()"]
-D --> E{isValid?}
-E -- Y --> F["afterValidate(data)"]
-F -- not set / reslved --> G["$emit('submit', data, event')"]
-C -- rejected --> H["$emit('invalid', result)"]
-D -- N --> H
-F -- rejected --> H
-```
+<img class="preview hero" src="/images/development/form/flow.png">
 
 :::warning
 `beforeValidate` 和 `afterValidate` 以及 `sumbit` 事件操作的 `data` 均为 props `data` 的同一个副本。考虑到校验信息和 UI 中数据的一致性，`validate` 的目标数据是 props `data` 的源数据。因此在 `beforeValidate` 中**不建议**修改 `data` 副本。
@@ -172,27 +161,10 @@ validators: [
 
 #### 交互过程的校验
 
-```mermaid
-graph LR
-A[Interaction events] -->B[Field#validate]
-A --> C[validators.validate]
-B --> D{isValid?}
-C --> D
-D -- Y --> E[Hide validities]
-D -- N --> F[Show errors]
-```
+<img class="preview hero" src="/images/development/form/interaction.png">
 
 #### 提交过程的校验
 
-```mermaid
-graph LR
-A[validate] -->B[Field#validate]
-A --> C[validators.validate]
-B --> D[Merge validities]
-C --> D
-D --> E{isValid?}
-E -- Y --> F["Promise.resolve(true)"]
-E -- N --> G["Promise.resolve(error)"]
-```
+<img class="preview hero" src="/images/development/form/submit.png">
 
 提交时，其中一个过程的校验失败不会导致整个校验终止，校验信息将在两个过程执行完毕后进行整合，并传递到 [`invalid`](#事件) 事件中去。
diff --git a/package-lock.json b/package-lock.json
index 915b256..a4e4dd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3020,15 +3020,6 @@
       "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
       "dev": true
     },
-    "agent-base": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
-      "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
-      "dev": true,
-      "requires": {
-        "es6-promisify": "^5.0.0"
-      }
-    },
     "aggregate-error": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -6045,21 +6036,6 @@
       "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=",
       "dev": true
     },
-    "es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
-      "dev": true
-    },
-    "es6-promisify": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
-      "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
-      "dev": true,
-      "requires": {
-        "es6-promise": "^4.0.3"
-      }
-    },
     "escalade": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
@@ -8160,33 +8136,6 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
-    "https-proxy-agent": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-      "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
-      "dev": true,
-      "requires": {
-        "agent-base": "^4.3.0",
-        "debug": "^3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
     "human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -10575,86 +10524,6 @@
         "wrappy": "1"
       }
     },
-    "one-mermaid.cli": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/one-mermaid.cli/-/one-mermaid.cli-0.6.0.tgz",
-      "integrity": "sha512-GNSaBxZt7YYTK4n09TZA8cRamie9MmwmANi3boba5oH76xeh9k8PzMmnPs12D4r6kacO6y1dWDkjP98QiIueMQ==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.4.1",
-        "commander": "^2.19.0",
-        "puppeteer": "^1.11.0"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true
-        },
-        "debug": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
-          "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "mime": {
-          "version": "2.4.6",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
-          "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==",
-          "dev": true
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        },
-        "puppeteer": {
-          "version": "1.20.0",
-          "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.20.0.tgz",
-          "integrity": "sha512-bt48RDBy2eIwZPrkgbcwHtb51mj2nKvHOPMaSH2IsWiv7lOG9k9zhaRzpDZafrk05ajMc3cu+lSQYYOfH2DkVQ==",
-          "dev": true,
-          "requires": {
-            "debug": "^4.1.0",
-            "extract-zip": "^1.6.6",
-            "https-proxy-agent": "^2.2.1",
-            "mime": "^2.0.3",
-            "progress": "^2.0.1",
-            "proxy-from-env": "^1.0.0",
-            "rimraf": "^2.6.1",
-            "ws": "^6.1.0"
-          }
-        }
-      }
-    },
-    "one-remark-mermaid": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/one-remark-mermaid/-/one-remark-mermaid-0.3.1.tgz",
-      "integrity": "sha512-19hoq4jEsKmnl0sMPxoE86sWPAmDgxHynwkK/WnJTrsI++b7kBVHTUrlqFgkIbTUdzoM1gcNblm/DG5xNFbMtg==",
-      "dev": true,
-      "requires": {
-        "fs-extra": "^4.0.1",
-        "unist-util-visit": "^1.1.3",
-        "which": "^1.3.0"
-      },
-      "dependencies": {
-        "fs-extra": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
-          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        }
-      }
-    },
     "onetime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
diff --git a/package.json b/package.json
index d8a7596..38f70a6 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,6 @@
     "moment": "^2.22.2",
     "nuxt": "^2.14.6",
     "object-deep-search": "0.0.7",
-    "one-mermaid.cli": "^0.6.0",
-    "one-remark-mermaid": "^0.3.1",
     "prettier": "^1.16.4",
     "prettier-eslint": "^8.8.2",
     "puppeteer": "^2.1.1",
diff --git a/static/images/development/form/flow.png b/static/images/development/form/flow.png
new file mode 100644
index 0000000..6c47ca0
Binary files /dev/null and b/static/images/development/form/flow.png differ
diff --git a/static/images/development/form/interaction.png b/static/images/development/form/interaction.png
new file mode 100644
index 0000000..d6d2873
Binary files /dev/null and b/static/images/development/form/interaction.png differ
diff --git a/static/images/development/form/submit.png b/static/images/development/form/submit.png
new file mode 100644
index 0000000..30dbadc
Binary files /dev/null and b/static/images/development/form/submit.png differ