diff --git a/packages/graphs/src/components/flow-direction-graph/options.tsx b/packages/graphs/src/components/flow-direction-graph/options.tsx
index c55faf4727..959f9ae51c 100644
--- a/packages/graphs/src/components/flow-direction-graph/options.tsx
+++ b/packages/graphs/src/components/flow-direction-graph/options.tsx
@@ -1,17 +1,14 @@
 import React from 'react';
 import { RCNode } from '../../core/base';
+import { formatLabel } from '../../core/utils/label';
 import type { GraphOptions } from '../../types';
+import type { FlowDirectionGraphOptions } from './types';
 
 const { TextNode } = RCNode;
 
 export const DEFAULT_OPTIONS: GraphOptions = {
   node: {
     type: 'react',
-    style: {
-      component: (data) => <TextNode type="filled" text={data.id} />,
-      size: [100, 40],
-      ports: [{ placement: 'left' }, { placement: 'right' }],
-    },
     state: {
       active: {
         halo: false,
@@ -39,3 +36,22 @@ export const DEFAULT_OPTIONS: GraphOptions = {
   },
   transforms: ['translate-react-node-origin'],
 };
+
+export const getFlowDirectionGraphOptions = ({
+  labelField,
+}: Pick<FlowDirectionGraphOptions, 'labelField'>): FlowDirectionGraphOptions => {
+  const options: FlowDirectionGraphOptions = {
+    node: {
+      style: {
+        component: (data) => {
+          const label = formatLabel(data, labelField);
+          return <TextNode type="filled" text={label} />;
+        },
+        size: [100, 40],
+        ports: [{ placement: 'left' }, { placement: 'right' }],
+      },
+    },
+  };
+
+  return options;
+};
diff --git a/packages/graphs/src/components/flow-direction-graph/types.ts b/packages/graphs/src/components/flow-direction-graph/types.ts
index d26ee269d2..3dd1e502f8 100644
--- a/packages/graphs/src/components/flow-direction-graph/types.ts
+++ b/packages/graphs/src/components/flow-direction-graph/types.ts
@@ -1,3 +1,12 @@
+import type { NodeData } from '@antv/g6';
 import { GraphOptions } from '../../types';
 
-export interface FlowDirectionGraphOptions extends GraphOptions {}
+export interface FlowDirectionGraphOptions extends GraphOptions {
+  /**
+   * Selects a field from the data to use as the label for the node.
+   * If a string is provided, it will select the field as `data[labelField]`.
+   * If a function is provided, it will call the function with the data and use the returned value.
+   * @default (data) => data.id
+   */
+  labelField?: string | ((node: NodeData) => string);
+}
diff --git a/packages/graphs/src/components/flow-graph/index.tsx b/packages/graphs/src/components/flow-graph/index.tsx
index 4e508ad70f..30f96b9d2a 100644
--- a/packages/graphs/src/components/flow-graph/index.tsx
+++ b/packages/graphs/src/components/flow-graph/index.tsx
@@ -17,8 +17,8 @@ export const FlowGraph: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<FlowGraphOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<FlowGraphOptions>>(({ children, ...props }, ref) => {
   const options = useMemo(() => {
-    const { direction = 'horizontal', ...restProps } = props;
-    return mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFlowGraphOptions({ direction }), restProps);
+    const { direction = 'horizontal', labelField, ...restProps } = props;
+    return mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFlowGraphOptions({ direction, labelField }), restProps);
   }, [props]);
 
   return (
diff --git a/packages/graphs/src/components/flow-graph/options.tsx b/packages/graphs/src/components/flow-graph/options.tsx
index 8938ab44b3..6ee647221a 100644
--- a/packages/graphs/src/components/flow-graph/options.tsx
+++ b/packages/graphs/src/components/flow-graph/options.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { RCNode } from '../../core/base';
+import { formatLabel } from '../../core/utils/label';
 import type { FlowGraphOptions } from './types';
 
 const { TextNode } = RCNode;
@@ -7,11 +8,6 @@ const { TextNode } = RCNode;
 export const DEFAULT_OPTIONS: FlowGraphOptions = {
   node: {
     type: 'react',
-    style: {
-      component: (data) => <TextNode type="filled" text={data.id} />,
-      size: [100, 40],
-      ports: [{ placement: 'left' }, { placement: 'right' }],
-    },
     state: {
       active: {
         halo: false,
@@ -32,28 +28,34 @@ export const DEFAULT_OPTIONS: FlowGraphOptions = {
   },
   layout: {
     type: 'dagre',
-    rankdir: 'LR',
     animation: false,
   },
   transforms: ['translate-react-node-origin'],
 };
 
-export const getFlowGraphOptions = ({ direction }: Pick<FlowGraphOptions, 'direction'>): FlowGraphOptions => {
-  let options: FlowGraphOptions = {};
-
-  if (direction === 'vertical') {
-    options = {
-      node: {
-        style: {
-          ports: [{ placement: 'top' }, { placement: 'bottom' }],
+export const getFlowGraphOptions = ({
+  direction,
+  labelField,
+}: Pick<FlowGraphOptions, 'direction' | 'labelField'>): FlowGraphOptions => {
+  const options: FlowGraphOptions = {
+    node: {
+      style: {
+        component: (data) => {
+          const label = formatLabel(data, labelField);
+          return <TextNode type="filled" text={label} />;
         },
+        size: [100, 40],
+        ports:
+          direction === 'vertical'
+            ? [{ placement: 'top' }, { placement: 'bottom' }]
+            : [{ placement: 'left' }, { placement: 'right' }],
       },
-      layout: {
-        type: 'dagre',
-        rankdir: 'TB',
-      },
-    };
-  }
+    },
+    layout: {
+      type: 'dagre',
+      rankdir: direction === 'vertical' ? 'TB' : 'LR',
+    },
+  };
 
   return options;
 };
diff --git a/packages/graphs/src/components/flow-graph/types.ts b/packages/graphs/src/components/flow-graph/types.ts
index 0d18aad31c..48b80a1885 100644
--- a/packages/graphs/src/components/flow-graph/types.ts
+++ b/packages/graphs/src/components/flow-graph/types.ts
@@ -1,3 +1,4 @@
+import type { NodeData } from '@antv/g6';
 import type { GraphOptions } from '../../types';
 
 export interface FlowGraphOptions extends GraphOptions {
@@ -6,4 +7,11 @@ export interface FlowGraphOptions extends GraphOptions {
    * @default 'horizontal'
    */
   direction?: 'horizontal' | 'vertical';
+  /**
+   * Selects a field from the data to use as the label for the node.
+   * If a string is provided, it will select the field as `data[labelField]`.
+   * If a function is provided, it will call the function with the data and use the returned value.
+   * @default (data) => data.id
+   */
+  labelField?: string | ((node: NodeData) => string);
 }
diff --git a/packages/graphs/src/core/base/node/organization-chart-node.tsx b/packages/graphs/src/core/base/node/organization-chart-node.tsx
index 1886ea0131..85e808ece7 100644
--- a/packages/graphs/src/core/base/node/organization-chart-node.tsx
+++ b/packages/graphs/src/core/base/node/organization-chart-node.tsx
@@ -23,7 +23,7 @@ export interface OrganizationChartNodeProps extends Pick<React.HTMLAttributes<HT
 const StyledWrapper = styled.div<{ $color?: string; $isActive?: boolean }>`
   height: inherit;
   width: inherit;
-  border-radius: 4px;
+  border-radius: 8px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   position: relative;
   border: none;
@@ -34,14 +34,14 @@ const StyledWrapper = styled.div<{ $color?: string; $isActive?: boolean }>`
     props.$isActive &&
     css`
       transform: translate(-3px, -3px);
-      border: 3px solid #1783ff;
+      border: 2px solid #1783ff;
     `}
 
   .org-chart-node-line {
     width: 100%;
     height: 6px;
     background-color: ${(props) => props.$color};
-    border-radius: 2px 2px 0 0;
+    border-radius: 8px 8px 0 0;
   }
 
   .org-chart-node-content {