diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7e345ad..e6550ac 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -87,6 +87,8 @@ Ref: posts.user_id > users.id // many-to-one
           vertexAddable: false,
           vertexDeletable: false,
         },
+        panning: true,
+        mousewheel: true,
       });
       graph.use(
         new Snapline({
diff --git a/src/parser/parser.ts b/src/parser/parser.ts
index 7e39c8d..25b8a1e 100644
--- a/src/parser/parser.ts
+++ b/src/parser/parser.ts
@@ -8,12 +8,16 @@ function parseFieldToPort(
   schemaName: string,
   tableName: string,
 ): any {
+  let label = field.name;
+  if (field.pk) {
+    label += ' 🔑';
+  }
   return {
     id: `${schemaName}-${tableName}-${field.name}`,
     group: 'list',
     attrs: {
       portNameLabel: {
-        text: field.name,
+        text: label,
       },
       portTypeLabel: {
         text: field.type.type_name || 'unknown',
@@ -68,7 +72,7 @@ function parseRef(ref: Ref): any {
         attrs: {
           label: {
             text: source.relation,
-            stroke: '#aaa',
+            fontFamily: 'monospace',
           },
         },
         position: 0.2,
@@ -77,7 +81,7 @@ function parseRef(ref: Ref): any {
         attrs: {
           label: {
             text: target.relation,
-            stroke: '#aaa',
+            fontFamily: 'monospace',
           },
         },
         position: 0.8,