chore(release): 🚀 publish

- @antv/x6-geometry@1.0.14
 - @antv/x6-vector@1.4.2
 - @antv/x6@1.34.5

.codecov.yml

@@ -11,6 +11,11 @@ coverage:
         threshold: 1%
         flags:
           - x6
+      x6-vector:
+        threshold: 1%
+        target: 80% # will fail a Pull Request if coverage is less than 80%
+        flags:
+          - x6-vector
       x6-geometry:
         threshold: 1%
         flags:
@@ -21,6 +26,9 @@ flags:
     paths:
       # filter the folder(s) you wish to measure by that flag
       - packages/x6
+  x6-vector:
+    paths:
+      - packages/x6-vector
   x6-geometry:
     paths:
       - packages/x6-geometry

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+- package-ecosystem: "github-actions"
+  directory: "/"
+  schedule:
+      interval: "weekly"

.github/workflows/auto-close-fixed-issues.yml

@@ -1,5 +1,5 @@
-# This action will automatically close issues fixed in
-# pull requests that doesn't target the default branch.
+# Automatically close issues fixed in pull requests that doesn't target the default branch.
+
 name: 🚫　Auto Close Fixed Issues
 on:
   pull_request_target:

.github/workflows/auto-comment.yml

@@ -1,3 +1,5 @@
+# Comment on issues/PRs on certain events (currently not used at all.)
+
 name: 💬　Auto Comment
 on: [issues, pull_request_target]
 jobs:

.github/workflows/ci.yml

@@ -1,3 +1,5 @@
+# Continuous integration.
+
 name: 👷　CI
 on:
   pull_request_target:
@@ -16,16 +18,16 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - name: 🌱　Get Cache Directory
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: 🚸　Setup Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -49,13 +51,19 @@ jobs:
           github-token: ${{ env.bot_token }}
           path-to-lcov: ./packages/x6/test/coverage/lcov.info
       - name: 💡　Codecov(x6)
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           files: ./packages/x6/test/coverage/lcov.info
           flags: x6
+      - name: 💡　Codecov(x6-vector)
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./packages/x6-vector/test/coverage/lcov.info
+          flags: x6-vector
       - name: 💡　Codecov(x6-geometry)
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           files: ./packages/x6-geometry/test/coverage/lcov.info

.github/workflows/config/labels.yml

@@ -138,6 +138,9 @@
 - name: pkg:x6
   color: eeeeee
   description: Denotes a PR that changes packages/x6
+- name: pkg:x6-react
+  color: eeeeee
+  description: Denotes a PR that changes packages/x6-react
 - name: pkg:x6-react-shape
   color: eeeeee
   description: Denotes a PR that changes packages/x6-react-shape

.github/workflows/create-issue-branch.yml

@@ -1,3 +1,6 @@
+# Create a new branch dedicated to a specific issue
+# (may be superseded by GitHub functionalities)
+
 name: 🚧　Create Issue Branch
 on:
   issue_comment:
@@ -6,7 +9,7 @@ jobs:
   cib:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}

.github/workflows/delete-stale-releases.yml

@@ -1,3 +1,5 @@
+# Delete all but the last x GitHub releases for certain packages.
+
 name: 🚫　Delete Stale Releases
 on:
   repository_dispatch:
@@ -6,7 +8,7 @@ jobs:
   clean:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}
@@ -20,6 +22,7 @@ jobs:
           group: '(?!^)@.*$'
           exclude: |
             @antv/x6@**
+            @antv/x6-react@**
             @antv/x6-vue-shape@**
             @antv/x6-react-shape@**
             @antv/x6-angular-shape@**

.github/workflows/deploy-sites.yml

@@ -1,3 +1,5 @@
+# Build and deploy updated official site to GitHub pages.
+
 name: 🚀　Deploy Sites
 on:
   repository_dispatch:
@@ -10,9 +12,9 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -21,7 +23,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: 🚸　Setup Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -30,7 +32,7 @@ jobs:
 
       ## cache webpack(babel-loader, eslint-loader)
       - name: 💩　Setup Webpack Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             node_modules
@@ -41,7 +43,7 @@ jobs:
 
       ## cache sites
       - name: 💩　Setup Sites Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: sites/x6-sites/static/demos
           key: ${{ runner.os }}-sites-${{ hashFiles('./packages/x6/package.json', './sites/x6-sites-demos/**/src') }}

.github/workflows/gitleaks.yml

@@ -1,3 +1,5 @@
+# https://github.com/gitleaks/gitleaks-action
+
 name: 🥤　GitLeaks
 on:
   pull_request_target:
@@ -10,7 +12,7 @@ jobs:
   gitleaks:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
       with:
         fetch-depth: '1'
     - name: wget
@@ -18,4 +20,4 @@ jobs:
       with:
         args: -O .gitleaks.toml https://raw.githubusercontent.com/ycjcl868/gitleaks/master/.gitleaks.toml
     - name: gitleaks-action
-      uses: zricethezav/gitleaks-action@master
+      uses: zricethezav/gitleaks-action@v1.6.0

.github/workflows/label-commands.yml

@@ -1,3 +1,8 @@
+# Perform certain actions when labels are added to
+# or removed from issues.
+#
+# See .github/workflows/config/label-commands.yml
+
 name: 👾　Label Commands
 on:
   pull_request_target:

.github/workflows/lock.yml

@@ -1,3 +1,6 @@
+# Locks closed issues and pull requests after a period of inactivity.
+# https://github.com/dessant/lock-threads
+
 name: ⛔️　Lock Threads
 on:
   schedule:
@@ -11,7 +14,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: dessant/lock-threads@v2
+      - uses: dessant/lock-threads@v3
         with:
           github-token: ${{ env.bot_token }}
           issue-lock-inactive-days: 365

.github/workflows/needs-more-info.yml

@@ -1,3 +1,6 @@
+# Request more info from newly opened issues/PRs that contain either default title/body or whose body is left blank
+# https://github.com/wow-actions/needs-more-info
+
 name: 🚨　Needs More Info
 on:
   pull_request_target:

.github/workflows/potential-duplicates.yml

@@ -1,3 +1,6 @@
+# Search for potential issue duplicates using Damerau–Levenshtein algorithm
+# https://github.com/wow-actions/potential-duplicates
+
 name: 🆖　Potential Duplicates
 on:
   issues:

.github/workflows/pr-label-branch-name.yml

@@ -1,3 +1,6 @@
+# Automatically apply labels to your PRs based on branch name patterns like feature/* or fix/*
+# https://github.com/TimonVS/pr-labeler-action
+
 name: 🏷️　Label(Branch Name)
 on:
   pull_request_target:

.github/workflows/pr-label-file-paths.yml

@@ -1,3 +1,6 @@
+# Label a PR according to the packages it involves, based on changed files
+# and the rules defined in .github/workflows/config/pr-label-file-paths.yml
+
 name: 🏷️　Label(File Paths)
 on: pull_request_target
 jobs:
@@ -9,7 +12,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: actions/labeler@v2
+      - uses: actions/labeler@v4
         with:
           repo-token: ${{ env.bot_token }}
           configuration-path: .github/workflows/config/pr-label-file-paths.yml

.github/workflows/pr-label-patch-size.yml

@@ -1,10 +1,12 @@
+# Assign labels based on pull request change sizes.
+
 name: 🏷️　Label(Patch Size)
 on: pull_request_target
 jobs:
   label:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}

.github/workflows/pr-label-status-dummy.yml

@@ -1,9 +1,16 @@
+# Automatically label a PR depending on the PR's status (springboard)
+
 name: 🏷️　Label(Status) Dummy
 on:
   pull_request_review:
     types: [submitted, dismissed]
+permissions:
+  contents: read
+
 jobs:
   dummy:
+    permissions:
+      contents: none
     runs-on: ubuntu-latest
     steps:
       - run: echo "this is a dummy workflow that triggers a workflow_run; it's necessary because otherwise the repo secrets will not be in scope for externally forked pull requests"

.github/workflows/pr-label-status.yml

@@ -1,3 +1,5 @@
+# Automatically label a PR depending on the PR's status
+
 name: 🏷️　Label(Status)
 on:
   pull_request_target:
@@ -17,4 +19,4 @@ jobs:
       - uses: wow-actions/pr-triage@v1
         with:
           GITHUB_TOKEN: ${{ env.bot_token }}
-          WORKFLOW-ID: ${{ github.event.workflow_run.id }}
+          WORKFLOW_ID: ${{ github.event.workflow_run.id }}

.github/workflows/pr-label-title-body.yml

@@ -1,5 +1,6 @@
-# Github action for automatically adding label or setting assignee when a new
-# Issue or PR is opened. https://github.com/marketplace/actions/issue-labeler
+# Automatically add labels or setting assignees when a new issue or PR is opened,
+# based on its title and body.
+# https://github.com/marketplace/actions/issue-labeler
 
 name: 🏷️　Label(Title and Body)
 on:
@@ -16,7 +17,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: Naturalclar/issue-action@v2.0.1
+      - uses: Naturalclar/issue-action@v2.0.2
         with:
           title-or-body: title
           github-token: ${{ env.bot_token }}

.github/workflows/preview.yml

@@ -1,3 +1,5 @@
+# https://github.com/afc163/surge-preview
+
 name: 🔂　Surge PR Preview
 on:
   pull_request_target:
@@ -13,14 +15,14 @@ jobs:
       matrix:
         node-version: [16.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: 🌱　Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: 🚸　Setup yarn cacha
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -29,7 +31,7 @@ jobs:
 
       ## cache webpack(babel-loader, eslint-loader)
       - name: 💩　Setup webpack cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             node_modules
@@ -40,7 +42,7 @@ jobs:
 
       ## cache sites
       - name: 💩　Setup sites cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: sites/x6-sites/static/demos
           key: ${{ runner.os }}-sites-${{ hashFiles('./packages/x6/package.json', './sites/x6-sites-demos/**/src') }}
@@ -48,7 +50,7 @@ jobs:
             ${{ runner.os }}-sites-
 
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 

.github/workflows/rebase.yml

@@ -1,3 +1,5 @@
+# Automatically rebase PRs via the /rebase command
+
 name: 🎉　Rebase
 on:
   issue_comment:
@@ -7,7 +9,7 @@ jobs:
     if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - uses: wow-actions/use-app-token@v1

.github/workflows/release.yml

@@ -1,4 +1,8 @@
-# @see: https://dev.to/antongolub/the-chronicles-of-semantic-release-and-monorepos-5cfc
+# Create new GitHub releases using scripts/monorepo-semantic-release
+# and the semantic-release package.
+#
+# See https://www.npmjs.com/package/semantic-release
+# See https://dev.to/antongolub/the-chronicles-of-semantic-release-and-monorepos-5cfc
 
 name: 🚀　Release
 on:
@@ -17,16 +21,16 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - name: 🌱　Get Cache Directory
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: 🚸　Setup Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -60,7 +64,7 @@ jobs:
 
       - name: 🔀　Repository Dispatch
         if: github.ref == 'refs/heads/master'
-        uses: peter-evans/repository-dispatch@v1
+        uses: peter-evans/repository-dispatch@v2
         with:
           token: ${{ env.bot_token }}
           event-type: released

.github/workflows/slash-commands.yml

@@ -1,3 +1,5 @@
+# https://github.com/wow-actions/slash-commands
+
 name: 🔱　Slash Commands
 on:
   issue_comment:

.github/workflows/stale.yml

@@ -1,3 +1,5 @@
+# Warn and then close issues and PRs that have had no activity for a specified amount of time.
+
 name: 👻　Stale
 on:
   schedule:
@@ -11,7 +13,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: actions/stale@v3
+      - uses: actions/stale@v6
         with:
           repo-token: ${{ env.bot_token }}
           stale-issue-message: |

.github/workflows/sync-labels.yml

@@ -1,3 +1,5 @@
+# Update issue labels in repo as defined in /.github/workflows/config/labels.yml
+
 name: 🔄　Sync Labels
 on:
   push:
@@ -9,7 +11,7 @@ jobs:
   sync:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}

.github/workflows/sync-to-gitee.yml

@@ -1,3 +1,5 @@
+# Sync repo to https://gitee.com/
+#
 # https://github.com/marketplace/actions/gitee-pages-action
 # 配置步骤如下
 # 1. 在命令行终端或 Git Bash 使用命令 ssh-keygen -t rsa -C "youremail@example.com" 生成 SSH Key，注意替换为自己的邮箱。生成的 id_rsa 是私钥，id_rsa.pub 是公钥。(⚠️注意此处不要设置密码)

.github/workflows/update-authors.yml

@@ -1,3 +1,5 @@
+# Automatically generate and update AUTHORS.txt.
+
 name: 🎗　Update Authors
 on:
   push:
@@ -9,7 +11,7 @@ jobs:
   authors:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - uses: wow-actions/use-app-token@v1

.github/workflows/update-cache.yaml

@@ -1,4 +1,5 @@
-# Auto update cahe
+# Cache dependencies and build outputs to improve workflow execution time.
+# https://github.com/actions/cache
 
 name: 🌈　Update Cache
 on:
@@ -10,6 +11,9 @@ on:
       - next-major
       - alpha
       - beta
+permissions:
+  contents: read
+
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -18,9 +22,9 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - name: 🌱　Get Cache Directory
@@ -28,7 +32,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: 🚸　Setup Cache
         id: cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

.github/workflows/update-contributors.yml

@@ -1,3 +1,5 @@
+# Update /CONTRIBUTORS.svg to include new contributors' avatars.
+
 name: 🤝　Update Contributors
 on:
   schedule:

.github/workflows/update-license.yml

@@ -1,3 +1,5 @@
+# Renew the copyright notice in LICENSE at the beginning of every year.
+
 name: 🔑　Update License
 on:
   schedule:
@@ -6,7 +8,7 @@ jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
       with:
         fetch-depth: 0
     - uses: wow-actions/use-app-token@v1

.github/workflows/welcome.yml

@@ -1,3 +1,5 @@
+# Comment a welcome message on an issue if it's the reporter's first issue.
+
 name: 👋　Welcome
 on:
   pull_request_target:

.gitignore

@@ -11,5 +11,3 @@ es
 dist
 *.pem
 !mock-cert.pem
-tmp
-test

AUTHORS

@@ -1,4 +1,5 @@
 BARM <284942955@qq.com>
+Candy <563378816@qq.com>
 Chaoqi <HAN>
 Clifford <ajard>
 DaiGang <42136433+daigang666@users.noreply.github.com>
