diff --git a/packages/client/src/components/resizeable/style.module.scss b/packages/client/src/components/resizeable/style.module.scss
index 77424666..1115c8d7 100644
--- a/packages/client/src/components/resizeable/style.module.scss
+++ b/packages/client/src/components/resizeable/style.module.scss
@@ -5,6 +5,7 @@
   height: 100px;
   max-width: 100%;
   box-sizing: border-box;
+  overflow: visible;
 
   .cloneNodeWrap {
     position: absolute;
diff --git a/packages/client/src/diagram/index.js b/packages/client/src/diagram/index.js
index 4a1fd858..883b3792 100644
--- a/packages/client/src/diagram/index.js
+++ b/packages/client/src/diagram/index.js
@@ -12,7 +12,6 @@ export function createEditor(div) {
 
     try {
       editorUi.editor.graph.model.clear();
-      editorUi.editor.graph.view.scale = 1;
       editorUi.editor.updateGraphComponents();
       codec.decode(xmlDoc.documentElement, editorUi.editor.graph.getModel());
     } finally {
diff --git a/packages/client/src/tiptap/core/extensions/flow.ts b/packages/client/src/tiptap/core/extensions/flow.ts
index c5250c86..2b752f64 100644
--- a/packages/client/src/tiptap/core/extensions/flow.ts
+++ b/packages/client/src/tiptap/core/extensions/flow.ts
@@ -22,7 +22,6 @@ export const Flow = Node.create({
   group: 'block',
   selectable: true,
   atom: true,
-  inline: false,
 
   addAttributes() {
     return {
diff --git a/packages/client/src/tiptap/core/wrappers/flow/index.tsx b/packages/client/src/tiptap/core/wrappers/flow/index.tsx
index 2eaaac91..ead8327c 100644
--- a/packages/client/src/tiptap/core/wrappers/flow/index.tsx
+++ b/packages/client/src/tiptap/core/wrappers/flow/index.tsx
@@ -56,7 +56,6 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
     (div) => {
       if (!div) return;
 
-      // load().then(() => {
       if (!$graph.current) {
         const graph = renderXml(div, data);
         $graph.current = graph;
@@ -64,8 +63,9 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
         $graph.current.setXml(data);
       }
 
+      $graph.current.fit();
+      $graph.current.zoom(0.8);
       $graph.current.center();
-      // });
     },
     [data]
   );
@@ -79,22 +79,17 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   useEffect(() => {
-    load().catch(setError).finally(toggleLoading);
-  }, [toggleLoading]);
+    load()
+      .catch(setError)
+      .finally(() => toggleLoading(false));
+  }, [toggleLoading, data]);
 
   return (
     <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
-      <Resizeable
-        style={{ overflow: 'hidden' }}
-        isEditable={isEditable}
-        width={width}
-        height={height}
-        maxWidth={maxWidth}
-        onChangeEnd={onResize}
-      >
+      <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
         <div
           className={cls(styles.renderWrap, 'render-wrapper')}
-          style={{ ...INHERIT_SIZE_STYLE, backgroundColor: bgColor }}
+          style={{ ...INHERIT_SIZE_STYLE, overflow: 'hidden', backgroundColor: bgColor }}
         >
           {loading && (
             <div>
@@ -105,7 +100,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
             </div>
           )}
           {error && <Text>{(error && error.message) || '未知错误'}</Text>}
-          {!loading && !error && <div ref={setMxgraph}></div>}
+          {!loading && !error && <div style={{ maxHeight: '100%' }} ref={setMxgraph}></div>}
         </div>
 
         <div className={styles.toolbarWrap}>