diff --git a/src/components/MainNode/index.tsx b/src/components/MainNode/index.tsx
index 995dae5..23505de 100644
--- a/src/components/MainNode/index.tsx
+++ b/src/components/MainNode/index.tsx
@@ -5,41 +5,166 @@ import dayjs, { Dayjs } from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { DataTypes } from '../../pages';
 import { isExceedingMonth, isExceedingYear, isFuture, isWithinMonth } from '../../utils/dateDiff';
+// 是否先证者
+const ProbandRender = ({ value }: { value?: boolean }) => {
+  return (
+    <>
+      {value && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="25"
+          height="25"
+          viewBox="0 0 1024 1024"
+          css={css`
+            position: absolute;
+            left: -25px;
+            bottom: -20px;
+          `}>
+          <path
+            d="M301.8 800.5c-14 14-37.3 13.5-51.9-1.1-13.6-13.6-13.9-35.9 0-49.5l402.1-402.1c13.6-13.6 35.9-13.9 49.5 0 14 14 13.5 37.3-1.1 51.9L301.8 800.5z"
+            fill="#000"
+          />
+          <path
+            d="M789.6 697.4c0 20.7-16.8 37.5-37.5 37.5-20.5 0-37.2-16.5-37.5-36.9V299.7c0-20.7 16.8-37.5 37.5-37.5 20.5 0 37.2 16.5 37.5 36.9v401.3z"
+            fill="#000"
+          />
+          <path
+            d="M352.2 333.4c-20.7 0-37.5-16.8-37.5-37.5 0-20.5 16.5-37.2 36.9-37.5h400.7c20.7 0 37.5 16.8 37.5 37.5 0 20.5-16.5 37.2-36.9 37.5H352.2z"
+            fill="#000"
+          />
+        </svg>
+      )}
+    </>
+  );
+};
 
