diff --git a/console/frontend/src/views/VisualizePage.vue b/console/frontend/src/views/VisualizePage.vue
index f41896f9..9066477e 100644
--- a/console/frontend/src/views/VisualizePage.vue
+++ b/console/frontend/src/views/VisualizePage.vue
@@ -89,13 +89,23 @@ const state = ref<ModelType>(null);
 // Load data from URL
 const route = useRoute();
 const router = useRouter();
+const statePrefixV1 = "v1-";
+const unserializeState = (serialized: string): string | undefined => {
+  if (serialized.startsWith(statePrefixV1)) {
+    return LZString.decompressFromEncodedURIComponent(
+      serialized.substring(statePrefixV1.length),
+    );
+  }
+  // URL generated by the previous implementation
+  return LZString.decompressFromBase64(serialized);
+};
 const decodeState = (serialized: string | undefined): ModelType => {
   try {
     if (!serialized) {
       console.debug("no state");
       return null;
     }
-    const unserialized = LZString.decompressFromBase64(serialized);
+    const unserialized = unserializeState(serialized);
     if (!unserialized) {
       console.debug("empty state");
       return null;
@@ -108,9 +118,10 @@ const decodeState = (serialized: string | undefined): ModelType => {
 };
 const encodeState = (state: ModelType) => {
   if (state === null) return "";
-  return LZString.compressToBase64(
+  const serialized = LZString.compressToEncodedURIComponent(
     JSON.stringify(state, Object.keys(state).sort()),
   );
+  return statePrefixV1 + serialized;
 };
 watch(
   () => props.routeState,