diff --git a/io.sc.platform.core.frontend/src/views/Components.vue b/io.sc.platform.core.frontend/src/views/Components.vue
new file mode 100644
index 00000000..1368ac56
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/Components.vue
@@ -0,0 +1,146 @@
+<template>
+  <div ref="containerRef" style="width: 100%"></div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { InternalEvent, Graph, Geometry, Cell } from '@maxgraph/core';
+import type { VertexParameterType } from './types/VertexParameterType';
+
+const containerRef = ref();
+let graph: Graph | null = null;
+let parent: Cell | null = null;
+let entries: VertexParameterType[] = [];
+const cellTitleMap = {};
+
+class ComponentsGraph extends Graph {
+  getTooltipForCell(cell) {
+    return cellTitleMap[cell.id];
+  }
+}
+
+onMounted(() => {
+  InternalEvent.disableContextMenu(containerRef.value);
+  graph = new ComponentsGraph(containerRef.value);
+  graph.setPanning(true);
+  graph.setHtmlLabels(true);
+  graph.setTooltips(true);
+  parent = graph.getDefaultParent();
+  addEntry({
+    id: 'start',
+    title: '开始',
+    value: `<div class="w-full h-full align-middle text-center" style="width:47px">开始</div>`,
+    width: 50,
+    height: 50,
+    style: { shape: 'ellipse' },
+  });
+  addEntry({
+    id: 'decide',
+    title: '条件判断',
+    value: `<div class="w-full h-full align-middle text-center" style="width:97px">条件判断</div>`,
+    width: 100,
+    height: 50,
+    style: { shape: 'rhombus' },
+  });
+  addEntry({
+    id: 'commandSet',
+    title: '指令集',
+    value: `<div class="w-full h-full align-middle text-center" style="width:47px">指令集</div>`,
+    width: 50,
+    height: 50,
+    style: { shape: 'rectangle' },
+  });
+  addEntry({
+    id: 'resource',
+    title: '资源',
+    value: `<div class="w-full h-full align-middle text-center" style="width:47px">资源</div>`,
+    width: 50,
+    height: 50,
+    style: { shape: 'rectangle' },
+  });
+
+  addEntry({
+    id: 'resource',
+    title: '指令资源',
+    value: `<div class="w-full h-full align-middle text-center" style="width:47px">指令资源</div>`,
+    width: 50,
+    height: 50,
+    style: { shape: 'rectangle' },
+  });
+
+  addEntry({
+    id: 'subModel',
+    title: '子模型',
+    value: `<div class="w-full h-full align-middle text-center" style="width:47px">子模型</div>`,
+    width: 50,
+    height: 50,
+    style: { shape: 'rectangle' },
+  });
+
+  refresh();
+});
+
+const addVertexWithDefaultStyle = (parameter: VertexParameterType): Cell | undefined => {
+  addVertex({
+    id: parameter.id,
+    title: parameter.title,
+    value: parameter.value,
+    geometry: parameter.geometry,
+    style: {
+      //'rectangle' | 'ellipse' | 'doubleEllipse' | 'rhombus' | 'line' | 'image' | 'arrow' | 'arrowConnector' | 'label' | 'cylinder' | 'swimlane' | 'connector' | 'actor' | 'cloud' | 'triangle' | 'hexagon';
+      shape: parameter.style?.shape,
+      verticalAlign: parameter.style?.verticalAlign || 'middle',
+      verticalLabelPosition: parameter.style?.verticalLabelPosition || 'middle',
+      align: parameter.style?.align || 'left',
+      fontSize: parameter.style?.fontSize || 12,
+      rounded: parameter.style?.rounded || true,
+      whiteSpace: parameter.style?.whiteSpace || 'wrap',
+      fillColor: parameter.style?.fillColor || '#F7F2E0',
+      strokeColor: parameter.style?.strokeColor || 'black',
+    },
+  });
+};
+
+const addVertex = (parameter: VertexParameterType): Cell | undefined => {
+  const vertex = graph?.insertVertex({
+    id: parameter.id,
+    parent: parent,
+    position: [parameter.geometry?.x || 0, parameter.geometry?.y || 0],
+    size: [parameter.geometry?.width || 10, parameter.geometry?.height || 10],
+    style: parameter.style,
+    value: parameter.value,
+  });
+  cellTitleMap[parameter.id] = parameter.title;
+  return vertex;
+};
+
+const addEntry = (entry: VertexParameterType) => {
+  entry.geometry = new Geometry(0, 0, entry.width, entry.height);
+  entries.push(entry);
+};
+
+const refresh = () => {
+  let availableWidth = containerRef.value.clientWidth;
+  let currentWidth = 0;
+  for (const entry of entries) {
+    if (currentWidth + entry.width > availableWidth) {
+      entry.geometry.x = 0;
+    } else {
+      entry.geometry.x = currentWidth;
+    }
+    currentWidth += entry.width;
+  }
+
+  graph.batchUpdate(() => {
+    for (const entry of entries) {
+      entry.geometry = new Geometry(70, 80, entry.width, entry.height);
+    }
+    for (const entry of entries) {
+      addVertexWithDefaultStyle(entry);
+    }
+  });
+};
+
+defineExpose({
+  addEntry,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/Editor.vue b/io.sc.platform.core.frontend/src/views/Editor.vue
new file mode 100644
index 00000000..b8924ecc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/Editor.vue
@@ -0,0 +1,53 @@
+<template>
+  <div ref="containerRef"></div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { type CellStyle, Graph, InternalEvent } from '@maxgraph/core';
+
+const containerRef = ref();
+
+onMounted(() => {
+  //const container = <HTMLElement>document.getElementById('graph-container');
+  // Disables the built-in context menu
+  InternalEvent.disableContextMenu(containerRef.value);
+
+  const graph = new Graph(containerRef.value);
+  graph.setPanning(true); // Use mouse right button for panning
+  // Gets the default parent for inserting new cells. This
+  // is normally the first child of the root (ie. layer 0).
+  const parent = graph.getDefaultParent();
+
+  // Adds cells to the model in a single step
+  graph.batchUpdate(() => {
+    const vertex01 = graph.insertVertex({
+      parent,
+      position: [10, 10],
+      size: [100, 100],
+      value: 'rectangle',
+    });
+    const vertex02 = graph.insertVertex({
+      parent,
+      position: [350, 90],
+      size: [50, 50],
+      style: {
+        fillColor: 'orange',
+        shape: 'ellipse',
+        verticalAlign: 'top',
+        verticalLabelPosition: 'bottom',
+      },
+      value: 'ellipse',
+    });
+    graph.insertEdge({
+      parent,
+      source: vertex01,
+      target: vertex02,
+      value: 'edge',
+      style: {
+        edgeStyle: 'orthogonalEdgeStyle',
+        rounded: true,
+      },
+    });
+  });
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/Properties.vue b/io.sc.platform.core.frontend/src/views/Properties.vue
new file mode 100644
index 00000000..356a39fc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/Properties.vue
@@ -0,0 +1,22 @@
+<template>
+  <div style="height: 100%" class="px-1">
+    <q-tabs model-value="currentSelectedTabRef" align="left" dense inline-label shrink outside-arrows mobile-arrows :breakpoint="0" no-caps>
+      <q-tab name="setting" label="设置" />
+      <q-tab name="style" label="样式" />
+      <q-tab name="text" label="文本" />
+      <q-tab name="arrange" label="排列" />
+    </q-tabs>
+
+    <q-tab-panels v-model="currentSelectedTabRef" animated swipeable keep-alive style="height: calc(100% - 48px)">
+      <q-tab-panel name="setting" class="px-0 pb-0" style="height: 100%"> </q-tab-panel>
+      <q-tab-panel name="style" class="px-0 pb-0" style="height: 100%"> </q-tab-panel>
+      <q-tab-panel name="text" class="px-0 pb-0" style="height: 100%"> </q-tab-panel>
+      <q-tab-panel name="arrange" class="px-0 pb-0" style="height: 100%"> </q-tab-panel>
+    </q-tab-panels>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const currentSelectedTabRef = ref('style');
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/SideBar.vue b/io.sc.platform.core.frontend/src/views/SideBar.vue
new file mode 100644
index 00000000..f239540b
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/SideBar.vue
@@ -0,0 +1,19 @@
+<template>
+  <q-list class="rounded-borders">
+    <q-expansion-item label="可用组件" default-opened switch-toggle-side header-style="padding-left:8px;padding-right:8px; " expand-icon-class="px-0">
+      <Components></Components>
+    </q-expansion-item>
+    <q-expansion-item label="Account settings" switch-toggle-side header-style="padding-left:8px;padding-right:8px; " expand-icon-class="px-0">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti commodi magni quaerat ex numquam, dolorum officiis modi
+      facere maiores architecto suscipit iste eveniet doloribus ullam aliquid.
+    </q-expansion-item>
+  </q-list>
+</template>
+<script setup lang="ts">
+import Components from './Components.vue';
+</script>
+<style>
+.q-item__section--avatar {
+  min-width: 36px !important;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/views/ToolBar.vue b/io.sc.platform.core.frontend/src/views/ToolBar.vue
new file mode 100644
index 00000000..b3b5d9df
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/ToolBar.vue
@@ -0,0 +1,47 @@
+<template>
+  <q-toolbar class="w-full border-b rounded-sm gap-x-1">
+    <q-btn outline icon="bi-floppy" />
+    <q-separator vertical />
+    <q-btn-dropdown label="100%" outline>
+      <q-list>
+        <q-item v-close-popup clickable>
+          <q-item-section>
+            <q-item-label>Reset View</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-separator vertical />
+
+        <q-item v-close-popup clickable>
+          <q-item-section>
+            <q-item-label>25%</q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item v-close-popup clickable>
+          <q-item-section>
+            <q-item-label>50%</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+    <q-separator vertical />
+    <q-btn outline icon="bi-zoom-in" />
+    <q-btn outline icon="bi-zoom-out" />
+    <q-separator vertical />
+    <q-btn outline icon="undo" />
+    <q-btn outline icon="redo" />
+    <q-separator vertical />
+    <q-btn outline icon="bi-trash" />
+    <q-separator vertical />
+    <q-btn outline icon="bi-layers" />
+    <q-btn outline icon="bi-layers-half" />
+    <q-separator vertical />
+    <q-btn outline icon="bi-paint-bucket" />
+    <q-separator vertical />
+    <q-btn outline icon="bi-palette" />
+    <q-separator vertical />
+    <q-btn outline icon="bi-bezier2" />
+  </q-toolbar>
+</template>
+<script setup lang="ts"></script>