-const ShapeRender = ({ Gender }: { Gender: string }) => {
-  if (Gender === 'Female') {
-    return (
-      <div
-        css={css`
-          width: 60px;
-          height: 60px;
-          border: 2px solid #5c5c66;
-          /* border-radius: 8px; */
-          border-radius: 50%;
-        `}></div>
-    );
-  }
-  if (Gender === 'Male') {
-    return (
-      <div
-        css={css`
-          width: 60px;
-          height: 60px;
-          border: 2px solid #5c5c66;
-          /* border-radius: 50%; */
-          border-radius: 8px;
-        `}></div>
-    );
-  }
-  if (Gender === 'Unknown') {
-    return (
-      <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 100 100">
-        <polygon points="50,0 100,50 50,100 0,50" stroke="#5c5c66" fillOpacity="0" strokeWidth="3" />
-      </svg>
-    );
-  }
-  return <></>;
+// 个体
+const IndividualIsRender = ({ IndividualIs, Gender }: DataTypes) => {
+  return (
+    <>
+      {(IndividualIs === 'Miscarriage' || IndividualIs === 'Aborted') && (
+        <div
+          css={css`
+            height: 100%;
+            width: 100%;
+          `}>
+          <svg width="60" height="40" xmlns="http://www.w3.org/2000/svg">
+            <polygon points="30,2 0,40 60,40" fill="none" stroke="#5c5c66" stroke-width="2" />
+          </svg>
+          {Gender !== 'Unknown' && (
+            <div
+              css={css`
+                text-align: center;
+              `}>
+              {Gender}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
 };
+
+// 其余数据变动联动图形
+const DataShapeRender = ({ IndividualIs, CarrierStatus }: DataTypes) => {
+  return (
+    <>
+      {(IndividualIs === 'Deceased' || IndividualIs === 'Aborted' || IndividualIs === 'Stillborn') && (
+        <div
+          css={css`
+            width: 2px;
+            height: 100px;
+            background-color: #000;
+            position: absolute;
+            transform: rotate(45deg);
+            top: -32%;
+            left: 40%;
+          `}></div>
+      )}
+      {IndividualIs === 'Unborn' && (
+        <div
+          css={css`
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            font-size: xx-large;
+            font-weight: 500;
+          `}>
+          P
+        </div>
+      )}
+
+      {CarrierStatus === 'Carrier' && (
+        <div
+          css={css`
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 10px;
+            height: 10px;
+            background-color: #000;
+            border-radius: 50%;
+          `}></div>
+      )}
+      {CarrierStatus === 'PreSymptomatic' && (
+        <div
+          css={css`
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 4px;
+            height: 100%;
+            background-color: #000;
+          `}></div>
+      )}
+    </>
+  );
+};
+
+// 性别
+const GenderRender = ({ Gender, Proband }: { Gender: string; Proband?: boolean }) => {
+  return (
+    <>
+      {Gender === 'Male' && (
+        <div
+          css={css`
+            width: 100%;
+            height: 100%;
+            border: ${Proband ? '4px' : '2px'} solid #5c5c66;
+            /* border-radius: 50%; */
+            border-radius: 8px;
+          `}></div>
+      )}
+      {Gender === 'Female' && (
+        <div
+          css={css`
+            width: 100%;
+            height: 100%;
+            border: ${Proband ? '4px' : '2px'} solid #5c5c66;
+            /* border-radius: 8px; */
+            border-radius: 50%;
+          `}></div>
+      )}
+      {Gender === 'Unknown' && (
+        <div
+          css={css`
+            width: 100%;
+            height: 100%;
+            background-color: transparent;
+            transform: scale(0.8) rotate(45deg);
+            margin: 0 auto;
+
+            border: ${Proband ? '4px' : '2px'} solid #5c5c66;
+          `}></div>
+      )}
+    </>
+  );
+};
+
+// 日期
 const DateRender = ({ DateOfBirth, DateOfDeath }: { DateOfBirth: Dayjs | null; DateOfDeath: Dayjs | null }) => {
   const { t } = useTranslation();
   // 如果有死亡时间优先显示
@@ -92,23 +217,111 @@ const DateRender = ({ DateOfBirth, DateOfDeath }: { DateOfBirth: Dayjs | null; D
   }
   return <></>;
 };
+// 是否被领养
+const AdoptedInRender = ({ value }: { value: boolean }) => {
+  if (value) {
+    return (
+      <>
+        <div
+          css={css`
+            font-size: xxx-large;
+            font-weight: 100;
+            position: absolute;
+            left: -30%;
+            top: 0;
+          `}>
+          [
+        </div>
+        <div
+          css={css`
+            font-size: xxx-large;
+            font-weight: 100;
+            position: absolute;
+            right: -30%;
+            top: 0;
+          `}>
+          ]
+        </div>
+      </>
+    );
+  } else {
+    return <></>;
+  }
+};
+
 const MainNode = ({ node }: { node: Node<Node.Properties>; graph: Graph }) => {
   const data: DataTypes = node.data;
   const { t } = useTranslation();
+  console.log(data);
   return (
     <>
-      <ShapeRender Gender={data.Gender} />
+      {data.IndividualIs !== 'Miscarriage' && data.IndividualIs !== 'Aborted' && (
+        <GenderRender Gender={data.Gender} Proband={data.Proband} />
+      )}
+      <DataShapeRender {...data} />
+      <ProbandRender value={data.Proband} />
+      <IndividualIsRender {...data} />
+      <AdoptedInRender value={data.AdoptedIn} />
+      {data.DocumentedEvaluation && (
+        <b
+          css={css`
+            height: 20px;
+            position: absolute;
+            right: -15px;
+            bottom: -15px;
+            font-size: 30px;
+          `}>
+          *
+        </b>
+      )}
+      {(data.heredityValue === 'Childless' || data.heredityValue === 'Infertile') && (
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+          `}>
+          <div
+            css={css`
+              width: 2px;
+              height: 14px;
+              background-color: #000;
+              margin: 0 auto;
+            `}
+          />
+          <div
+            css={css`
+              width: 26px;
+              height: 2px;
+              background-color: #000;
+              margin: 0 auto;
+            `}
+          />
+          {data.heredityValue === 'Infertile' && (
+            <div
+              css={css`
+                width: 26px;
+                height: 2px;
+                background-color: #000;
+                margin: 2px auto 0 auto;
+              `}
+            />
+          )}
+        </div>
+      )}
       <Space
         direction="vertical"
         size="small"
         css={css`
           text-align: center;
           display: flex;
+          margin-top: 6px;
         `}>
+        {data.heredityText && <div>({data.heredityText})</div>}
         {data.Name}
         <DateRender DateOfBirth={data.DateOfBirth} DateOfDeath={data.DateOfDeath} />
         {data.IndividualIs === 'Stillborn' && 'SB'}
         {data.GestationAge !== '-' && ` ${data.GestationAge} ${t('Common.date.week')}`}
+        {data.Comments}
       </Space>
     </>
   );
diff --git a/src/components/SettingNode/index.tsx b/src/components/SettingNode/index.tsx
index 4956f02..0cae0dd 100644
--- a/src/components/SettingNode/index.tsx
+++ b/src/components/SettingNode/index.tsx
@@ -5,6 +5,7 @@ import { Checkbox, Col, DatePicker, Input, Radio, Row, Select, Space, Tabs } fro
 import dayjs, { Dayjs } from 'dayjs';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { DataTypes } from '../../pages';
 const HeaderCss = css`
   text-align: right;
 `;
@@ -57,20 +58,20 @@ const SettingNode = ({ node, graph }: { node: Node<Node.Properties>; graph: Grap
 
   const heredityOptions = [
     {
-      label: 'None',
-      value: t('settingNode.PersonalOptions.HeredityOptions.None'),
+      label: t('settingNode.PersonalOptions.HeredityOptions.None'),
+      value: 'None',
     },
     {
-      label: 'Childless',
-      value: t('settingNode.PersonalOptions.HeredityOptions.Childless'),
+      label: t('settingNode.PersonalOptions.HeredityOptions.Childless'),
+      value: 'Childless',
     },
     {
-      label: 'Infertile',
-      value: t('settingNode.PersonalOptions.HeredityOptions.Infertile'),
+      label: t('settingNode.PersonalOptions.HeredityOptions.Infertile'),
+      value: 'Infertile',
     },
   ];
 
-  const data = node.getData();
+  const data: DataTypes = node.getData();
   const gestationAgeOptions = () => {
     const data = [];
     for (let index = 0; index < 51; index++) {
@@ -255,6 +256,7 @@ const SettingNode = ({ node, graph }: { node: Node<Node.Properties>; graph: Grap
                   </Col>
                   <Col span={12}>
                     <Input
+                      disabled={data.heredityValue === 'None'}
                       value={data.heredityText}
                       onChange={(event) => onChangeData({ key: 'heredityText', value: event.target.value })}
                     />
@@ -284,7 +286,11 @@ const SettingNode = ({ node, graph }: { node: Node<Node.Properties>; graph: Grap
                       { label: t('settingNode.ClinicalOptions.CarrierStatus.NotAffected'), value: 'NotAffected' },
                       { label: t('settingNode.ClinicalOptions.CarrierStatus.Affected'), value: 'Affected' },
                       { label: t('settingNode.ClinicalOptions.CarrierStatus.Carrier'), value: 'Carrier' },
-                      { label: t('settingNode.ClinicalOptions.CarrierStatus.PreSymptomatic'), value: 'PreSymptomatic' },
+                      {
+                        label: t('settingNode.ClinicalOptions.CarrierStatus.PreSymptomatic'),
+                        value: 'PreSymptomatic',
+                        disabled: data.IndividualIs === 'Miscarriage' || data.IndividualIs === 'Aborted',
+                      },
                     ]}
                   />
                 </Col>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2eac4b7..c32df3e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { SaveOutlined } from '@ant-design/icons';
+import { ExclamationCircleFilled, SaveOutlined } from '@ant-design/icons';
 import { EventArgs, Graph, Node } from '@antv/x6';
 import { Export } from '@antv/x6-plugin-export';
 import { History } from '@antv/x6-plugin-history';
@@ -7,8 +7,7 @@ import { Selection } from '@antv/x6-plugin-selection';
 import { Snapline } from '@antv/x6-plugin-snapline';
 import { register } from '@antv/x6-react-shape';
 import { css } from '@emotion/react';
-import { Button, Dropdown, Space, Tooltip, Upload, Modal } from 'antd';
-import { ExclamationCircleFilled } from '@ant-design/icons';
+import { Button, Dropdown, Modal, Space, Tooltip, Upload } from 'antd';
 import { Dayjs } from 'dayjs';
 import fs from 'file-saver';
 import i18next from 'i18next';
@@ -53,6 +52,11 @@ export type DataTypes = {
   GestationAge?: string;
   CarrierStatus?: CarrierStatusTypes;
   DocumentedEvaluation: boolean;
+  Proband?: boolean;
+  Comments?: string;
+  KnownDisordersOfThisIndividual?: string;
+  ClinicalSymptomsObservedPhenotypes?: string;
+  GenotypeInformationCandidateGenes?: string;
 };
 
 // 这个调用需要在组件外进行。
@@ -107,7 +111,10 @@ const Index = () => {
 
   const deleteNode = (id: string) => {
     const findDeleteItem = nodeRecordRef.current.find((item) => item.id === id);
-
+    if (settingNodeRef.current) {
+      graphRef.current?.removeNode(settingNodeRef.current.id);
+      clearNode();
+    }
     Modal.confirm({
       title: `确认删除该连接线${!!findDeleteItem?.nodeList?.length ? '与对应的节点' : ''}吗？`,
       icon: <ExclamationCircleFilled />,
@@ -132,6 +139,17 @@ const Index = () => {
     nodeRecordRef.current = [...copied];
   };
 
+  // 点击连接桩生成节点，动态修改gender 默认值
+  const createNode = (x: number, y: number, gender: string, graph: Graph): Node<Node.Properties> => {
+    return graph.addNode({
+      shape: 'MainNode',
+      x,
+      y,
+      size: CREATE_NODE_SIZE,
+      data: { ...SETTING_INIT_DATA, Gender: gender, heredityValue: 'None' },
+      ports: { ...ports },
+    });
+  };
   const containerRefCallback = useCallback((node: any) => {
     if (node) {
       containerRef.current = node;
@@ -269,7 +287,7 @@ const Index = () => {
             global: true,
           })
         );
-
+      // 初始化节点
       graphRef.current.addNode({
         shape: 'MainNode',
         x: node.clientWidth / 2,
@@ -279,19 +297,8 @@ const Index = () => {
           height: 60,
         },
         ports: { ...ports },
-        data: SETTING_INIT_DATA,
+        data: { ...SETTING_INIT_DATA, Proband: true, heredityValue: 'None' },
       });
-      // 点击连接桩生成节点，动态修改gender 默认值
-      const createNode = (x: number, y: number, gender: string): Node<Node.Properties> => {
-        return graphRef.current!.addNode({
-          shape: 'MainNode',
-          x,
-          y,
-          size: CREATE_NODE_SIZE,
-          data: { ...SETTING_INIT_DATA, Gender: gender },
-          ports: { ...ports },
-        });
-      };
 
       const addEdge = (
         sourceCell: string,
@@ -321,8 +328,8 @@ const Index = () => {
         const currentPorts = child.cell.ports.items.find((item) => item.id === child.port);
         // 点击上方连接桩
         if (currentPorts?.group === 'top') {
-          const maleNode = createNode(x - 100, y - 150, 'Male');
-          const femaleNode = createNode(x + 100, y - 150, 'Female');
+          const maleNode = createNode(x - 100, y - 150, 'Male', graphRef.current!);
+          const femaleNode = createNode(x + 100, y - 150, 'Female', graphRef.current!);
           const edge2 = addEdge(
             femaleNode.id,
             femaleNode.ports.items.find((item) => item.group === 'left')?.id,
@@ -350,8 +357,13 @@ const Index = () => {
         }
         // 点击右侧连接桩
         if (currentPorts?.group === 'right') {
-          const brotherNode = createNode(x + 200, y, AddNodeGenderMap[child.node.data?.Gender as AddNodeGenderMap]);
-          const childNode = createNode(x + 100, y + 150, 'Unknown');
+          const brotherNode = createNode(
+            x + 200,
+            y,
+            AddNodeGenderMap[child.node.data?.Gender as AddNodeGenderMap],
+            graphRef.current!
+          );
+          const childNode = createNode(x + 100, y + 150, 'Unknown', graphRef.current!);
           const edge2 = addEdge(
             brotherNode.id,
             brotherNode.ports.items.find((item) => item.group === 'left')?.id,
@@ -379,8 +391,13 @@ const Index = () => {
         }
         // 点击左侧连接桩
         if (currentPorts?.group === 'left') {
-          const brotherNode = createNode(x - 200, y, AddNodeGenderMap[child.node.data?.Gender as AddNodeGenderMap]);
-          const childNode = createNode(x - 100, y + 150, 'Unknown');
+          const brotherNode = createNode(
+            x - 200,
+            y,
+            AddNodeGenderMap[child.node.data?.Gender as AddNodeGenderMap],
+            graphRef.current!
+          );
+          const childNode = createNode(x - 100, y + 150, 'Unknown', graphRef.current!);
           const edge1 = addEdge(
             child.cell.id,
             child.port,
@@ -408,7 +425,7 @@ const Index = () => {
         }
         // 点击下方连接桩
         if (currentPorts?.group === 'bottom') {
-          const childNode = createNode(x, y + 150, 'Unknown');
+          const childNode = createNode(x, y + 150, 'Unknown', graphRef.current!);
           const edge = addEdge(
             child.cell.id,
             child.port,