diff --git a/frontend/src/components/flowEditor/left/ControlPanelC.vue b/frontend/src/components/flowEditor/left/ControlPanelC.vue
index 89cf567..08bb1b9 100644
--- a/frontend/src/components/flowEditor/left/ControlPanelC.vue
+++ b/frontend/src/components/flowEditor/left/ControlPanelC.vue
@@ -5,7 +5,7 @@
       selected-color="primary"
       default-expand-all
       :nodes="LeftDataBus.root"
-      v-model:selected="selected"
+      v-model:selected="flowNames1"
       node-key="label"
     >
     </q-tree>
@@ -18,9 +18,12 @@ import {
   setControlPanelE,
 } from 'components/flowEditor/left/DataBus';
 import { ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useFlowEditorStore } from 'stores/flowEditor';
 
 // 应该在page中用网络请求获取值并初始化组件
 // 然后在page中执行setControlPane设置databus
-const selected = ref('保存をクリックした時');
+const store = useFlowEditorStore();
+const { flowNames1 } = storeToRefs(store);
 setControlPanelE();
 </script>
diff --git a/frontend/src/pages/FlowEditorPage.vue b/frontend/src/pages/FlowEditorPage.vue
index fbb1f6b..184fe1f 100644
--- a/frontend/src/pages/FlowEditorPage.vue
+++ b/frontend/src/pages/FlowEditorPage.vue
@@ -10,6 +10,8 @@
             :key="flowName"
             :label="flowName"
           />
+
+          <q-breadcrumbs-el :label="flowNames1" />
         </q-breadcrumbs>
         <q-separator vertical class="q-mr-xs" />
         <q-btn
@@ -115,10 +117,11 @@ import FlowChartTest from 'pages/FlowChartTest.vue';
 import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue';
 import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
 import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 
 import ShowDialog from 'components/ShowDialog.vue';
 import ActionSelect from 'components/ActionSelect.vue';
-
+import { useFlowEditorStore } from 'stores/flowEditor';
 const show = ref(false);
 const addshow = ref(true);
 const appDg = ref();
@@ -127,17 +130,18 @@ interface FlowEditorPageProps {
   actName: string;
   flowNames: string[];
 }
-
+const store = useFlowEditorStore();
+const { flowNames1 } = storeToRefs(store);
+flowNames1.value = '保存をクリックした時';
 const props = withDefaults(defineProps<FlowEditorPageProps>(), {
   actName: '勤怠管理 - 4',
   flowNames: () => ['レコードを追加画面', '保存をクリックした時'],
 });
 const actName = computed(() => props.actName);
-const flowNames = computed(() => props.flowNames);
-
+const flowNames = computed(() => props.flowNames as Array<string>);
+flowNames.value.splice(1, 1, flowNames1.value)
 const drawerLeft = ref(false);
 
-
 const showDg = () => {
   show.value = true;
 };
@@ -161,10 +165,8 @@ const closeDg = (val: string) => {
     if (document.getElementsByClassName('action').length > 0) {
       addshow.value = false;
     }
-  };
+  }
 };
-
-
 </script>
 
 <style lang="sass">
diff --git a/frontend/src/stores/flowEditor.ts b/frontend/src/stores/flowEditor.ts
new file mode 100644
index 0000000..8ca0fa3
--- /dev/null
+++ b/frontend/src/stores/flowEditor.ts
@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia';
+
+export const useFlowEditorStore = defineStore('flowEditor', {
+  state: () => ({
+    counter: 0,
+    flowNames: [],
+    flowNames1: ''
+  }),
+
+  getters: {
+    doubleCount(state) {
+      return state.counter * 2;
+    }
+  },
+
+  actions: {
+    increment() {
+      this.counter++;
+    },
+
+    setDefaultFlow() {
+      this.counter++
+    }
+  }
+});