diff --git a/packages/core/src/clipboard.ts b/packages/core/src/clipboard.ts
index 3621cdb2..03f9d500 100644
--- a/packages/core/src/clipboard.ts
+++ b/packages/core/src/clipboard.ts
@@ -223,7 +223,7 @@ export class ClipboardManager {
     try {
       pastedData = JSON.parse(dataStr);
     } catch (e) {
-      // TODO: create text graph from pastedData
+      // TODO: create text graphics from pastedData
       return;
     }
 
@@ -236,7 +236,7 @@ export class ClipboardManager {
         pastedData.data
       )
     ) {
-      // TODO: create text graph from pastedData
+      // TODO: create text graphics from pastedData
       return;
     }
 
diff --git a/packages/core/src/control_handle_manager/control_handle_manager.ts b/packages/core/src/control_handle_manager/control_handle_manager.ts
index e4a689bf..6549e3a4 100644
--- a/packages/core/src/control_handle_manager/control_handle_manager.ts
+++ b/packages/core/src/control_handle_manager/control_handle_manager.ts
@@ -161,7 +161,7 @@ export class ControlHandleManager {
       handle.cy = point.y;
     }
 
-    // update n/s/w/e handle graph size
+    // update n/s/w/e handle graphics size
     const n = this.transformHandles.get('n')!;
     const s = this.transformHandles.get('s')!;
     const w = this.transformHandles.get('w')!;