@@ -6,11 +7,19 @@ Dong <48054715+halodong@users.noreply.github.com>
 Draco <Draco.coder@gmail.com>
 Eve-Sama <17764594863@163.com>
 Eve-Sama <948832626@qq.com>
+Gossypol <31892817+gossypol@users.noreply.github.com>
 ImgBotApp <ImgBotHelp@gmail.com>
+Indomi <indomi126@gmail.com>
 James <san>
 Jógvan <lse>
 Ken <ei>
+Limbo <49612796+JUST-Limbo@users.noreply.github.com>
+Lixu <37231473+wflixu@users.noreply.github.com>
+Lloyd <ho>
 Lyn <47809781+lyn-boyu@users.noreply.github.com>
+Mingfei <az8641683@163.com>
+MrMengJ <2646973632@qq.com>
+Naveen <172697+naveensrinivasan@users.noreply.github.com>
 NewByVector <NewByVector@users.noreply.github.com>
 Olive.Wang <olivewind.wang@gmail.com>
 Opportunity <opportunity@live.in>
@@ -18,18 +27,25 @@ Questions <chip@twostewards.com>
 RuiLin <on>
 SSC <273702440@qq.com>
 Sindori <441933726@qq.com>
+Susan <527971893@qq.com>
+Thomas <eugne>
 Tony <>
 Utopia <greatauk11@gmail.com>
 XLZY <1017866168@qq.com>
+Xingjian <han>
 Zhenyu <o>
+arthur657834 <kingkom7834@126.com>
 boyu.zlj <boyu.zlj@antgroup.com>
 breezefaith <nyzhangzc@qq.com>
 bubkoo <bubkoo.wy@gmail.com>
 bubkoo <bubkoo@users.noreply.github.com>
 budlion <dongqi.ldq@alibaba-inc.com>
+cuidong626 <cuidong1234@outlook.com>
 daigang <1210242662@qq.com>
 doublewu <592581554@qq.com>
 iceytea <liyunheasap@yeah.net>
+jiqili <43718732+jiqili@users.noreply.github.com>
+kelin.zrh <34393362+AricZhu@users.noreply.github.com>
 kingshuaishuai <ken.wang@mrs.ai>
 kio <1421104933@qq.com>
 lijing666 <lijing241@yeah.net>
@@ -37,18 +53,24 @@ lopn <lopnxrp@126.com>
 luchunwei <luchunwei@gmail.com>
 luzhuang <364439895@qq.com>
 lvhuiyang <ilvhuiyang@gmail.com>
+myzxlin <myzxlin@163.com>
 newbyvector <vectorse@126.com>
 niexq <1879633916@qq.com>
 niexq <niexq@firstgrid.cn>
 pengxingjian.pxj <pengxingjian.pxj@alibaba-inc.com>
+pfdgithub <pfdgithub@users.noreply.github.com>
 qingchi <qinky94@163.com>
+qu <33251372+Qujh97@users.noreply.github.com>
+sallen450 <qinghua10199@gmail.com>
 semantic-release-bot <semantic-release-bot@martynus.net>
 vector <vectorse@126.com>
 wgf <34190465+evelope@users.noreply.github.com>
+wind <>
 wjqsummer <52412389+wjqsummer@users.noreply.github.com>
 wtzeng1 <wtzeng1@gmail.com>
 x6-bot <x6-bot@users.noreply.github.com>
 xrkffgg <xrkffgg@gmail.com>
+yaojin2070 <48686959+yaojin2070@users.noreply.github.com>
 zdc1111 <39116292+zdc1111@users.noreply.github.com>
 九思⚡⚡⚡ <2228429150@qq.com>
 何腾飞 <avrin.live.cn@outlook.com>
@@ -58,6 +80,7 @@ zdc1111 <39116292+zdc1111@users.noreply.github.com>
 文瑀 <wenyu.jqq@antfin.com>
 杨凌 <89915256@qq.com>
 柏愚 <boyu.zlj@antfin.com>
+粑粑超 <842486229@qq.com>
 金强强 <wenyu.jqq@antfin.com>
 问崖 <bubkoo.wy@gmail.com>
 问崖 <pengxingjian.pxj@antfin.com>

CONTRIBUTING.md

@@ -110,8 +110,8 @@ Look at [these files](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJyg
 
 X6 uses semantic versioning in release process based on [semver](https://semver.org/).
 
-- [Publishing maintenance releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/maintenance-releases.md)
-- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/pre-releases.md)
+- [Publishing maintenance releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/maintenance-releases.md)
+- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/pre-releases.md)
 
 ### Branch Strategy
 

CONTRIBUTING.zh-CN.md

@@ -1,6 +1,6 @@
 # 代码贡献规范
 
