update: change name to vue flow

* Add gif to readme

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -29,7 +29,7 @@ const connectionLineVisible = computed(
 )
 </script>
 <template>
-  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="revue-flow__edges">
+  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
     <g
       :transform="store.transform.length && `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`"

src/container/EdgeRenderer/Marker.vue

@@ -8,7 +8,7 @@ const props = defineProps<MarkerProps>()
 <template>
   <marker
     :id="props.id"
-    class="revue-flow__arrowhead"
+    class="vue-flow__arrowhead"
     markerWidth="12.5"
     markerHeight="12.5"
     viewBox="-10 -10 20 20"

src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
 </script>
 <template>
   <defs>
-    <Marker id="revue-flow__arrowclosed">
+    <Marker id="vue-flow__arrowclosed">
       <polyline
         :stroke="props.color"
         stroke-linecap="round"
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
         points="-5,-4 0,0 -5,4 -5,-4"
       />
     </Marker>
-    <Marker id="revue-flow__arrow">
+    <Marker id="vue-flow__arrow">
       <polyline
         :stroke="props.color"
         stroke-linecap="round"