@@ -208,37 +208,37 @@ export class ControlHandleManager {
     const ctx = this.editor.ctx;
     const rotate = rect ? getTransformAngle(rect.transform) : 0;
     handles.forEach((handle) => {
-      const graph = handle.graphics;
-      if (graph.type === GraphicsType.Path) {
+      const graphics = handle.graphics;
+      if (graphics.type === GraphicsType.Path) {
         // TODO:
       } else {
         const { x, y } = this.editor.sceneCoordsToViewport(
           handle.cx,
           handle.cy,
         );
-        graph.updateAttrs({
+        graphics.updateAttrs({
           transform: [
             1,
             0,
             0,
             1,
-            x - graph.attrs.width / 2,
-            y - graph.attrs.height / 2,
+            x - graphics.attrs.width / 2,
+            y - graphics.attrs.height / 2,
           ],
         });
       }
       if (rect && handle.isTransformHandle) {
-        graph.setRotate(rotate);
+        graphics.setRotate(rotate);
       }
       if (handle.rotation !== undefined) {
-        graph.setRotate(handle.rotation);
+        graphics.setRotate(handle.rotation);
       }
 
-      if (!graph.isVisible()) {
+      if (!graphics.isVisible()) {
         return;
       }
       ctx.save();
-      graph.draw(ctx);
+      graphics.draw(ctx);
       ctx.restore();
     });
   }
diff --git a/packages/core/src/ref_line.ts b/packages/core/src/ref_line.ts
index 1a5c07eb..20269578 100644
--- a/packages/core/src/ref_line.ts
+++ b/packages/core/src/ref_line.ts
@@ -61,12 +61,12 @@ export class RefLine {
       });
     }
 
-    for (const graph of refGraphicsSet) {
-      if (selectIdSet.has(graph.attrs.id)) {
+    for (const graphics of refGraphicsSet) {
+      if (selectIdSet.has(graphics.attrs.id)) {
         continue;
       }
 
-      const bbox = bboxToBboxWithMid(graph.getBbox());
+      const bbox = bboxToBboxWithMid(graphics.getBbox());
       if (!isBoxIntersect(viewportBbox, bbox)) {
         continue;
       }
@@ -107,7 +107,7 @@ export class RefLine {
        * top 和 bottom 要绘制水平参考线，不要绘制垂直参照线
        * left 和 right 要绘制垂直参照线，不要绘制水平参照线
        */
-      const bboxVerts = graph.getWorldBboxVerts();
+      const bboxVerts = graphics.getWorldBboxVerts();
 
       if (setting.get('snapToGrid')) {
         const gridSnapSpacingX = setting.get('gridSnapX');
diff --git a/packages/core/src/scene/scene_graph.ts b/packages/core/src/scene/scene_graph.ts
index 8099ac4a..d412a118 100644
--- a/packages/core/src/scene/scene_graph.ts
+++ b/packages/core/src/scene/scene_graph.ts
@@ -56,8 +56,8 @@ export class SceneGraph {
   }
 
   addItems(graphicsArr: SuikaGraphics[]) {
-    for (const graph of graphicsArr) {
-      this.editor.doc.addGraphics(graph);
+    for (const graphics of graphicsArr) {
+      this.editor.doc.addGraphics(graphics);
     }
   }
 
@@ -116,7 +116,7 @@ export class SceneGraph {
       this.grid.draw();
     }
 
-    /** draw hover graph outline and its control handle */
+    /** draw hover graphics outline and its control handle */
     if (this.highlightLayersOnHover && setting.get('highlightLayersOnHover')) {
       const hlItem = selectedElements.getHighlightedItem();
       if (hlItem && !selectedElements.hasItem(hlItem)) {
@@ -195,7 +195,7 @@ export class SceneGraph {
   });
 
   private drawGraphsOutline(
-    graphs: SuikaGraphics[],
+    graphicsArr: SuikaGraphics[],
     strokeWidth: number,
     stroke: string,
   ) {
@@ -212,9 +212,9 @@ export class SceneGraph {
     ctx.translate(dx, dy);
 
     strokeWidth /= zoom;
-    for (const graph of graphs) {
+    for (const graphics of graphicsArr) {
       ctx.save();
-      graph.drawOutline(ctx, stroke, strokeWidth);
+      graphics.drawOutline(ctx, stroke, strokeWidth);
       ctx.restore();
     }
     ctx.restore();
@@ -254,7 +254,7 @@ export class SceneGraph {
       const type = attrs.type;
       const Ctor = graphCtorMap[type!];
       if (!Ctor) {
-        console.error(`Unsupported graph type "${attrs.type}", ignore it`);
+        console.error(`Unsupported graphics type "${attrs.type}", ignore it`);
         continue;
       }
       children.push(new Ctor(attrs as any, { doc: this.editor.doc }));
diff --git a/packages/core/src/selected_elements.ts b/packages/core/src/selected_elements.ts
index dd7b1c97..3d5ae8f7 100644
--- a/packages/core/src/selected_elements.ts
+++ b/packages/core/src/selected_elements.ts
@@ -169,12 +169,12 @@ export class SelectedElements {
     this.setItems(parent.getChildren().filter((item) => !item.isLock()));
   }
 
-  setHoverItem(graph: SuikaGraphics | null) {
+  setHoverItem(graphics: SuikaGraphics | null) {
     const prevHoverItem = this.hoverItem;
-    this.hoverItem = graph;
-    this.setHighlightedItem(graph);
-    if (prevHoverItem !== graph) {
-      this.eventEmitter.emit('hoverItemChange', graph, this.hoverItem);
+    this.hoverItem = graphics;
+    this.setHighlightedItem(graphics);
+    if (prevHoverItem !== graphics) {
+      this.eventEmitter.emit('hoverItemChange', graphics, this.hoverItem);
     }
   }
 
@@ -182,13 +182,13 @@ export class SelectedElements {
     return this.hoverItem;
   }
 
-  setHighlightedItem(graph: SuikaGraphics | null) {
+  setHighlightedItem(graphics: SuikaGraphics | null) {
     const prevHighlightItem = this.highlightedItem;
-    this.highlightedItem = graph;
-    if (prevHighlightItem !== graph) {
+    this.highlightedItem = graphics;
+    if (prevHighlightItem !== graphics) {
       this.eventEmitter.emit(
         'highlightedItemChange',
-        graph,
+        graphics,
         this.highlightedItem,
       );
     }
diff --git a/packages/core/src/service/mutate_graphs_and_record.ts b/packages/core/src/service/mutate_graphs_and_record.ts
index 96b563c2..90626ee0 100644
--- a/packages/core/src/service/mutate_graphs_and_record.ts
+++ b/packages/core/src/service/mutate_graphs_and_record.ts
@@ -208,7 +208,7 @@ export const MutateGraphsAndRecord = {
   },
 
   /**
-   * show graphs when at least one graph is hidden
+   * show graphs when at least one graphics is hidden
    * and
    * hide graphs when all graphs are shown
    */
@@ -216,7 +216,7 @@ export const MutateGraphsAndRecord = {
     if (graphicsArr.length === 0) {
       return;
     }
-    // if at least one graph is hidden, show all graphs; otherwise, hide all graphs
+    // if at least one graphics is hidden, show all graphs; otherwise, hide all graphs
     const newVal = graphicsArr.some((item) => !item.isVisible());
 
     const transaction = new Transaction(editor);
@@ -242,7 +242,7 @@ export const MutateGraphsAndRecord = {
       return;
     }
 
-    // if at least one graph is unlocked, lock all graphs; otherwise, unlock all graphs
+    // if at least one graphics is unlocked, lock all graphs; otherwise, unlock all graphs
     const newLock = graphicsArr.some((item) => !item.isLock());
     const prevAttrs = graphicsArr.map((el) => ({ lock: el.attrs.lock }));
     graphicsArr.forEach((el) => {
@@ -260,7 +260,7 @@ export const MutateGraphsAndRecord = {
     );
   },
 
-  /** set name of graph */
+  /** set name of graphics */
   setGraphName(
     editor: SuikaEditor,
     graphics: SuikaGraphics,
@@ -272,7 +272,7 @@ export const MutateGraphsAndRecord = {
     });
     editor.commandManager.pushCommand(
       new SetGraphsAttrsCmd(
-        'update name of graph',
+        'update name of graphics',
         [graphics],
         { objectName },
         prevAttrs,
diff --git a/packages/core/src/setting.ts b/packages/core/src/setting.ts
index 6d07adfb..898a29fe 100644
--- a/packages/core/src/setting.ts
+++ b/packages/core/src/setting.ts
@@ -71,7 +71,7 @@ export class Setting {
       256,
     ],
 
-    drawGraphDefaultWidth: 100, // drawing graph default width if no drag
+    drawGraphDefaultWidth: 100, // drawing graphics default width if no drag
     drawGraphDefaultHeight: 100, // default height
 
     /**** ruler ****/
diff --git a/packages/core/src/to_svg.ts b/packages/core/src/to_svg.ts
index d16e38e5..4f6537a3 100644
--- a/packages/core/src/to_svg.ts
+++ b/packages/core/src/to_svg.ts
@@ -2,9 +2,11 @@ import { boxToRect, mergeBoxes } from '@suika/geo';
 
 import { type SuikaGraphics } from './graphs';
 
-export const toSVG = (graphs: SuikaGraphics[]) => {
+export const toSVG = (graphicsArr: SuikaGraphics[]) => {
   // FIXME: to sort
-  const mergedBbox = mergeBoxes(graphs.map((el) => el.getBboxWithStroke()));
+  const mergedBbox = mergeBoxes(
+    graphicsArr.map((el) => el.getBboxWithStroke()),
+  );
   const mergedRect = boxToRect(mergedBbox);
   const offset = {
     x: -mergedBbox.minX,
@@ -15,8 +17,8 @@ export const toSVG = (graphs: SuikaGraphics[]) => {
   const svgTail = `</svg>`;
 
   let content = '';
-  for (const graph of graphs) {
-    content += graph.toSVGSegment(offset);
+  for (const graphics of graphicsArr) {
+    content += graphics.toSVGSegment(offset);
   }
 
   return svgHead + content + svgTail;
diff --git a/packages/core/src/tools/tool_draw_graph.ts b/packages/core/src/tools/tool_draw_graph.ts
index 04dd11b1..a6d007c8 100644
--- a/packages/core/src/tools/tool_draw_graph.ts
+++ b/packages/core/src/tools/tool_draw_graph.ts
@@ -28,7 +28,7 @@ export abstract class DrawGraphTool implements ITool {
   /** lastPoint with snap when dragging */
   private lastMousePoint!: IPoint;
   /**
-   * use to calculate the offset, to change the graph's start point
+   * use to calculate the offset, to change the graphics's start point
    */
   private startPointWhenSpaceDown: IPoint | null = null;
   private lastDragPointWhenSpaceDown: IPoint | null = null;
@@ -119,8 +119,8 @@ export abstract class DrawGraphTool implements ITool {
     this.updateRect();
   }
   /**
-   * create graph, and give the original rect (width may be negative)
-   * noMove: if true, the graph will not move when drag
+   * create graphics, and give the original rect (width may be negative)
+   * noMove: if true, the graphics will not move when drag
    */
   protected abstract createGraph(
     rect: IRect,
@@ -137,7 +137,7 @@ export abstract class DrawGraphTool implements ITool {
   }
 
   /**
-   * update graph, and give the original rect (width may be negative)
+   * update graphics, and give the original rect (width may be negative)
    */
   protected updateGraph(rect: IRect) {
     rect = normalizeRect(rect);
@@ -194,9 +194,9 @@ export abstract class DrawGraphTool implements ITool {
       height, // height may be negative
     };
 
-    // whether to set the starting point as the center of the graph
+    // whether to set the starting point as the center of the graphics
     const isStartPtAsCenter = this.editor.hostEventManager.isAltPressing;
-    // whether to keep the graph square
+    // whether to keep the graphics square
     const keepSquare = this.editor.hostEventManager.isShiftPressing;
 
     let cx = 0;
diff --git a/packages/core/src/tools/tool_select/tool_select.ts b/packages/core/src/tools/tool_select/tool_select.ts
index 247754ad..47251675 100644
--- a/packages/core/src/tools/tool_select/tool_select.ts
+++ b/packages/core/src/tools/tool_select/tool_select.ts
@@ -38,7 +38,7 @@ export class SelectTool implements ITool {
   private readonly strategySelectRotation: SelectRotationTool;
   private readonly strategySelectResize: SelectResizeTool;
 
-  /** the graph should be removed from selected if not moved */
+  /** the graphics should be removed from selected if not moved */
   private graphShouldRemovedFromSelectedIfNotMoved: SuikaGraphics | null = null;
 
   constructor(private editor: SuikaEditor) {
diff --git a/packages/geo/src/geo/geo_resize_line.ts b/packages/geo/src/geo/geo_resize_line.ts
index 72730742..d2dfafac 100644
--- a/packages/geo/src/geo/geo_resize_line.ts
+++ b/packages/geo/src/geo/geo_resize_line.ts
@@ -6,7 +6,7 @@ import { distance } from './geo_point';
 
 /**
  * Get the new position of the line when resizing
- * we consider the graph with 0 height as a line
+ * we consider the graphics with 0 height as a line
  *
  * TODO: reuse, this is something same code in tool_draw_graph.ts
  */
diff --git a/packages/suika/package.json b/packages/suika/package.json
index 428d5b8d..1f836592 100644
--- a/packages/suika/package.json
+++ b/packages/suika/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@suika/suika",
   "version": "0.0.1",
-  "description": "a graph editor.",
+  "description": "a graphics editor.",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/packages/suika/src/components/LayerPanel/LayerPanel.tsx b/packages/suika/src/components/LayerPanel/LayerPanel.tsx
index 2c85f091..ba49216a 100644
--- a/packages/suika/src/components/LayerPanel/LayerPanel.tsx
+++ b/packages/suika/src/components/LayerPanel/LayerPanel.tsx
@@ -46,18 +46,18 @@ export const LayerPanel: FC = () => {
 
   const setEditorHlId = (id: string) => {
     if (editor) {
-      const graph = editor.doc.getGraphicsById(id) ?? null;
+      const graphics = editor.doc.getGraphicsById(id) ?? null;
 
-      editor.selectedElements.setHighlightedItem(graph);
+      editor.selectedElements.setHighlightedItem(graphics);
       editor.render();
     }
   };
 
   const setName = (id: string, newName: string) => {
     if (editor) {
-      const graph = editor.doc.getGraphicsById(id);
-      if (graph && graph.attrs.objectName !== newName) {
-        MutateGraphsAndRecord.setGraphName(editor, graph, newName);
+      const graphics = editor.doc.getGraphicsById(id);
+      if (graphics && graphics.attrs.objectName !== newName) {
+        MutateGraphsAndRecord.setGraphName(editor, graphics, newName);
         editor.render();
       }
     }
@@ -65,9 +65,9 @@ export const LayerPanel: FC = () => {
 
   const toggleVisible = (id: string) => {
     if (editor) {
-      const graph = editor.doc.getGraphicsById(id);
-      if (graph) {
-        MutateGraphsAndRecord.toggleVisible(editor, [graph]);
+      const graphics = editor.doc.getGraphicsById(id);
+      if (graphics) {
+        MutateGraphsAndRecord.toggleVisible(editor, [graphics]);
         editor.render();
       }
     }
@@ -75,9 +75,9 @@ export const LayerPanel: FC = () => {
 
   const toggleLock = (id: string) => {
     if (editor) {
-      const graph = editor.doc.getGraphicsById(id);
-      if (graph) {
-        MutateGraphsAndRecord.toggleLock(editor, [graph]);
+      const graphics = editor.doc.getGraphicsById(id);
+      if (graphics) {
+        MutateGraphsAndRecord.toggleLock(editor, [graphics]);
         editor.render();
       }
     }