-如果你有任何疑问，欢迎提交 [issue](https://github.com/antvis/x6/issues) 或 [PR](https://github.com/antvis/x6/pulls)!
+有任何疑问，欢迎提交 [issue](https://github.com/antvis/x6/issues) 或 [PR](https://github.com/antvis/x6/pulls)!
 
 ## 提交 issue
 
@@ -109,8 +109,8 @@ BREAKING CHANGE:
 
 ## 发布管理
 
-- [发布维护版本](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/maintenance-releases.md)
-- [发布预发版本](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/pre-releases.md)
+- [Publishing maintenance releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/maintenance-releases.md)
+- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/pre-releases.md)
 
 X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布。
 
@@ -121,7 +121,7 @@ X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布
 
 ### 发布策略
 
-在每个大版本的发布中，都会有一个PM，他在发布的不同阶段负有以下职责：
+每个大版本都有一个发布经理管理（PM），他/她要做的事情
 
 #### 准备工作：
 
@@ -135,6 +135,6 @@ X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布
 
 #### 发布时：
 
-- 将老的稳定版本（master）备份到以当前大版本为名字的分支上（例如 `1.x`），并设置 tag 为 {v}.x（ v 为当前版本，例如 `1.x`）。
+- 将老的稳定版本（master）备份到以当前大版本为名字的分支上（例如 `1.x`），并设置 tag 为 {v}.x`（ v 为当前版本，例如 `1.x`）。
 - 发布新的稳定版本到 [npm](http://npmjs.com)，并通知上层框架进行更新。
 - `npm publish` 之前，请先阅读[『我是如何发布一个 npm 包的』](https://fengmk2.com/blog/2016/how-i-publish-a-npm-package)。

README.en-us.md

@@ -2,9 +2,10 @@
 
 <p align="center"><img src="/flow.svg"></p>
 
-<p align="center"><strong>Graph Editing Engine Of AntV</strong></p>
 <p align="center"><strong>JavaScript diagramming library that uses SVG and HTML for rendering</strong></p>
 
+<p align="center"><a href="https://x6.antv.vision/en/docs/tutorial/about">Tutorials</a> · <a href="https://x6.antv.vision/en/examples/gallery">Examples</a> · <a href="https://x6.antv.vision/en/docs/api/graph">API</a></p>
+
 <p align="center">
 <a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/workflow/status/antvis/x6/%F0%9F%91%B7%E3%80%80CI/master?logo=github&style=flat-square"></a>
 <a href="https://app.codecov.io/gh/antvis/X6"><img alt="coverage" src="https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=flat-square&token=15CO54WYUV"></a>
@@ -22,22 +23,15 @@
 
 ## Features
 
-- 🌱　Easy-to-customize: based on well known SVG/HTML/CSS or React/Vue/Angular to custom nodes and edges
-- 🚀　Out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.
-- 🧲　Data-driven: base on MVC architecture, you can focus on data logic and business logic
-- 💯　Highly-event-driven: you can react on any event that happens inside the graph
-
-## Environment Support
-
-- Modern browsers and Internet Explorer 11 (with polyfills)
-- Server-side Rendering
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| --- | --- | --- | --- |
-| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
+- 🌱　easy-to-customize: based on well known SVG/HTML/CSS or React/Vue to custom nodes and edges
+- 🚀　out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.
+- 🧲　data-driven: base on MVC architecture, you can focus on data logic and business logic
+- 💯　highly-event-driven: you can react on any event that happens inside the graph
 
 ## Installation
 
+### NPM/Yarn
+
 ```shell
 # npm
 $ npm install @antv/x6 --save
@@ -46,20 +40,51 @@ $ npm install @antv/x6 --save
 $ yarn add @antv/x6
 ```
 
+### CDNs
+
+For learning purposes, you can use the latest version with one of the CDN:
+
+- https://unpkg.com/@antv/x6/dist/x6.js
+- https://cdn.jsdelivr.net/npm/@antv/x6/dist/x6.js
+- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.3.20/x6.js
+
+```html
+<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
+```
+
+For production, we recommend linking to a specific version number to avoid unexpected breakage from newer versions:
+
+- https://unpkg.com/@antv/x6@1.1.1/dist/x6.js
+- https://cdn.jsdelivr.net/npm/@antv/x6@1.1.1/dist/x6.js
+- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.1.1/x6.js
+
+```html
+<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
+```
+
 ## Usage
 
+**Step 1**: specify a container the render the diagram.
+
 ```html
 <div id="container" style="width: 600px; height: 400px"></div>
 ```
 
-```ts
-import { Graph } from '@antv/x6'
+**Step 2**: render nodes and edges.
 
+```ts
+// import from node_modules
+import { Graph } from '@antv/x6'
+// or use the global variable `X6` exported from CDN links
+// const { Graph } = X6
+
+// Create an instance of Graph.
 const graph = new Graph({
   container: document.getElementById('container'),
   grid: true
 })
 
+// Render source node.
 const source = graph.addNode({
   x: 300,
   y: 40,
@@ -68,6 +93,7 @@ const source = graph.addNode({
   label: 'Hello',
 })
 
+// Render target node.
 const target = graph.addNode({
   x: 420,
   y: 180,
@@ -76,23 +102,92 @@ const target = graph.addNode({
   label: 'World',
 })
 
+// Render edge from source to target.
 graph.addEdge({
   source,
   target,
 })
 ```
 
-## Links
+<img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*o4W3RLZicagAAAAAAAAAAAAAARQnAQ" alt="HelloWorld" />
 
-- [Documents](https://x6.antv.vision/zh/docs/tutorial/about)
-- [Samples](https://x6.antv.vision/zh/examples/gallery)
-- [Blog](https://www.yuque.com/antv/x6/gcinvi)
-- [Versioning Release Note](https://www.yuque.com/antv/x6/bbfu6r)
-- [FAQ](https://www.yuque.com/antv/x6/be9pfx)
-- [CodeSanbox Template](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
+## Documentation
+
+- [About](https://x6.antv.vision/en/docs/tutorial/about)
+- [Getting Started](https://x6.antv.vision/en/docs/tutorial/getting-started)
+- [Basic Usage](https://x6.antv.vision/en/docs/tutorial/basic/graph)
+- [Advanced Practice](https://x6.antv.vision/en/docs/tutorial/intermediate/serialization)
+- [Senior Guidance](https://x6.antv.vision/en/docs/tutorial/advanced/animation)
+- [ChangeLog](https://x6.antv.vision/en/docs/tutorial/log)
+
+## App Demos Build with X6
+
+<center>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#flowchart" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*JSr-RbwCgmcAAAAAAAAAAAAAARQnAQ" alt="Flow"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#dag" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*RPiGRaSus3UAAAAAAAAAAAAAARQnAQ" alt="Dag"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#mindmap" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*GsEGSaBkc84AAAAAAAAAAAAAARQnAQ" alt="MindMap"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#bpmn" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*aPSySa8oz4sAAAAAAAAAAAAAARQnAQ" alt="BPMN"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#class" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*OaCpR7t_mVoAAAAAAAAAAAAAARQnAQ" alt="Class"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#org" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*FWx5SYDzLw4AAAAAAAAAAAAAARQnAQ" alt="ORG"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#er" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*7yVJQoM6-9AAAAAAAAAAAAAAARQnAQ" alt="ER"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#swimlane" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*mUVrSJMkP1UAAAAAAAAAAAAAARQnAQ" alt="SwimLane"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#tree" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*XDnNRqnj4WkAAAAAAAAAAAAAARQnAQ" alt="Tree"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#elk" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Z3ebTKy0w9cAAAAAAAAAAAAAARQnAQ" alt="ELK"/>
+  </a>
+</center>
+
+## Communication
+
+Welcome to join the **X6 Communication Group** (Scan the QR Code to Join us). We also welcome the github [issues](https://github.com/antvis/x6/issues).
+
+<a href="https://qr.dingtalk.com/action/joingroup?code=v1,k1,rOHuvgq5s0EHDktyyQJffDE3ZAmHnbB2e6iwn/w4BKs=&_dt_no_comment=1&origin=11" target="_blank" rel="noopener noreferrer">
+  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*nFa5TaWsSOoAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群4" width="260" />
+</a>
 
 ## Development
 
+This repo is based on [lerna](https://github.com/lerna/lerna) with the following structure:
+
+```
+.
+├── examples
+│   ├── x6-app-dag            # example of dag graph
+│   ├── x6-app-draw           # example of flowchart
+│   ├── x6-app-er             # example of ER chart
+│   └── x6-example-features   # example of basic features
+├── packages
+│   ├── x6                    # X6
+│   ├── x6-react              # wrap X6 with react(reserved)
+│   ├── x6-react-components   # react componets to build graph apps
+│   ├── x6-react-shape        # support render node with react
+│   └── x6-vue-shape          # support render node with vue
+└── sites
+    ├── x6-sites              # sites and documents
+    ├── x6-sites-demos        # demos in documents
+    └── x6-sites-demos-helper # tools to build demos
+```
+
+We need to install some necessary global tools before getting started.
+
 ```shell
 # install yarn and lerna
 $ npm install yarn -g
@@ -100,19 +195,37 @@ $ npm install lerna -g
 
 # install deps and build
 $ yarn bootstrap
+```
 
-# enter the specified project development and debugging
-cd packages/x6
-yarn build:watch
+Then we can `cd` to dirs to development and debugging.
 
-# start example to see the effect
+Such as, we can start `examples/x6-example-features` locally:
+
+```shell
 cd examples/x6-example-features
+
 yarn start
 ```
 
+When need to fix some bugs of X6, we can start with **watch** mode:
+
+```shell
+cd packages/x6
+
+// build esm to "em" dir
+yarn build:watch:esm
+
+// build commonjs to "lib" dir
+yarn build:watch:cjs
+```
+
 ## Contributing
 
-To become a contributor, please follow our [contributing guide](/CONTRIBUTING.md). If you are an active contributor, you can apply to be a outside collaborator.
+Please let us know how can we help. Do check out [issues](https://github.com/antvis/x6/issues) for bug reports or suggestions first.
+
+To become a contributor, please follow our [contributing guide](/CONTRIBUTING.md).
+
+## Contributors
 
 <a href="https://github.com/antvis/x6/graphs/contributors">
   <img src="/CONTRIBUTORS.svg" alt="Contributors" width="740" />

README.md

@@ -1,9 +1,10 @@
 简体中文 | [English](/README.en-us.md)
 
-<p align="center"><img alt="flow" src="/flow.svg"></p>
+<p align="center"><img src="/flow.svg"></p>
 
 <p align="center"><strong>X6 是 AntV 旗下的图编辑引擎</strong></p>
 <p align="center"><strong>提供简单易用的节点定制能力和开箱即用的交互组件，方便我们快速搭建流程图、DAG 图、ER 图等图应用</strong></p>
+<p align="center"><a href="https://x6.antv.vision/zh/docs/tutorial/about">教程</a> • <a href="https://x6.antv.vision/zh/examples/gallery">示例</a> • <a href="https://x6.antv.vision/zh/docs/api/graph">API</a></p>
 
 <p align="center">
 <a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/workflow/status/antvis/x6/%F0%9F%91%B7%E3%80%80CI/master?logo=github&style=flat-square"></a>
@@ -20,24 +21,18 @@
 <a href="https://x6.antv.vision"><img alt="website" src="https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=flat-square&logo=google-chrome&logoColor=0076D6"></a>
 </p>
 
+
 ## 特性
 
-- 🌱　极易定制：支持使用 SVG/HTML/React/Vue/Angular 定制节点样式和交互
+- 🌱　极易定制：支持使用 SVG/HTML/React/Vue 定制节点样式和交互
 - 🚀　开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等
 - 🧲　数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑
 - 💯　事件驱动：完备的事件系统，可以监听图表内发生的任何事件
 
-## 兼容环境
-
-- 现代浏览器和 IE11（需要 polyfills）
-- 支持服务端渲染。
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| --- | --- | --- | --- |
-| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
-
 ## 安装
 
+### 使用 NPM/Yarn
+
 ```shell
 # npm
 $ npm install @antv/x6 --save
@@ -46,20 +41,51 @@ $ npm install @antv/x6 --save
 $ yarn add @antv/x6
 ```
 
-## 示例
+### 使用 CDN
+
+可以使用下面任意一个最新版本的 CDN 地址:
+
+- https://unpkg.com/@antv/x6/dist/x6.js
+- https://cdn.jsdelivr.net/npm/@antv/x6/dist/x6.js
+- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.3.20/x6.js
+
+```html
+<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
+```
+
+在生产环境中，建议使用指定版本号的链接，以避免版本更新带来的意外破坏：
+
+- https://unpkg.com/@antv/x6@1.1.1/dist/x6.js
+- https://cdn.jsdelivr.net/npm/@antv/x6@1.1.1/dist/x6.js
+- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.1.1/x6.js
+
+```html
+<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
+```
+
+## 快速使用
+
+**Step 1**: 指定渲染图的容器。
 
 ```html
 <div id="container" style="width: 600px; height: 400px"></div>
 ```
 
-```ts
-import { Graph } from '@antv/x6'
+**Step 2**: 渲染节点和边。
 
+```ts
+// 从 node_modules 引入
+import { Graph } from '@antv/x6'
+// 从 CDN 引入时，我们暴露了 X6 这个全局变量
+// const { Graph } = X6
+
+// 创建 Graph 的实例
 const graph = new Graph({
   container: document.getElementById('container'),
   grid: true
 })
 
+// 渲染源节点
 const source = graph.addNode({
   x: 300,
   y: 40,
@@ -68,6 +94,7 @@ const source = graph.addNode({
   label: 'Hello',
 })
 
+// 渲染目标节点
 const target = graph.addNode({
   x: 420,
   y: 180,
@@ -76,22 +103,95 @@ const target = graph.addNode({
   label: 'World',
 })
 
+// 渲染边
 graph.addEdge({
   source,
   target,
 })
 ```
 
-## 链接
+渲染结果如下。
 
-- [文档](https://x6.antv.vision/zh/docs/tutorial/about)
-- [示例](https://x6.antv.vision/zh/examples/gallery)
-- [博客](https://www.yuque.com/antv/x6/gcinvi)
-- [更新日志](https://www.yuque.com/antv/x6/bbfu6r)
-- [常见问题](https://www.yuque.com/antv/x6/be9pfx)
-- [CodeSanbox 模板](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
+<img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*o4W3RLZicagAAAAAAAAAAAAAARQnAQ" alt="HelloWorld" />
 
-## 本地开发
+## 使用文档
+
+- [简介](https://x6.antv.vision/zh/docs/tutorial/about)
+- [快速上手](https://x6.antv.vision/zh/docs/tutorial/getting-started)
+- [基础教程](https://x6.antv.vision/zh/docs/tutorial/basic/graph)
+- [进阶实践](https://x6.antv.vision/zh/docs/tutorial/intermediate/serialization)
+- [高级指引](https://x6.antv.vision/zh/docs/tutorial/advanced/animation)
+- [更新日志](https://www.yuque.com/antv/x6/xgb04i)
+
+## 应用案例
+
+<center>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#flowchart" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*JSr-RbwCgmcAAAAAAAAAAAAAARQnAQ" alt="Flow"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#dag" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*RPiGRaSus3UAAAAAAAAAAAAAARQnAQ" alt="Dag"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#mindmap" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*GsEGSaBkc84AAAAAAAAAAAAAARQnAQ" alt="MindMap"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#bpmn" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*aPSySa8oz4sAAAAAAAAAAAAAARQnAQ" alt="BPMN"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#class" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*OaCpR7t_mVoAAAAAAAAAAAAAARQnAQ" alt="Class"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#org" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*FWx5SYDzLw4AAAAAAAAAAAAAARQnAQ" alt="ORG"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#er" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*7yVJQoM6-9AAAAAAAAAAAAAAARQnAQ" alt="ER"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#swimlane" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*mUVrSJMkP1UAAAAAAAAAAAAAARQnAQ" alt="SwimLane"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#tree" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*XDnNRqnj4WkAAAAAAAAAAAAAARQnAQ" alt="Tree"/>
+  </a>
+  <a href="https://x6.antv.vision/zh/examples/showcase/practices#elk" target="_blank" rel="noopener noreferrer">
+    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Z3ebTKy0w9cAAAAAAAAAAAAAARQnAQ" alt="ELK"/>
+  </a>
+</center>
+
+## 如何交流
+
+如果你在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/x6/issues) 看看有没有类似的 bug 或者建议。欢迎提 [issues](https://github.com/antvis/x6/issues/new) 交流，也可以使用[钉钉](https://m.dingtalk.com/)扫描下面二维码加入**X6 交流群**。
+
+需要注意的是，提问题时请配上 [CodeSandbox](https://codesandbox.io/s/pensive-sound-f4nhc) 的复现代码，方便快速定位和解决问题。
+
+<a href="https://qr.dingtalk.com/action/joingroup?code=v1,k1,rOHuvgq5s0EHDktyyQJffDE3ZAmHnbB2e6iwn/w4BKs=&_dt_no_comment=1&origin=11" target="_blank" rel="noopener noreferrer">
+  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*nFa5TaWsSOoAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群4" width="260" />
+</a>
+
+## 如何开发
+
+我们使用了 [lerna](https://github.com/lerna/lerna) 来管理项目，目录结构如下：
+
+```
+.
+├── examples
+│   ├── x6-app-dag            # dag 图示例
+│   ├── x6-app-draw           # 流程图示例
+│   ├── x6-app-er             # ER 图示例
+│   └── x6-example-features   # 特性演示示例
+├── packages
+│   ├── x6                    # X6
+│   ├── x6-react              # X6 的 React 封装（预留）
+│   ├── x6-react-components   # 配套 React 组件库
+│   ├── x6-react-shape        # 支持使用 React 渲染节点
+│   └── x6-vue-shape          # 支持使用 Vue 渲染节点
+└── sites
+    ├── x6-sites              # 官网和文档
+    ├── x6-sites-demos        # 文档中嵌入的 DEMO
+    └── x6-sites-demos-helper # 构建文档 DEMO 的工具
+```
+
+开始之前需要安装必要的全局依赖和初始化：
 
 ```shell
 # 全局安装 yarn 和 lerna 工具
@@ -100,19 +200,35 @@ $ npm install lerna -g
 
 # 安装项目依赖和初始化构建
 $ yarn bootstrap
+```
 
-# 进入到指定项目开发和调试
-cd packages/x6
-yarn build:watch
+然后可以进入到指定项目开发和调试。
 
-# 启动 example 查看效果
+如本地启动 `examples/x6-example-features` 示例：
+
+```shell
 cd examples/x6-example-features
+
 yarn start
 ```
 
-## 参与共建
+修复 X6 的 BUG 时可以开启 watch 模式，配合上面启动的本地 DEMO，实时查看修复效果：
 
-如果希望参与到 X6 的开发中，请遵从我们的[贡献指南](/CONTRIBUTING.zh-CN.md)。如果你贡献度足够活跃，你可以申请成为社区协作者。
+```shell
+cd packages/x6
+
+// esm 模式，动态构建 es 产物
+yarn build:watch:esm
+
+// commonjs 模式，动态构建 lib 产物
+yarn build:watch:cjs
+```
+
+## 如何贡献
+
+如果你在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/x6/issues) 看看有没有类似的 bug 或者建议。
+
+如需提交代码，请遵从我们的[贡献指南](/CONTRIBUTING.zh-CN.md)。我们会收集贡献者的 Github 头像到下面贡献者清单中。
 
 <a href="https://github.com/antvis/x6/graphs/contributors">
   <img src="/CONTRIBUTORS.svg" alt="Contributors" width="740" />

SECURITY.md

@@ -1,21 +0,0 @@
-# Security Policy
-
-## Supported Versions
-
-Use this section to tell people about which versions of your project are
-currently being supported with security updates.
-
-| Version | Supported          |
-| ------- | ------------------ |
-| 5.1.x   | :white_check_mark: |
-| 5.0.x   | :x:                |
-| 4.0.x   | :white_check_mark: |
-| < 4.0   | :x:                |
-
-## Reporting a Vulnerability
-
-Use this section to tell people how to report a vulnerability.
-
-Tell them where to go, how often they can expect to get an update on a
-reported vulnerability, what to expect if the vulnerability is accepted or
-declined, etc.

configs/package-json/CHANGELOG.md

@@ -1,3 +1,11 @@
+## @antv/x6-package-json [1.0.2](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.1...@antv/x6-package-json@1.0.2) (2022-06-07)
+
+## @antv/x6-package-json [1.0.2](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.1...@antv/x6-package-json@1.0.2) (2022-06-06)
+
+## @antv/x6-package-json [1.0.2](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.1...@antv/x6-package-json@1.0.2) (2022-06-05)
+
+## @antv/x6-package-json [1.0.2](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.1...@antv/x6-package-json@1.0.2) (2022-05-31)
+
 ## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-14)
 
 ## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-08)

configs/package-json/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-package-json",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "bin": {
     "package-compare": "./bin/package-compare.js",
     "package-inherit": "./bin/package-inherit.js"
@@ -73,7 +73,7 @@
     "chalk": "^4.1.0",
     "detect-newline": "^3.1.0",
     "parse-package-name": "^0.1.0",
-    "workspace-tools": "^0.12.3",
+    "workspace-tools": "^0.18.4",
     "yargs-parser": "^20.2.7"
   }
 }

examples/x6-app-dag/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

examples/x6-app-dag/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "eslint-config-umi"
+}

examples/x6-app-dag/.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local

examples/x6-app-dag/.prettierignore

@@ -0,0 +1,8 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test

examples/x6-app-dag/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": false,
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

examples/x6-app-dag/.umirc.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'umi'
+
+export default defineConfig({
+  publicPath: './',
+  routes: [
+    { path: '/', component: '@/pages/index' },
+    { path: '/apps/dag', component: '@/pages/index' },
+  ],
+  theme: {
+    '@ant-prefix': 'ant',
+    '@menu-item-active-bg': '#f0f5ff',
+  },
+  extraBabelPlugins: [
+    [
+      'import',
+      {
+        libraryName: '@antv/x6-react-components',
+        libraryDirectory: 'es',
+        transformToDefaultImport: false,
+        style: true,
+      },
+    ],
+  ],
+})

examples/x6-app-dag/README.md

@@ -0,0 +1,15 @@
+# X6 DAG React demo project
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ yarn
+```
+
+Start the dev server,
+
+```bash
+$ yarn start
+```

examples/x6-app-dag/package.json

@@ -0,0 +1,50 @@
+{
+  "private": true,
+  "name": "@antv/x6-app-dag",
+  "version": "1.1.7",
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi generate tmp",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "test": "umi-test",
+    "lint": "umi-lint --eslint src/ -p.no-semi  --prettier --fix",
+    "test:coverage": "umi-test --coverage"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.2.1",
+    "@antv/x6": "^1.32.3",
+    "@antv/x6-react-components": "^1.1.16",
+    "@antv/x6-react-shape": "^1.6.0",
+    "@types/dompurify": "^2.0.4",
+    "ahooks": "^2.7.0",
+    "antd": "^4.4.2",
+    "classnames": "^2.2.6",
+    "dompurify": "^2.1.1",
+    "react": "^16.13.1",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-dom": "^16.13.1",
+    "umi-lint": "^2.0.2"
+  },
+  "devDependencies": {
+    "@ant-design/pro-layout": "^5.0.12",
+    "@umijs/preset-react": "1.x",
+    "@umijs/test": "^3.2.19",
+    "lint-staged": "^10.5.3",
+    "prettier": "^2.2.1",
+    "umi": "^3.2.19",
+    "yorkie": "^2.0.0"
+  }
+}

examples/x6-app-dag/src/common/hooks/useObservableState.ts

@@ -0,0 +1,29 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { BehaviorSubject, Observable } from 'rxjs'
+
+export const useObservableState = <T extends any>(
+  source$: Observable<T> | { (): Observable<T> },
+  initialState?: T,
+): [T, React.Dispatch<React.SetStateAction<T>>] => {
+  const source = useMemo<Observable<T>>(() => {
+    if (typeof source$ === 'function') {
+      return source$()
+    }
+    return source$
+  }, [source$])
+  const [state, setState] = useState<T>(() => {
+    if (source instanceof BehaviorSubject) {
+      return source.getValue()
+    }
+    return initialState
+  })
+  useEffect(() => {
+    const sub = source.subscribe((v) => {
+      setState(v)
+    })
+    return () => {
+      sub.unsubscribe()
+    }
+  }, [source])
+  return [state, setState]
+}

examples/x6-app-dag/src/common/utils.ts

@@ -0,0 +1,50 @@
+export { unescape } from 'lodash-es'
+
+export class Deferred<T> {
+  resolve!: (value?: T) => void
+
+  reject!: (err?: any) => void
+
+  promise: Promise<T>
+
+  constructor() {
+    this.promise = new Promise<T>((resolve, reject) => {
+      this.resolve = resolve
+      this.reject = reject
+    })
+  }
+}
+
+// 解析 JSON 字符串不引起报错
+export const safeJson = (jsonStr = '{}', defaultVal = {}) => {
+  try {
+    return JSON.parse(jsonStr)
+  } catch (error) {
+    console.warn(`${jsonStr} is not valid json`)
+    return defaultVal
+  }
+}
+
+export class CodeName {
+  static parse(codeName = '') {
+    return codeName.replace(/_\d+$/, '').toLocaleLowerCase()
+  }
+
+  static equal(c1: string, c2: string) {
+    return CodeName.parse(c1) === CodeName.parse(c2)
+  }
+
+  static some(list: string[], c2: string) {
+    return list.some((c1) => CodeName.equal(c1, c2))
+  }
+
+  static getFromNode(node: any = {}) {
+    const { codeName = '' } = node
+    return CodeName.parse(codeName)
+  }
+}
+
+export const isPromise = (obj: any) =>
+  !!obj &&
+  (typeof obj === 'object' || typeof obj === 'function') &&
+  typeof obj.then === 'function'

examples/x6-app-dag/src/component/cut.less

@@ -0,0 +1,6 @@
+.no-wrap {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  vertical-align: middle;
+}

examples/x6-app-dag/src/component/cut.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react'
+import styles from './cut.less'
+
+interface Props {
+  left: number
+  right: number
+  max: number
+  children: string
+}
+
+export const Cut: React.FC<Props> = (props) => {
+  const { left, right = 0, max, children } = props
+  const getText = useCallback(() => {
+    const len = children.length
+    const ellipsis = '...'
+    let leftStr = ''
+    let rightStr = ''
+
+    if (len > max) {
+      if (left && len) {
+        leftStr = children.substr(0, left)
+      } else {
+        leftStr = children.substr(0, max)
+      }
+
+      if (right) {
+        rightStr = children.substr(-right, right)
+      }
+
+      return `${leftStr}${ellipsis}${rightStr}`
+    }
+
+    return children
+  }, [left, right, max, children])
+  return <span className={styles['no-wrap']}>{getText()}</span>
+}

examples/x6-app-dag/src/component/item-name.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { unescape } from 'lodash-es'
+import { Cut } from '@/component/cut'
+import { Keyword } from '@/component/keyword'
+
+interface Props {
+  data: any
+}
+
+export const ItemName: React.FC<Props> = (props) => {
+  const { data } = props
+  const { keyword, cutParas = {} } = data
+  const name = unescape(data.name)
+  const { max, side } = cutParas
+  if (keyword) {
+    return <Keyword raw={name} keyword={keyword} />
+  }
+  if (max) {
+    return (
+      <Cut max={max} left={side} right={side}>
+        {name}
+      </Cut>
+    )
+  }
+  return <span>{name}</span>
+}

examples/x6-app-dag/src/component/keyword.less

@@ -0,0 +1,11 @@
+.keywordWrapper {
+  strong {
+    color: #dd4b39;
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

examples/x6-app-dag/src/component/keyword.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import classnames from 'classnames'
+import styles from './keyword.less'
+
+interface Props {
+  raw: string
+  keyword: string
+  className?: string
+}
+
+export const Keyword: React.FC<Props> = (props) => {
+  const { raw, keyword, className } = props
+  if (keyword) {
+    const regex = new RegExp(keyword, 'ig')
+    const arr = raw.split(regex)
+    return (
+      <span
+        className={classnames({
+          [styles.keywordWrapper]: true,
+          [className!]: !!className,
+        })}
+      >
+        {arr.map((section, index) =>
+          index !== arr.length - 1 ? (
+            <span key={section + index}>
+              {section}
+              <strong>{keyword}</strong>
+            </span>
+          ) : (
+            section
+          ),
+        )}
+      </span>
+    )
+  }
+  return null
+}

examples/x6-app-dag/src/component/modal/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Modal, ConfigProvider } from 'antd'
+import { ModalFuncProps, ModalProps } from 'antd/es/modal'
+import { isPromise } from '@/common/utils'
+import { ANT_PREFIX } from '@/constants/global'
+
+type ShowProps = ModalProps & {
+  afterClose?: (...args: any[]) => void
+  children: React.ReactNode
+}
+
+export const showModal = (props: ShowProps) => {
+  const div = document.createElement('div')
+  document.body.appendChild(div)
+
+  let config: ShowProps = {
+    ...props,
+    visible: true,
+    onCancel: close,
+    onOk: (e) => {
+      if (typeof props.onOk === 'function') {
+        const ret = props.onOk(e)
+        if (isPromise(ret as any)) {
+          ;(ret as any).then(() => {
+            close()
+          })
+        }
+      } else {
+        close()
+      }
+    },
+  }
+
+  function destroy(...args: any[]) {
+    const unmountResult = ReactDOM.unmountComponentAtNode(div)
+    if (unmountResult && div.parentNode) {
+      div.parentNode.removeChild(div)
+    }
+    if (typeof props.afterClose === 'function') {
+      props.afterClose(...args)
+    }
+  }
+
+  function update(newConfig: ModalFuncProps) {
+    config = {
+      ...config,
+      ...newConfig,
+    }
+    render(config)
+  }
+
+  function close(...args: any[]) {
+    const nextConfig = {
+      ...config,
+      visible: false,
+      afterClose: destroy.bind(undefined, ...args),
+    }
+    update(nextConfig)
+  }
+
+  function render(usedConfig: ModalProps & { children: React.ReactNode }) {
+    const { children, ...others } = usedConfig
+    setTimeout(() => {
+      ReactDOM.render(
+        <ConfigProvider prefixCls={ANT_PREFIX}>
+          <Modal {...others}>{children}</Modal>
+        </ConfigProvider>,
+        div,
+      )
+    }, 0)
+  }
+
+  render(config)
+
+  return {
+    close,
+    update,
+  }
+}

examples/x6-app-dag/src/component/rx-component/rx-input.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Observable } from 'rxjs'
+import { Input, ConfigProvider } from 'antd'
+import { InputProps } from 'antd/es/input'
+import { useObservableState } from '@/common/hooks/useObservableState'
+import { ANT_PREFIX } from '@/constants/global'
+
+interface RxInputProps extends Omit<InputProps, 'value'> {
+  value: Observable<string>
+}
+
+export const RxInput: React.FC<RxInputProps> = (props) => {
+  const { value, ...otherProps } = props
+  const [realValue] = useObservableState(() => value)
+  return (
+    <ConfigProvider prefixCls={ANT_PREFIX}>
+      <Input value={realValue} {...otherProps} />
+    </ConfigProvider>
+  )
+}

examples/x6-app-dag/src/constants/global.ts

@@ -0,0 +1 @@
+export const ANT_PREFIX = 'ant'

examples/x6-app-dag/src/constants/graph.ts

@@ -0,0 +1,14 @@
+export const GROUP_HORIZONTAL__PADDING = 24 // 分组横向 padding
+export const GROUP_VERTICAL__PADDING = 40 // 分组纵向 padding
+export const NODE_WIDTH = 180
+export const NODE_HEIGHT = 32
+
+// 触发画布重新渲染事件
+export const RERENDER_EVENT = 'RERENDER_EVENT'
+
+/*
+ * 以下是拖拽相关
+ */
+
+export const DRAGGABLE_ALGO_COMPONENT = 'ALGO_COMPONENT'
+export const DRAGGABLE_MODEL = 'MODEL'

examples/x6-app-dag/src/layout/header/experiment-title/index.less

@@ -0,0 +1,42 @@
+.menuWrap {
+  max-height: 316px;
+  overflow: auto;
+  position: relative;
+  top: -10px;
+  left: -1px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
+  :global {
+    .@{ant-prefix}-menu-item {
+      height: 28px;
+      line-height: 28px;
+      padding: 0px 8px;
+      margin: 0 !important;
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 13px;
+      &:hover {
+        color: #1890ff;
+        background-color: @menu-item-active-bg;
+      }
+    }
+  }
+}
+
+.name {
+  padding-right: 2px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.wrap {
+  height: 48px;
+  margin-left: 24px;
+  cursor: pointer;
+}
+
+.divider {
+  color: #ccc;
+}
+
+.dropdown {
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 12px;
+}

examples/x6-app-dag/src/layout/header/experiment-title/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import css from './index.less'
+
+export interface IProps {
+  experimentName?: string
+}
+
+export const ExperimentTitle: React.FC<IProps> = ({ experimentName }) => {
+  return (
+    <div className={css.wrap}>
+      <span className={css.name}> {experimentName} </span>
+    </div>
+  )
+}

examples/x6-app-dag/src/layout/header/index.less

@@ -0,0 +1,38 @@
+.header {
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
+  min-height: 48px;
+  overflow: hidden;
+  line-height: 48px;
+  background: #fff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 0;
+  .headerLeft,
+  .headerRight {
+    display: flex;
+  }
+}
+
+.doc {
+  margin-right: 32px;
+  font-size: 12px;
+  a {
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .text {
+    padding: 0 4px;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  :global {
+    .anticon {
+      position: relative;
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 14px;
+    }
+  }
+}

examples/x6-app-dag/src/layout/header/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Layout } from 'antd'
+import { useObservableState } from '@/common/hooks/useObservableState'
+import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
+import { GithubOutlined } from '@ant-design/icons'
+import { SimpleLogo } from './logo'
+import { ExperimentTitle } from './experiment-title'
+
+import css from './index.less'
+
+const { Header } = Layout
+
+interface IProps {
+  experimentId: string
+}
+
+export const GuideHeader: React.FC<IProps> = (props) => {
+  const expGraph = useExperimentGraph(props.experimentId)
+  const [activeExperiment] = useObservableState(expGraph.experiment$)
+
+  const openGithub = () => {
+    window.open(
+      'https://github.com/antvis/X6/tree/master/examples/x6-app-dag',
+      '_blank',
+    )
+  }
+
+  return (
+    <>
+      <Header className={css.header}>
+        <div className={css.headerLeft}>
+          <SimpleLogo />
+          <ExperimentTitle experimentName={activeExperiment.name} />
+        </div>
+        <div className={css.headerRight}>
+          <div className={css.doc}>
+            <GithubOutlined onClick={openGithub} />
+          </div>
+        </div>
+      </Header>
+    </>
+  )
+}

examples/x6-app-dag/src/layout/header/logo/index.less

@@ -0,0 +1,15 @@
+.root {
+  height: 48px;
+  width: 64px;
+  line-height: 48px;
+  position: relative;
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+  color: #fba831;
+}
+
+.logo {
+  top: 8px;
+  left: 18px;
+  position: absolute;
+  font-size: 28px;
+}

examples/x6-app-dag/src/layout/header/logo/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { ApartmentOutlined } from '@ant-design/icons'
+import css from './index.less'
+
+interface Props {
+  border?: boolean
+}
+
+export const SimpleLogo: React.FC<Props> = ({ border }) => {
+  return (
+    <div className={`${css.root} `}>
+      <ApartmentOutlined className={css.logo} />
+    </div>
+  )
+}

examples/x6-app-dag/src/mock/algo.ts

@@ -0,0 +1,268 @@
+export const algoData = [
+  {
+    id: 'recentlyUsed',
+    name: '最近使用',
+    isDir: true,
+    children: [
+      {
+        id: 10,
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: 'algo_1',
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: '算法组件1',
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          codeName: 'algo_1',
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          name: '算法组件1',
+          id: 10,
+        },
+      },
+      {
+        id: 11,
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: 'algo_2',
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: '算法组件2',
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          codeName: 'algo_2',
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          name: '算法组件2',
+          id: 11,
+        },
+      },
+      {
+        id: 12,
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: 'algo_3',
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: '算法组件3',
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          codeName: 'algo_3',
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          name: '算法组件3',
+          id: 12,
+        },
+      },
+    ],
+  },
+  {
+    name: '数据读写',
+    id: 21,
+    category: 'source',
+    isDir: true,
+    children: [
+      {
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: 'odps_source',
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: '读数据表',
+        id: 100,
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          codeName: 'odps_source',
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          name: '读数据表',
+          id: 100,
+        },
+      },
+    ],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'source',
+    parentId: 'platformAlgo',
+  },
+  {
+    name: '统计分析',
+    id: 22,
+    category: 'analytics',
+    isDir: true,
+    children: [],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'analytics',
+    parentId: 'platformAlgo',
+  },
+  {
+    name: '算法',
+    id: 23,
+    category: 'ai_algo',
+    isDir: true,
+    children: [],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'algorithm',
+    parentId: 'platformAlgo',
+  },
+  {
+    name: '预测',
+    id: 24,
+    category: 'predict',
+    isDir: true,
+    children: [],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'predict',
+    parentId: 'platformAlgo',
+  },
+  {
+    name: '评估',
+    id: 25,
+    category: 'evaluation',
+    isDir: true,
+    children: [],
+    isBranch: true,
+    isExpanded: false,
+    codeName: 'evaluation',
+    parentId: 'platformAlgo',
+  },
+]
+
+export const searchByKeyword = async (keyword: string) => {
+  return Array(10)
+    .fill(null)
+    .map((i, idx) => {
+      return {
+        defSource: 2,
+        docUrl: '',
+        ioType: 0,
+        up: 148,
+        down: 11,
+        iconType: 1,
+        isDir: false,
+        isDisabled: false,
+        author: 'demo author',
+        codeName: `${keyword}${idx}`,
+        catId: 1,
+        lastModifyTime: '2020-08-25 15:43:39',
+        createdTime: '2015-04-16 13:38:11',
+        engineType: 0,
+        isComposite: false,
+        sequence: 0,
+        owner: 'system',
+        description: '组件描述信息',
+        name: `${keyword}__${idx}`,
+        id: idx,
+        parentId: 'recentlyUsed',
+        isBranch: false,
+        social: {
+          defSource: 2,
+          isEnabled: true,
+          docUrl: '#',
+          iconType: 1,
+          isDisabled: false,
+          author: 'demo author',
+          name: `${keyword}-${idx}`,
+          codeName: `${keyword}${idx}`,
+          catId: 1,
+          lastModifyTime: '2020-08-25 15:43:39',
+          createdTime: '2015-04-16 13:38:11',
+          owner: 'system',
+          description: '组件描述信息',
+          id: idx,
+        },
+      }
+    })
+}

examples/x6-app-dag/src/mock/graph.ts

@@ -0,0 +1,720 @@
+import random from 'lodash/random'
+
+interface NodeParams {
+  name: string
+  x: number
+  y: number
+}
+
+export const copyNode = ({ name, x, y }: NodeParams) => {
+  const id = `${Date.now()}`
+  return {
+    id,
+    name,
+    inPorts: [
+      {
+        tableName: 'germany_credit_data',
+        sequence: 1,
+        description: '输入1',
+        id: id + 100000,
+      },
+      {
+        tableName: 'germany_credit_data',
+        sequence: 2,
+        description: '输入2',
+        id: id + 200000,
+      },
+    ],
+    outPorts: [
+      {
+        tableName: 'germany_credit_data',
+        sequence: 1,
+        description: '输出表1',
+        id: id + 300000,
+      },
+      {
+        tableName: 'germany_credit_data',
+        sequence: 2,
+        description: '输出表2',
+        id: id + 400000,
+      },
+    ],
+    positionX: x + 200 + random(20, false),
+    positionY: y + random(10, false),
+    codeName: 'source_11111',
+    catId: 1,
+    nodeDefId: 111111,
+    category: 'source',
+    status: 3,
+    groupId: 0,
+  }
+}
+export const addNode = ({ name, x, y }: NodeParams) => {
+  const id = `${Date.now()}`
+  return {
+    id,
+    name,
+    inPorts: [
+      {
+        tableName: 'germany_credit_data',
+        sequence: 1,
+        description: '输入1',
+        id: id + '_in_1',
+      },
+      {
+        tableName: 'germany_credit_data',
+        sequence: 2,
+        description: '输入2',
+        id: id + '_in_2',
+      },
+    ],
+    outPorts: [
+      {
+        tableName: 'germany_credit_data',
+        sequence: 1,
+        description: '输出表1',
+        id: id + '_out_1',
+      },
+      {
+        tableName: 'germany_credit_data',
+        sequence: 2,
+        description: '输出表2',
+        id: id + '_out_2',
+      },
+    ],
+    positionX: x,
+    positionY: y,
+    codeName: 'source_11111',
+    catId: 1,
+    nodeDefId: 111111,
+    category: 'source',
+    status: 3,
+    groupId: 0,
+  }
+}
+
+export const queryGraph = (id: string) => {
+  return {
+    lang: 'zh_CN',
+    success: true,
+    data: initData,
+    Lang: 'zh_CN',
+  }
+}
+
+export const addNodeGroup = async (groupName: string) => {
+  return {
+    success: true,
+    data: {
+      group: {
+        name: groupName,
+        id: Date.now(),
+      },
+    },
+  }
+}
+
+const initData = {
+  nodes: [
+    {
+      id: '1603716783816',
+      name: '算法组件1',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716783816_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716783816_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716783816_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716783816_out_2',
+        },
+      ],
+      positionX: -200,
+      positionY: -300,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716786205',
+      name: '算法组件2',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716786205_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716786205_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716786205_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716786205_out_2',
+        },
+      ],
+      positionX: -369,
+      positionY: -161,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716788394',
+      name: '算法组件2',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716788394_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716788394_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716788394_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716788394_out_2',
+        },
+      ],
+      positionX: -154,
+      positionY: -161,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716792826',
+      name: '算法组件3',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716792826_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716792826_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716792826_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716792826_out_2',
+        },
+      ],
+      positionX: -520,
+      positionY: -30,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716795011',
+      name: '算法组件2',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716795011_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716795011_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716795011_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716795011_out_2',
+        },
+      ],
+      positionX: 74,
+      positionY: -160,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716814719',
+      name: '算法组件3',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716814719_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716814719_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716814719_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716814719_out_2',
+        },
+      ],
+      positionX: -310,
+      positionY: -30,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716822805',
+      name: '算法组件3',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716822805_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716822805_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716822805_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716822805_out_2',
+        },
+      ],
+      positionX: -50,
+      positionY: -30,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716828657',
+      name: '算法组件3',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716828657_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716828657_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716828657_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716828657_out_2',
+        },
+      ],
+      positionX: 160,
+      positionY: -30,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716834901',
+      name: '算法组件2',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716834901_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716834901_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716834901_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716834901_out_2',
+        },
+      ],
+      positionX: -390,
+      positionY: 90,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716844054',
+      name: '算法组件2',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716844054_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716844054_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716844054_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716844054_out_2',
+        },
+      ],
+      positionX: -170,
+      positionY: 90,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716854368',
+      name: '算法组件2',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716854368_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716854368_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716854368_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716854368_out_2',
+        },
+      ],
+      positionX: 40,
+      positionY: 90,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716858435',
+      name: '算法组件3',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716858435_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716858435_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716858435_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716858435_out_2',
+        },
+      ],
+      positionX: -310,
+      positionY: 230,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+    {
+      id: '1603716868041',
+      name: '算法组件2',
+      inPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输入1',
+          id: '1603716868041_in_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输入2',
+          id: '1603716868041_in_2',
+        },
+      ],
+      outPorts: [
+        {
+          tableName: 'germany_credit_data',
+          sequence: 1,
+          description: '输出表1',
+          id: '1603716868041_out_1',
+        },
+        {
+          tableName: 'germany_credit_data',
+          sequence: 2,
+          description: '输出表2',
+          id: '1603716868041_out_2',
+        },
+      ],
+      positionX: -100,
+      positionY: 230,
+      codeName: 'source_11111',
+      catId: 1,
+      nodeDefId: 111111,
+      category: 'source',
+      status: 3,
+      groupId: 0,
+    },
+  ],
+  links: [
+    {
+      source: '1603716783816',
+      target: '1603716786205',
+      outputPortId: '1603716783816_out_1',
+      inputPortId: '1603716786205_in_1',
+    },
+    {
+      source: '1603716783816',
+      target: '1603716788394',
+      outputPortId: '1603716783816_out_2',
+      inputPortId: '1603716788394_in_1',
+    },
+    {
+      source: '1603716783816',
+      target: '1603716795011',
+      outputPortId: '1603716783816_out_2',
+      inputPortId: '1603716795011_in_1',
+    },
+    {
+      source: '1603716786205',
+      target: '1603716792826',
+      outputPortId: '1603716786205_out_1',
+      inputPortId: '1603716792826_in_1',
+    },
+    {
+      source: '1603716788394',
+      target: '1603716814719',
+      outputPortId: '1603716788394_out_1',
+      inputPortId: '1603716814719_in_1',
+    },
+    {
+      source: '1603716795011',
+      target: '1603716822805',
+      outputPortId: '1603716795011_out_1',
+      inputPortId: '1603716822805_in_1',
+    },
+    {
+      source: '1603716795011',
+      target: '1603716828657',
+      outputPortId: '1603716795011_out_2',
+      inputPortId: '1603716828657_in_2',
+    },
+    {
+      source: '1603716792826',
+      target: '1603716834901',
+      outputPortId: '1603716792826_out_1',
+      inputPortId: '1603716834901_in_1',
+    },
+    {
+      source: '1603716814719',
+      target: '1603716844054',
+      outputPortId: '1603716814719_out_1',
+      inputPortId: '1603716844054_in_1',
+    },
+    {
+      source: '1603716822805',
+      target: '1603716854368',
+      outputPortId: '1603716822805_out_1',
+      inputPortId: '1603716854368_in_1',
+    },
+    {
+      source: '1603716834901',
+      target: '1603716858435',
+      outputPortId: '1603716834901_out_1',
+      inputPortId: '1603716858435_in_1',
+    },
+    {
+      source: '1603716844054',
+      target: '1603716858435',
+      outputPortId: '1603716844054_out_1',
+      inputPortId: '1603716858435_in_2',
+    },
+    {
+      source: '1603716854368',
+      target: '1603716868041',
+      outputPortId: '1603716854368_out_1',
+      inputPortId: '1603716868041_in_1',
+    },
+  ],
+}

examples/x6-app-dag/src/mock/status.ts

@@ -0,0 +1,108 @@
+import get from 'lodash/get'
+import set from 'lodash/set'
+import cloneDeep from 'lodash/cloneDeep'
+
+let state = {
+  idx: 0,
+  running: false,
+  statusRes: {
+    lang: 'zh_CN',
+    success: true,
+    data: {
+      instStatus: {
+        '10571193': 'success',
+        '10571194': 'success',
+        '10571195': 'success',
+        '10571196': 'success',
+        '10571197': 'success',
+      },
+      execInfo: {
+        '10571193': {
+          jobStatus: 'success',
+          defName: '读数据表',
+          name: 'germany_credit_data',
+          id: 10571193,
+        },
+        '10571194': {
+          jobStatus: 'success',
+          defName: '离散值特征分析',
+          name: '离散值特征分析',
+          id: 10571194,
+        },
+        '10571195': {
+          jobStatus: 'success',
+          defName: '分箱',
+          startTime: '2020-10-19 13:28:55',
+          endTime: '2020-10-19 13:30:20',
+          name: '分箱',
+          id: 10571195,
+        },
+        '10571196': {
+          jobStatus: 'success',
+          defName: '评分卡训练',
+          startTime: '2020-10-19 13:28:55',
+          endTime: '2020-10-19 13:32:02',
+          name: '评分卡训练-1',
+          id: 10571196,
+        },
+      },
+      status: 'default',
+    },
+    Lang: 'zh_CN',
+  } as any,
+}
+
+export const runGraph = async (nodes: any[]) => {
+  const newState = getStatus()
+  newState.data.instStatus = {}
+  newState.data.execInfo = {}
+  nodes.forEach((node) => {
+    newState.data.instStatus[node.id] = 'default'
+    newState.data.execInfo[node.id] = {
+      jobStatus: 'default',
+      defName: node.name,
+      startTime: '2020-10-19 13:28:55',
+      endTime: '2020-10-19 13:32:02',
+      name: node.name,
+      id: 10571196,
+    }
+  })
+  state.running = true
+  state.idx = 0
+  state.statusRes = newState
+  return { success: true }
+}
+
+export const stopGraphRun = () => {
+  state.running = false
+  state.idx = 0
+  return { success: true }
+}
+
+const getStatus = () => cloneDeep(state.statusRes)
+
+export const queryGraphStatus = async () => {
+  const newState = getStatus()
+  // console.log('Call Api QueryGraphStatus', state)
+  if (state.running) {
+    const { instStatus, execInfo } = newState.data
+    const idList = Object.keys(instStatus)
+    if (state.idx === idList.length) {
+      state.idx = 0
+      state.running = false
+      idList.forEach((id) => {
+        set(instStatus, id, 'success')
+        set(execInfo, `${id}.jobStatus`, 'success')
+        set(newState, 'data.status', 'success')
+      })
+      return newState
+    }
+    const key = get(idList, state.idx)
+    set(instStatus, key, 'running')
+    set(execInfo, `${key}.jobStatus`, 'running')
+    set(newState, 'data.status', 'running')
+    state.idx += 1
+    return newState
+  }
+  return newState
+}

examples/x6-app-dag/src/models/guide-algo-component.ts

@@ -0,0 +1,123 @@
+/* eslint-disable no-param-reassign */
+import { useCallback, useState } from 'react'
+import { algoData, searchByKeyword } from '../mock/algo'
+
+export namespace Res {
+  export interface Data {
+    defs: NodeDef[]
+    cats: Cat[]
+  }
+
+  export interface NodeDef {
+    up: number
+    down: number
+    defSource: number
+    catName: string
+    isDeprecated: boolean
+    isSubscribed: boolean
+    isEnabled: boolean
+    iconType: number
+    docUrl: string
+    sequence: number
+    author?: string
+    ioType: number
+    lastModifyTime: string
+    createdTime: string
+    catId: number
+    isComposite: boolean
+    codeName: string
+    engineType?: number
+    description?: string
+    name: string
+    id: number
+    type: number
+    owner: string
+    algoSourceType?: number
+  }
+
+  export interface Cat {
+    defSource: number
+    isEnabled: boolean
+    iconType: number
+    codeName: string
+    description: string
+    sequence: number
+    name: string
+    id: number
+    category?: string
+  }
+}
+
+function dfs(
+  path = '',
+  nodes: any[],
+  isTarget: (node: any) => boolean,
+  result: string[] = [],
+) {
+  nodes.forEach((node, idx) => {
+    if (node.children) {
+      const currentIdx = path ? `${path}.${idx}.children` : `${idx}.children`
+      dfs(currentIdx, node.children, isTarget, result)
+    }
+
+    if (isTarget(node)) {
+      const currentIdx = path ? `${path}.${idx}` : idx
+      result.push(currentIdx.toString())
+    }
+  })
+}
+
+export default () => {
+  const [keyword, setKeyword] = useState<string>('') // 搜索关键字
+  const [loading, setLoading] = useState<boolean>(false) // 加载状态
+  const [componentTreeNodes, setComponentTreeNodes] = useState<any[]>([])
+  const [searchList, setSearchList] = useState<any[]>([]) // 搜索结果列表
+
+  // 加载组件
+  const loadComponentNodes = useCallback(() => {
+    setLoading(true)
+    const load = async () => {
+      try {
+        if (algoData) {
+          setComponentTreeNodes(algoData)
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    return load()
+  }, [])
+
+  // 搜索组件
+  const search = useCallback((params: { keyword: string }) => {
+    setKeyword(params.keyword ? params.keyword : '')
+    if (!params.keyword) {
+      return
+    }
+    setLoading(true)
+
+    const load = async () => {
+      try {
+        const nodes = ([] = await searchByKeyword(params.keyword))
+        setSearchList(nodes)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  return {
+    // 状态
+    keyword,
+    loading,
+    componentTreeNodes,
+    searchList,
+
+    // 方法
+    setKeyword,
+    loadComponentNodes,
+    search,
+  }
+}

examples/x6-app-dag/src/pages/common/canvas-handler/index.less

@@ -0,0 +1,36 @@
+@import (reference) '~antd/es/style/themes/default.less';
+
+.handler {
+  position: absolute;
+  top: 61px;
+  right: 14px;
+  z-index: 99;
+  width: 32px;
+  margin: 0;
+  padding: 3px 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 16px;
+  list-style-type: none;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  border-radius: 3px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.01);
+
+  .item {
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      color: #000;
+      background-color: #e0e0e0;
+    }
+  }
+}
+
+.popover {
+  :global {
+    .@{ant-prefix}-popover-inner-content {
+      padding: 3px 8px;
+    }
+  }
+}

examples/x6-app-dag/src/pages/common/canvas-handler/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Popover } from 'antd'
+import {
+  CompressOutlined,
+  OneToOneOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@ant-design/icons'
+import classNames from 'classnames'
+import styles from './index.less'
+
+interface Props {
+  className?: string
+  onZoomIn: () => void
+  onZoomOut: () => void
+  onFitContent: () => void
+  onRealContent: () => void
+}
+
+export const CanvasHandler: React.FC<Props> = (props) => {
+  const { className, onZoomIn, onZoomOut, onFitContent, onRealContent } = props
+
+  return (
+    <ul className={classNames(styles.handler, className)}>
+      <Popover
+        overlayClassName={styles.popover}
+        content="放大"
+        placement="left"
+      >
+        <li onClick={onZoomIn} className={styles.item}>
+          <ZoomInOutlined />
+        </li>
+      </Popover>
+      <Popover
+        overlayClassName={styles.popover}
+        content="缩小"
+        placement="left"
+      >
+        <li onClick={onZoomOut} className={styles.item}>
+          <ZoomOutOutlined />
+        </li>
+      </Popover>
+      <Popover
+        overlayClassName={styles.popover}
+        content="实际尺寸"
+        placement="left"
+      >
+        <li onClick={onRealContent} className={styles.item}>
+          <OneToOneOutlined />
+        </li>
+      </Popover>
+      <Popover
+        overlayClassName={styles.popover}
+        content="适应画布"
+        placement="left"
+      >
+        <li onClick={onFitContent} className={styles.item}>
+          <CompressOutlined />
+        </li>
+      </Popover>
+    </ul>
+  )
+}

examples/x6-app-dag/src/pages/common/graph-common/connector/index.ts

@@ -0,0 +1,18 @@
+import { Graph } from '@antv/x6'
+
+Graph.registerConnector(
+  'pai',
+  (s, t) => {
+    const offset = 4
+    const control = 80
+    const v1 = { x: s.x, y: s.y + offset + control }
+    const v2 = { x: t.x, y: t.y - offset - control }
+
+    return `M ${s.x} ${s.y}
+       L ${s.x} ${s.y + offset}
+       C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${t.x} ${t.y - offset}
+       L ${t.x} ${t.y}
+      `
+  },
+  true,
+)

examples/x6-app-dag/src/pages/common/graph-common/node-popover/index.less

@@ -0,0 +1,39 @@
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  min-width: 220px;
+  .item {
+    font-size: 12px;
+    padding: 0 0 0;
+    line-height: 16px;
+    word-break: break-all;
+    margin: 0;
+    width: 220px;
+    display: flex;
+  }
+
+  .label {
+    flex: 1 0 45px;
+    text-align: right;
+    padding-right: 4px;
+    position: relative;
+    word-break: break-all;
+    color: rgba(0, 0, 0, 0.85);
+    &after {
+      content: ':';
+    }
+  }
+  .text {
+    padding-left: 4px;
+    flex: 3 0 100px;
+    color: rgba(0, 0, 0, 0.45);
+    word-break: break-all;
+  }
+}
+
+.content {
+  :global(.aicontent-popover-inner-content) {
+    padding: 12px 8px 8px 8px;
+  }
+}

examples/x6-app-dag/src/pages/common/graph-common/node-popover/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Popover } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import { isEmpty } from 'lodash-es'
+import css from './index.less'
+
+interface TooltipProps {
+  children: React.ReactElement
+  status: StatusObj
+}
+
+interface StatusObj {
+  name: string
+  defName: string
+  jobStatus: string
+  startTime: string
+  endTime: string
+}
+
+export const NodePopover = ({ children, status }: TooltipProps) => {
+  const componentNode = (
+    <div style={{ width: '100%', height: '100%' }}>{children}</div>
+  )
+  if (isEmpty(status)) {
+    return componentNode
+  }
+  return (
+    <Popover
+      placement="bottomLeft"
+      content={<PopoverContent status={status} />}
+      overlayClassName={css.content}
+    >
+      {componentNode}
+    </Popover>
+  )
+}
+
+const nodeAtts: StatusObj = {
+  name: '节点名称',
+  defName: '算法名称',
+  jobStatus: '运行状态',
+  startTime: '开始时间',
+  endTime: '结束时间',
+}
+
+const PopoverContent = ({ status }: { status: StatusObj }) => (
+  <ul className={css.list}>
+    {!status.name && <LoadingOutlined />}
+    {Object.entries(nodeAtts).map(([key, text]) => {
+      const value = status[key as keyof StatusObj]
+      if (value) {
+        return (
+          <li key={key} className={css.item}>
+            <span className={css.label}>{text}</span>
+            <span className={css.text}>{value}</span>
+          </li>
+        )
+      }
+      return null
+    })}
+  </ul>
+)

examples/x6-app-dag/src/pages/common/graph-common/node-status/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  SyncOutlined,
+} from '@ant-design/icons'
+
+interface Props {
+  className?: string
+  status: 'success' | 'fail' | 'running' | 'ready' | 'upChangeSuccess'
+}
+
+export const NodeStatus: React.FC<Props> = (props) => {
+  const { className, status } = props
+  switch (status) {
+    case 'fail':
+      return (
+        <div className={className}>
+          <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
+        </div>
+      )
+    case 'success':
+    case 'upChangeSuccess': {
+      const color = status === 'success' ? '#2ecc71' : '#1890ff'
+      return (
+        <div className={className}>
+          <CheckCircleOutlined style={{ color }} />
+        </div>
+      )
+    }
+    case 'running':
+      return (
+        <div className={className}>
+          <SyncOutlined spin={true} style={{ color: '#1890ff' }} />
+        </div>
+      )
+    default:
+      return null
+  }
+}

examples/x6-app-dag/src/pages/common/graph-common/shape/edge.less

@@ -0,0 +1,8 @@
+.x6-edge {
+  &-selected,
+  &:hover {
+    path[stroke-width='1'] {
+      stroke-width: 3px;
+    }
+  }
+}

examples/x6-app-dag/src/pages/common/graph-common/shape/edge.ts

@@ -0,0 +1,43 @@
+import { Shape, Edge } from '@antv/x6'
+import './edge.less'
+
+export class BaseEdge extends Shape.Edge {
+  // eslint-disable-next-line class-methods-use-this
+  isGroupEdge() {
+    return false
+  }
+}
+
+export class GuideEdge extends BaseEdge {}
+
+GuideEdge.config({
+  shape: 'GuideEdge',
+  connector: { name: 'pai' },
+  zIndex: 2,
+  attrs: {
+    line: {
+      stroke: '#808080',
+      strokeWidth: 1,
+      targetMarker: {
+        stroke: 'none',
+        fill: 'none',
+      },
+    },
+  },
+})
+
+export class X6DemoGroupEdge extends GuideEdge {
+  // eslint-disable-next-line class-methods-use-this
+  isGroupEdge() {
+    return true
+  }
+}
+
+X6DemoGroupEdge.config({
+  shape: 'X6DemoGroupEdge',
+})
+
+Edge.registry.register({
+  GuideEdge: GuideEdge as any,
+  X6DemoGroupEdge: X6DemoGroupEdge as any,
+})

examples/x6-app-dag/src/pages/common/graph-common/shape/node.ts

@@ -0,0 +1,150 @@
+import { Dom, Node } from '@antv/x6'
+import { ReactShape } from '@antv/x6-react-shape'
+import { NODE_WIDTH, NODE_HEIGHT } from '@/constants/graph'
+
+export class BaseNode extends ReactShape {
+  // eslint-disable-next-line class-methods-use-this
+  isGroup() {
+    return false
+  }
+}
+
+export class X6DemoNode extends BaseNode {
+  getInPorts() {
+    return this.getPortsByGroup('in')
+  }
+
+  getOutPorts() {
+    return this.getPortsByGroup('out')
+  }
+}
+
+Node.registry.register('ais-rect-port', X6DemoNode as any)
+
+X6DemoNode.config({
+  width: NODE_WIDTH,
+  height: NODE_HEIGHT,
+  shape: 'ais-rect-port',
+  ports: {
+    groups: {
+      in: {
+        position: { name: 'top' },
+        zIndex: 2,
+      },
+      out: {
+        position: { name: 'bottom' },
+        zIndex: 2,
+      },
+    },
+  },
+  attrs: {
+    body: {
+      magnet: false,
+      fill: 'none',
+      stroke: 'none',
+      refWidth: '100%',
+      refHeight: '100%',
+      zIndex: 1,
+    },
+  },
+  portMarkup: [
+    {
+      tagName: 'foreignObject',
+      selector: 'fo',
+      attrs: {
+        width: 6,
+        height: 6,
+        x: -3,
+        y: -3,
+        zIndex: 10,
+        // magnet决定是否可交互
+        magnet: 'true',
+      },
+      children: [
+        {
+          ns: Dom.ns.xhtml,
+          tagName: 'body',
+          selector: 'foBody',
+          attrs: {
+            xmlns: Dom.ns.xhtml,
+          },
+          style: {
+            width: '100%',
+            height: '100%',
+          },
+          children: [
+            {
+              tagName: 'span',
+              selector: 'content',
+              style: {
+                width: '100%',
+                height: '100%',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+})
+
+export class X6DemoGroupNode extends BaseNode {
+  // eslint-disable-next-line class-methods-use-this
+  isGroup() {
+    return true
+  }
+}
+
+X6DemoGroupNode.config({
+  ports: {
+    groups: {
+      in: {
+        position: { name: 'top' },
+        zIndex: 2,
+      },
+      out: {
+        position: { name: 'bottom' },
+        zIndex: 2,
+      },
+    },
+  },
+  portMarkup: [
+    {
+      tagName: 'foreignObject',
+      selector: 'fo',
+      attrs: {
+        width: 6,
+        height: 6,
+        x: -3,
+        y: -3,
+        zIndex: 10,
+        // magnet决定是否可交互
+        magnet: 'true',
+      },
+      children: [
+        {
+          ns: Dom.ns.xhtml,
+          tagName: 'body',
+          selector: 'foBody',
+          attrs: {
+            xmlns: Dom.ns.xhtml,
+          },
+          style: {
+            width: '100%',
+            height: '100%',
+          },
+          children: [
+            {
+              tagName: 'span',
+              selector: 'content',
+              style: {
+                width: '100%',
+                height: '100%',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+})

examples/x6-app-dag/src/pages/common/hooks/useSafeSetHtml.ts

@@ -0,0 +1,14 @@
+import { useEffect, MutableRefObject } from 'react'
+import DOMPurify from 'dompurify'
+
+export const useSafeSetHTML = (
+  ref: MutableRefObject<Element | null>,
+  htmlStr: string = '',
+) => {
+  useEffect(() => {
+    if (ref?.current instanceof Element && typeof htmlStr === 'string') {
+      // eslint-disable-next-line no-param-reassign
+      ref.current.innerHTML = DOMPurify.sanitize(htmlStr)
+    }
+  }, [htmlStr])
+}

examples/x6-app-dag/src/pages/common/style/x6-overwrite.less

@@ -0,0 +1,82 @@
+.x6-toolbar-overwrite {
+  :global {
+    .x6-toolbar {
+      height: 36px !important;
+      overflow: visible;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+
+      .x6-toolbar-content {
+        overflow: visible;
+
+        .x6-toolbar-group::before {
+          margin: 0 !important;
+        }
+
+        .x6-toolbar-item {
+          margin: 6px 0 !important;
+          padding: 0 12px !important;
+
+          .anticon {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+:global {
+  .x6-edge {
+    stroke-width: 1px;
+    &.success {
+      path:nth-child(2) {
+        stroke: #888 !important;
+      }
+      path:nth-child(3) {
+        fill: #888 !important;
+        stroke: #888 !important;
+      }
+    }
+    &.error {
+      stroke-width: 2px;
+      path:nth-child(2) {
+        stroke: rgba(245, 34, 45, 0.45) !important;
+        stroke-width: 2px;
+      }
+    }
+    &.edgeProcessing {
+      path:nth-child(2) {
+        stroke: rgba(57, 202, 116, 0.8);
+        stroke-width: 2px;
+        stroke-dasharray: 8px, 2px;
+        &:local {
+          animation: processing-line 30s infinite linear;
+        }
+      }
+    }
+    @keyframes processing-line {
+      to {
+        stroke-dashoffset: -1000;
+      }
+    }
+  }
+  .x6-split-box-horizontal > .x6-split-box-resizer,
+  .x6-split-box-vertical > .x6-split-box-resizer {
+    background: #e9e9e9;
+  }
+
+  .@{ant-prefix}-spin-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .x6-widget-selection-inner {
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  .x6-widget-selection-box {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}

examples/x6-app-dag/src/pages/common/utils/experiment.ts

@@ -0,0 +1,171 @@
+import { maxBy, minBy } from 'lodash-es'
+import { NExperimentGraph } from '@/pages/rx-models/typing'
+
+interface BasicPoint {
+  x: number
+  y: number
+}
+
+/**
+ * 找出一组坐标的边缘坐标（最小和最大的边缘坐标轴）和中点
+ * @param points
+ */
+export function calcPointsInfo(points: BasicPoint[]) {
+  if (!Array.isArray(points) || !points.length) {
+    throw new Error('计算坐标边缘必须传入一组坐标')
+  }
+  const minX = minBy(points, (point: BasicPoint) => point.x)!.x
+  const minY = minBy(points, (point: BasicPoint) => point.y)!.y
+  const maxX = maxBy(points, (point: BasicPoint) => point.x)!.x
+  const maxY = maxBy(points, (point: BasicPoint) => point.y)!.y
+  const middleX = (minX + maxX) / 2
+  const middleY = (minY + maxY) / 2
+
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY,
+    middleX,
+    middleY,
+  }
+}
+
+/**
+ * 将一组坐标转换成相对某个点的相对租表
+ * @param points
+ * @param origin
+ */
+export function transformPointsToOrigin(
+  points: BasicPoint[],
+  origin: BasicPoint,
+): BasicPoint[] {
+  return points.map((point) => ({
+    ...point,
+    x: point.x - origin.x,
+    y: point.y - origin.y,
+  }))
+}
+
+/**
+ * 将一组相对某点的坐标还原回原始坐标
+ * @param points
+ * @param origin
+ */
+export function revertPointsToOrigin(
+  points: BasicPoint[],
+  origin: BasicPoint,
+): BasicPoint[] {
+  return points.map((point) => ({
+    ...point,
+    x: point.x + origin.x,
+    y: point.y + origin.y,
+  }))
+}
+
+export function formatNodeToGraphNodeConf(originNode: {
+  id: number
+  nodeInstanceId?: number
+  positionX: number
+  positionY: number
+}): any {
+  const { id, nodeInstanceId, positionX, positionY } = originNode
+  return {
+    ...originNode,
+    x: positionX || 0,
+    y: positionY || 0,
+    id: (nodeInstanceId || id)!.toString(),
+    width: 180,
+    height: 32,
+    data: originNode,
+    ports: {
+      groups: {
+        inputPorts: {
+          position: {
+            name: 'top',
+            args: {
+              dr: 0,
+              dx: 0,
+              dy: 0,
+            },
+          },
+          attrs: {
+            circle: {
+              fill: '#ffffff',
+              stroke: '#31d0c6',
+              strokeWidth: 1,
+              r: 4,
+              style: 'cursor: default;',
+            },
+            text: {
+              fill: '#6a6c8a',
+            },
+          },
+        },
+        outputPorts: {
+          position: {
+            name: 'bottom',
+            args: {
+              dr: 0,
+              dx: 0,
+              dy: 0,
+            },
+          },
+          attrs: {
+            circle: {
+              fill: '#ffffff',
+              stroke: '#31d0c6',
+              strokeWidth: 1,
+              r: 4,
+              style: 'cursor: crosshair;',
+            },
+            text: {
+              fill: '#6a6c8a',
+            },
+          },
+        },
+      },
+    },
+  }
+}
+/**
+ * 将实验图节点信息转换为节点和边的配置
+ * @param graph
+ */
+export function formatExperimentGraph(graph: any = {}) {
+  const { nodes = [], links = [], groups = [] } = graph
+  const formattedNodes = nodes.map((node: any) =>
+    formatNodeToGraphNodeConf(node),
+  )
+
+  const formattedEdges = links.map((link: any) => {
+    const { source, target } = link
+    return {
+      ...link,
+      source: source.toString(),
+      target: target.toString(),
+      label: '',
+    }
+  })
+
+  const groupNodeMap = groups.reduce(
+    (mapResult: any, currentGroup: NExperimentGraph.Group) => {
+      const { id } = currentGroup
+      return {
+        ...mapResult,
+        [id]:
+          formattedNodes.filter(
+            (node: any) => node.groupId.toString() === id.toString(),
+          ) || [],
+      }
+    },
+    {},
+  )
+
+  return {
+    nodes: formattedNodes,
+    edges: formattedEdges,
+    groups,
+    groupNodeMap,
+  }
+}

examples/x6-app-dag/src/pages/common/utils/graph.ts

@@ -0,0 +1,17 @@
+import { Graph } from '@antv/x6'
+
+// 将画布上的点转换成相对于 offset parent 的点
+export function graphPointToOffsetPoint(
+  graph: Graph,
+  graphPoint: { x: number; y: number },
+  containerElem: HTMLElement,
+) {
+  if (graph) {
+    const point = graph!.localToPage({ x: graphPoint.x, y: graphPoint.y })
+    const clientRect = containerElem?.getBoundingClientRect()
+    const y = point.y - (clientRect?.y || 0) // ! offset parent 不能是画布容器，否则会影响内部布局，所以 offset parent 在外部，算上上方 toolbar 的高度
+    const x = point.x - (clientRect?.x || 0)
+    return { x, y }
+  }
+  return { x: 0, y: 0 }
+}

examples/x6-app-dag/src/pages/component-config-panel/form/experiment-config.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Form, Input, Radio } from 'antd'
+import { useObservableState } from '@/common/hooks/useObservableState'
+import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
+
+export interface Props {
+  name: string
+  experimentId: string
+}
+
+export const ExperimentForm: React.FC<Props> = ({ experimentId, name }) => {
+  const [form] = Form.useForm()
+
+  const expGraph = useExperimentGraph(experimentId)
+  const [activeExperiment] = useObservableState(expGraph.experiment$)
+
+  const onValuesChange = ({ experimentName }: { experimentName: string }) => {
+    expGraph.experiment$.next({ ...activeExperiment, name: experimentName })
+  }
+
+  React.useEffect(() => {
+    form.setFieldsValue({
+      experimentName: activeExperiment ? activeExperiment.name : '',
+    })
+  }, [activeExperiment])
+
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      initialValues={{
+        experimentName: activeExperiment ? activeExperiment.name : '',
+      }}
+      onValuesChange={onValuesChange}
+      requiredMark={false}
+    >
+      <Form.Item name="experimentName" label="实验名称">
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+      <Form.Item label={name}>
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+      <Form.Item label="Field C">
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+      <Form.Item label="Field D">
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+      <Form.Item label="RadioDemo">
+        <Radio.Group>
+          <Radio.Button value="optional">Optional</Radio.Button>
+          <Radio.Button value={true}>Required</Radio.Button>
+          <Radio.Button value={false}>Hidden</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+    </Form>
+  )
+}

examples/x6-app-dag/src/pages/component-config-panel/form/node-config.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Form, Input } from 'antd'
+import { useObservableState } from '@/common/hooks/useObservableState'
+import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
+import 'antd/lib/style/index.css'
+
+export interface Props {
+  name: string
+  experimentId: string
+  nodeId: string
+}
+
+export const NodeFormDemo: React.FC<Props> = ({
+  name,
+  nodeId,
+  experimentId,
+}) => {
+  const [form] = Form.useForm()
+
+  const expGraph = useExperimentGraph(experimentId)
+  const [node] = useObservableState(() => expGraph.activeNodeInstance$)
+
+  const onValuesChange = async ({ name }: { name: string }) => {
+    if (node.name !== name) {
+      await expGraph.renameNode(nodeId, name)
+    }
+  }
+
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      initialValues={{ name: node ? node.name : '' }}
+      onValuesChange={onValuesChange}
+      requiredMark={false}
+    >
+      <Form.Item label="节点名称" name="name">
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+      <Form.Item label={name}>
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+      <Form.Item label="Field C">
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+      <Form.Item label="Field D">
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+    </Form>
+  )
+}

examples/x6-app-dag/src/pages/component-config-panel/index.less

@@ -0,0 +1,87 @@
+@border-color: #e9e9e9;
+
+.setting {
+  height: calc(~'100% - 41px');
+  :global {
+    .ant-row.ant-form-item {
+      margin-bottom: 16px;
+    }
+    .ant-tabs-nav-list {
+      width: 100%;
+    }
+    .ant-tabs-card .ant-tabs-content {
+      margin-top: -16px;
+    }
+    .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
+      background: #fff;
+      padding: 16px;
+    }
+    .ant-tabs-card > .ant-tabs-nav::before {
+      display: none;
+    }
+    .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
+    .ant-tabs-tab {
+      flex: 1 0 50px;
+      padding: 7px 16px;
+      display: flex;
+      justify-content: center;
+    }
+    .ant-tabs-tab.ant-tabs-tab-active {
+      margin: 0 !important;
+    }
+    .ant-tabs-card .ant-tabs-tab,
+    [data-theme='compact'] .ant-tabs-card .ant-tabs-tab {
+      border-color: transparent;
+      background: transparent;
+    }
+    .ant-tabs-card .ant-tabs-tab-active,
+    [data-theme='compact'] .ant-tabs-card .ant-tabs-tab-active {
+      border-color: #fff;
+      background: #fff;
+    }
+    #components-tabs-demo-card-top .code-box-demo {
+      background: #f5f5f5;
+      overflow: hidden;
+      padding: 24px;
+    }
+    [data-theme='compact'] .ant-tabs-card .ant-tabs-content {
+      margin-top: -8px;
+    }
+    [data-theme='dark'] .ant-tabs-card .ant-tabs-tab {
+      border-color: transparent;
+      background: transparent;
+    }
+    [data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
+      background: #000;
+    }
+    [data-theme='dark'] .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
+      background: #141414;
+    }
+    [data-theme='dark'] .ant-tabs-card .ant-tabs-tab-active {
+      border-color: #141414;
+      background: #141414;
+    }
+    .ant-tabs-content {
+      height: calc(~'100vh - 125px');
+    }
+  }
+
+  .form {
+    height: calc(100vh - 100px);
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: #fff;
+  }
+}
+
+.footer {
+  position: relative;
+  flex-grow: 0;
+  height: 41px;
+  min-height: 41px;
+  padding: 8px;
+  background-color: #fff;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.08);
+}

examples/x6-app-dag/src/pages/component-config-panel/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Tabs } from 'antd'
+import classNames from 'classnames'
+import { useObservableState } from '@/common/hooks/useObservableState'
+import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
+import { ExperimentForm } from './form/experiment-config'
+import { NodeFormDemo } from './form/node-config'
+import css from './index.less'
+
+interface Props {
+  experimentId: string
+  className?: string
+}
+
+export const ComponentConfigPanel: React.FC<Props> = (props) => {
+  const { experimentId, className } = props
+  const expGraph = useExperimentGraph(experimentId)
+  const [activeNodeInstance] = useObservableState(
+    () => expGraph.activeNodeInstance$,
+  )
+
+  const nodeId = activeNodeInstance && activeNodeInstance.id
+
+  return (
+    <div className={classNames(className, css.confPanel)}>
+      <div className={css.setting}>
+        <Tabs
+          defaultActiveKey="setting"
+          type="card"
+          size="middle"
+          tabPosition="top"
+          destroyInactiveTabPane={true}
+        >
+          <Tabs.TabPane tab="参数设置" key="setting">
+            <div className={css.form}>
+              {nodeId && (
+                <NodeFormDemo
+                  name="节点参数"
+                  nodeId={nodeId}
+                  experimentId={experimentId}
+                />
+              )}
+              {!nodeId && (
+                <ExperimentForm name="实验设置" experimentId={experimentId} />
+              )}
+            </div>
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="全局参数" key="params" disabled={true}>
+            <div className={css.form} />
+          </Tabs.TabPane>
+        </Tabs>
+      </div>
+      <div className={css.footer} />
+    </div>
+  )
+}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/index.less

@@ -0,0 +1,66 @@
+@import (reference) '~antd/es/style/themes/default.less';
+
+.list {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+
+  .tree {
+    height: 100%;
+    background-image: linear-gradient(#fff 50%, #f7f9fb 50%);
+    background-size: 100% 60px;
+
+    .treeFolder:global(.@{ant-prefix}-tree-treenode) {
+      align-items: center;
+      height: 30px;
+      padding: 0;
+      font-size: 12px;
+      line-height: 30px;
+
+      &::before {
+        height: 30px;
+      }
+
+      :global {
+        .@{ant-prefix}-tree-iconEle.@{ant-prefix}-tree-icon__customize {
+          width: auto;
+          margin-right: 8px;
+          color: rgba(0, 0, 0, 0.45);
+        }
+
+        .@{ant-prefix}-tree-node-content-wrapper {
+          display: flex;
+          align-items: center;
+          padding-left: 0;
+
+          .@{ant-prefix}-tree-title {
+            flex-grow: 1;
+          }
+        }
+      }
+    }
+
+    .treeNode:global(.@{ant-prefix}-tree-treenode) {
+      height: 30px;
+      line-height: 30px;
+
+      &::before {
+        height: 30px;
+      }
+
+      :global {
+        .@{ant-prefix}-tree-node-content-wrapper {
+          padding: 0;
+        }
+
+        .@{ant-prefix}-tree-iconEle.@{ant-prefix}-tree-icon__customize {
+          display: none;
+        }
+        .@{ant-prefix}-tree-switcher {
+          display: none;
+        }
+      }
+    }
+  }
+}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/index.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback } from 'react'
+import { useModel } from 'umi'
+import { Tree } from 'antd'
+import { FolderFilled, FolderOpenFilled } from '@ant-design/icons'
+import { NodeTitle } from './node-title'
+import styles from './index.less'
+
+const { DirectoryTree, TreeNode } = Tree
+
+const FolderIcon = ({ expanded }: { expanded: boolean }) => {
+  return expanded ? <FolderOpenFilled /> : <FolderFilled />
+}
+
+export const CategoryTree = () => {
+  const { componentTreeNodes } = useModel('guide-algo-component')
+
+  const renderTree = useCallback(
+    (treeList: any[] = [], searchKey: string = '') => {
+      return treeList.map((item) => {
+        const { isDir, id, children } = item
+        const key = id.toString()
+        const title = <NodeTitle node={item} searchKey={searchKey} />
+
+        if (isDir) {
+          return (
+            <TreeNode
+              icon={FolderIcon}
+              key={key}
+              title={title}
+              className={styles.treeFolder}
+            >
+              {renderTree(children, searchKey)}
+            </TreeNode>
+          )
+        }
+
+        return (
+          <TreeNode
+            isLeaf={true}
+            key={key}
+            icon={<span />}
+            title={title}
+            className={styles.treeNode}
+          />
+        )
+      })
+    },
+    [],
+  )
+
+  const treeList = componentTreeNodes.filter((node) => node.status !== 4)
+
+  return (
+    <div className={styles.list}>
+      <DirectoryTree
+        showIcon={true}
+        selectable={false}
+        autoExpandParent={true}
+        className={styles.tree}
+        defaultExpandedKeys={['recentlyUsed']}
+      >
+        {renderTree(treeList)}
+      </DirectoryTree>
+    </div>
+  )
+}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/node-title.less

@@ -0,0 +1,140 @@
+@import (reference) '~antd/es/style/themes/default.less';
+
+.nodeTitleWrapper {
+  &:hover {
+    .node {
+      width: 180px;
+      margin-left: 20px;
+      padding-left: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      background-color: #fff;
+      border-radius: 4px;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+
+      .nodeIcon {
+        display: flex;
+        justify-content: center;
+        width: 32px;
+        min-width: 32px;
+        margin-right: 0;
+        color: #1890ff;
+        background-color: rgba(229, 238, 255, 0.85);
+        cursor: move;
+      }
+
+      .label {
+        padding-left: 8px;
+        overflow: hidden;
+        background-color: #fff;
+        cursor: move;
+      }
+    }
+  }
+
+  .node {
+    display: flex;
+    height: 30px;
+    padding-left: 20px;
+    font-size: 12px;
+    line-height: 30px;
+
+    .nodeIcon {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 4px;
+      color: #bfbfbf;
+    }
+
+    .label {
+      display: inline-block;
+      width: 200px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.keyword {
+  color: #f50;
+}
+
+.folder {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 8px;
+
+  .label {
+    display: inline-block;
+    width: 184px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .team {
+    float: right;
+  }
+}
+
+:global {
+  .@{ant-prefix}-tree-title {
+    :local {
+      .doc {
+        position: absolute;
+        top: 0;
+        right: 5px;
+        color: transparent; // 防止拖拽时文档两个字被带进去
+        font-size: 10px;
+        line-height: 30px;
+      }
+    }
+  }
+}
+
+.popover {
+  width: 360px;
+  overflow: hidden;
+  .monitor {
+    margin: 8px 0;
+    b {
+      display: block;
+      line-height: 24px;
+    }
+  }
+  .doclink {
+    padding: 8px 0 0;
+  }
+  .description {
+    max-height: 600px;
+    padding: 8px 4px;
+    overflow: auto;
+    word-break: break-all;
+    background: #fbfbfb;
+    border-radius: 4px;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    a,
+    img,
+    p,
+    pre {
+      max-width: 100%;
+      margin: 0;
+      font-size: 12px !important;
+      line-height: 1.5em;
+      word-break: break-all !important;
+    }
+  }
+}
+
+.tag {
+  margin: 4px 0;
+  .label {
+    padding-right: 4px;
+  }
+}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/node-title.tsx

@@ -0,0 +1,141 @@
+import React, { useCallback, useState, useRef } from 'react'
+import { toLower, unescape } from 'lodash-es'
+import { Popover, Tag } from 'antd'
+import { DragSource, ConnectDragPreview, ConnectDragSource } from 'react-dnd'
+import { DatabaseFilled, ReadOutlined } from '@ant-design/icons'
+import marked from 'marked'
+import { useSafeSetHTML } from '@/pages/common/hooks/useSafeSetHtml'
+import { DRAGGABLE_ALGO_COMPONENT } from '@/constants/graph'
+import styles from './node-title.less'
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+})
+
+const Document = (props: { node: any }) => {
+  const { node } = props
+  const descriptionNodeRef = useRef<HTMLDivElement>(null)
+  const { description, id, tag = '' } = node
+
+  const htmlStr = marked(
+    unescape(description || '暂无文档').replace(/\\n/gi, ' \n '),
+  )
+  useSafeSetHTML(descriptionNodeRef, htmlStr)
+
+  return (
+    <div className={styles.popover}>
+      {tag ? (
+        <div className={styles.tag}>
+          <span className={styles.label}> 标签: </span>
+          {tag.split(',').map((str: string) => (
+            <Tag key={str}>{str}</Tag>
+          ))}
+        </div>
+      ) : null}
+      <div className={styles.description}>
+        <div ref={descriptionNodeRef} />
+        <div className={styles.doclink}>
+          <a href={`#/${id}`} target="_blank" rel="noopener noreferrer">
+            查看更多
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface Props {
+  node: any
+  searchKey: string
+  isDragging: boolean
+  connectDragSource: ConnectDragSource
+  connectDragPreview: ConnectDragPreview
+}
+
+const InnerNodeTitle = (props: Props) => {
+  const {
+    node = {},
+    searchKey = '',
+    connectDragPreview,
+    connectDragSource,
+  } = props
+  const { name = '', isDir } = node
+  const [visible, setVisible] = useState<boolean>(false)
+  const onMouseIn = useCallback(() => {
+    setVisible(true)
+  }, [])
+  const onMouseOut = useCallback(() => {
+    setVisible(false)
+  }, [])
+
+  // 文件夹
+  if (isDir) {
+    return <div className={styles.folder}>{name}</div>
+  }
+
+  const keywordIdx = searchKey ? toLower(name).indexOf(toLower(searchKey)) : -1
+
+  // 搜索高亮
+  if (keywordIdx > -1) {
+    const beforeStr = name.substr(0, keywordIdx)
+    const afterStr = name.substr(keywordIdx + searchKey.length)
+
+    return connectDragPreview(
+      connectDragSource(
+        <span className={styles.node}>
+          <DatabaseFilled className={styles.nodeIcon} />
+          <span className={styles.label}>
+            {beforeStr}
+            <span className={styles.keyword}>{searchKey}</span>
+            {afterStr}
+          </span>
+        </span>,
+      ),
+    )
+  }
+
+  return (
+    <div
+      className={styles.nodeTitleWrapper}
+      onMouseEnter={onMouseIn}
+      onMouseLeave={onMouseOut}
+    >
+      {connectDragPreview(
+        connectDragSource(
+          <div className={styles.node}>
+            <DatabaseFilled className={styles.nodeIcon} />
+            <span className={styles.label}>{name}</span>
+          </div>,
+        ),
+      )}
+      {visible && (
+        <Popover
+          visible={true}
+          title={name}
+          placement="right"
+          content={<Document node={node} />}
+          key="description"
+        >
+          <a className={styles.doc}>
+            <ReadOutlined /> 文档
+          </a>
+        </Popover>
+      )}
+    </div>
+  )
+}
+
+export const NodeTitle = DragSource(
+  DRAGGABLE_ALGO_COMPONENT,
+  {
+    beginDrag: (props: Props) => ({
+      component: props.node,
+    }),
+  },
+  (connect, monitor) => ({
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging(),
+  }),
+)(InnerNodeTitle)

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/index.less

@@ -0,0 +1,4 @@
+.componentTree {
+  display: block;
+  flex-grow: 1;
+}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useModel } from 'umi'
+import { useMount } from 'ahooks'
+import { CategoryTree } from './category-tree'
+import { SearchResultList } from './search-result-list'
+import styles from './index.less'
+
+export const ComponentTree = () => {
+  const { keyword, loadComponentNodes } = useModel('guide-algo-component')
+
+  useMount(() => {
+    loadComponentNodes()
+  })
+
+  return (
+    <div className={styles.componentTree}>
+      {keyword ? <SearchResultList /> : <CategoryTree />}
+    </div>
+  )
+}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/search-result-list/component-item.less

@@ -0,0 +1,121 @@
+@itemHeight: 30px;
+
+.nodeItem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.itemBlock {
+  position: relative;
+
+  .nodeItem {
+    max-width: 150px;
+    height: @itemHeight;
+    padding: 0 5px 0 2.2px;
+    line-height: @itemHeight;
+    cursor: move;
+
+    &:hover {
+      padding: 0;
+      background-color: #fff;
+      border-radius: 4px;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+
+      .nodeIcon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: @itemHeight;
+        min-width: @itemHeight;
+        height: @itemHeight;
+        color: #1890ff;
+        background-color: rgba(229, 238, 255, 0.85);
+      }
+    }
+
+    .nodeIcon {
+      margin-right: 8px;
+      color: #bfbfbf;
+    }
+  }
+
+  .itemLable {
+    position: absolute;
+    top: -2px;
+    left: 158px;
+    font-size: 10px;
+    transform: scale(0.83);
+
+    &.gre {
+      color: #2ecc71;
+    }
+  }
+
+  .catLable {
+    position: absolute;
+    top: 5px;
+    left: 158px;
+    font-size: 10px;
+    white-space: nowrap;
+    transform: scale(0.83);
+  }
+
+  .description {
+    height: @itemHeight;
+    padding-left: 22px;
+    overflow: hidden;
+    line-height: @itemHeight;
+    text-overflow: ellipsis;
+  }
+  .link {
+    position: absolute;
+    top: 5px;
+    right: 0;
+    display: none;
+  }
+
+  &:hover {
+    .link {
+      display: block;
+    }
+  }
+}
+
+.componentDescription {
+  max-width: 360px;
+  max-height: 600px;
+  overflow: auto;
+  word-break: break-all;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  a,
+  img,
+  p {
+    max-width: 100%;
+    margin: 0;
+    font-size: 12px !important;
+    line-height: 1.5em;
+    word-break: break-all !important;
+  }
+}
+
+.statusTips {
+  max-width: 320px;
+  margin: 0;
+}
+
+.tag {
+  margin: 8px 0 4px;
+  .label {
+    padding-right: 4px;
+  }
+}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/search-result-list/component-item.tsx

@@ -0,0 +1,184 @@
+import React, { useRef } from 'react'
+import classname from 'classnames'
+import { Popover, Tag, Tooltip } from 'antd'
+import { DatabaseFilled, ProfileTwoTone } from '@ant-design/icons'
+import marked from 'marked'
+import { ConnectDragPreview, ConnectDragSource, DragSource } from 'react-dnd'
+import { ItemName } from '@/component/item-name'
+import { unescape } from '@/common/utils'
+import { useSafeSetHTML } from '@/pages/common/hooks/useSafeSetHtml'
+import { DRAGGABLE_ALGO_COMPONENT } from '@/constants/graph'
+import styles from './component-item.less'
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+})
+
+const Markdown2html: React.FC<{ description: string; tag: string }> = (
+  props,
+) => {
+  const { description, tag } = props
+  const descriptionElementRef = useRef<HTMLDivElement>(null)
+
+  useSafeSetHTML(
+    descriptionElementRef,
+    marked(unescape(description).replace(/\\n/gi, ' \n ')),
+  )
+
+  return (
+    <div className={styles.componentDescription}>
+      <div ref={descriptionElementRef} key="1" />
+      {tag ? (
+        <div className={styles.tag} key="2">
+          <span className={styles.label}> 标签: </span>
+          {tag.split(',').map((str, idx) => (
+            <Tag key={str + idx}>{str}</Tag>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+const renderSearchInfo = (params: {
+  id: number | string
+  name: string
+  catName: string
+  description: string
+  tag: string
+}) => {
+  const { id, name, catName, description = '暂无数据', tag } = params
+
+  return (
+    <>
+      {catName && (
+        <span className={`${styles.catLable} gray `} key="catName">
+          {catName}
+        </span>
+      )}
+
+      <span className={styles.link} key="link">
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={`https://pai.alipay.com/component/detail/${id}`}
+        >
+          <Tooltip title="查看文档">
+            <ProfileTwoTone />
+          </Tooltip>
+        </a>
+      </span>
+
+      {description && (
+        <Popover
+          title={name}
+          placement="right"
+          content={<Markdown2html description={description} tag={tag} />}
+          key="description"
+        >
+          <div
+            className={classname(styles.description, 'gray', 'text-overflow')}
+          >
+            {description}
+          </div>
+        </Popover>
+      )}
+    </>
+  )
+}
+
+// ! 这里没有理解怎么会走到渲染这个链路上，因此代码先保留，后续可以再删掉或者使用
+const renderStatus = (params: {
+  changeType: string
+  isDeprecated: boolean
+  changeMessage: string
+}) => {
+  const { changeType, isDeprecated, changeMessage } = params
+  const renderItems = []
+  if (changeType) {
+    renderItems.push(
+      <Popover
+        content={<p className={styles.statusTips}>{changeMessage}</p>}
+        key="changeType"
+      >
+        <span className={classname(styles.itemLable, styles.gre)}>
+          {changeType.toLowerCase()}
+        </span>
+      </Popover>,
+    )
+  }
+
+  if (isDeprecated) {
+    renderItems.push(
+      <span className={classname(styles.itemLable, 'gray')} key="status">
+        已废弃
+      </span>,
+    )
+  }
+
+  return renderItems
+}
+
+interface Node {
+  keyword: string
+  algoSourceType: number
+  name: string
+  id: number
+  catName: string
+  description: string
+  tag: string
+  changeType: string
+  isDeprecated: boolean
+  changeMessage: string
+}
+
+interface NodeTitleProps {
+  data: Node
+  connectDragSource: ConnectDragSource
+  connectDragPreview: ConnectDragPreview
+}
+
+const InnerNodeTitle: React.FC<NodeTitleProps> = (props) => {
+  const { data, connectDragPreview, connectDragSource } = props
+  const { keyword, algoSourceType, name } = data
+  return (
+    <div>
+      {connectDragPreview(
+        connectDragSource(
+          <span
+            className={classname(styles.nodeItem, {
+              [styles.orange]: algoSourceType === 2,
+            })}
+          >
+            <DatabaseFilled className={styles.nodeIcon} />
+            <ItemName data={{ name, keyword }} />
+          </span>,
+        ),
+      )}
+      {keyword ? renderSearchInfo(data) : renderStatus(data)}
+    </div>
+  )
+}
+
+const NodeTitle = DragSource(
+  DRAGGABLE_ALGO_COMPONENT,
+  {
+    beginDrag: (props: NodeTitleProps) => ({
+      component: props.data,
+    }),
+  },
+  (connect, monitor) => ({
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging(),
+  }),
+)(InnerNodeTitle)
+
+interface Props {
+  data: any
+}
+
+export const ComponentItem: React.FC<Props> = ({ data = {} }) => {
+  return <div className={styles.itemBlock}>{<NodeTitle data={data} />}</div>
+}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/search-result-list/index.less

@@ -0,0 +1,37 @@
+.searchList {
+  min-height: calc(~'100vh - 80px');
+  padding: 0;
+  list-style-type: none;
+  background-image: linear-gradient(#fff 50%, #f7f9fb 50%);
+  background-size: 100% 60px;
+
+  :global {
+    li {
+      padding: 0 4px 0 10px;
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        background-color: #e3f4ff;
+      }
+    }
+
+    .flag {
+      padding-right: 4px;
+      color: #1890ff;
+      vertical-align: middle;
+    }
+  }
+}
+
+.resultTips {
+  height: 24px;
+  margin-top: 16px;
+  color: #a0a0a0;
+  line-height: 24px;
+  text-align: center;
+
+  .icon {
+    font-size: 24px;
+    vertical-align: top;
+  }
+}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/search-result-list/index.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react'
+import { useModel } from 'umi'
+import { Spin } from 'antd'
+import { ProfileTwoTone } from '@ant-design/icons'
+
+import { ComponentItem } from './component-item'
+import styles from './index.less'
+
+export const SearchResultList = () => {
+  const { keyword, searchList, loading } = useModel('guide-algo-component')
+
+  const renderList = useCallback((list: any[], keywd: string) => {
+    return (
+      <ul className={styles.searchList}>
+        {list.map((component, idx) => (
+          <li key={idx.toString()}>
+            <ComponentItem data={{ ...component, keyword: keywd }} />
+          </li>
+        ))}
+      </ul>
+    )
+  }, [])
+
+  const renderEmptyResult = useCallback(() => {
+    return (
+      <>
+        <p className={styles.resultTips}>
+          <ProfileTwoTone />
+          {'没有搜索结果'}
+        </p>
+      </>
+    )
+  }, [])
+
+  return (
+    <Spin spinning={loading}>
+      <div className="tree-wrapper">
+        {searchList.length
+          ? renderList(searchList, keyword)
+          : renderEmptyResult()}
+      </div>
+    </Spin>
+  )
+}