diff --git a/src/components/EditorCanvas/Relationship.jsx b/src/components/EditorCanvas/Relationship.jsx
index 9f512a9..3667aea 100644
--- a/src/components/EditorCanvas/Relationship.jsx
+++ b/src/components/EditorCanvas/Relationship.jsx
@@ -5,6 +5,8 @@ import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
 import { useTranslation } from "react-i18next";
 import { SideSheet } from "@douyinfe/semi-ui";
 import RelationshipInfo from "../EditorSidePanel/RelationshipsTab/RelationshipInfo";
+import { CrowOM, CrowOO, CrowZM } from "./RelationshipFormat";
+
 
 export default function Relationship({ data }) {
   const { settings } = useSettings();
@@ -13,26 +15,32 @@ export default function Relationship({ data }) {
   const { selectedElement, setSelectedElement } = useSelect();
   const { t } = useTranslation();
   const pathRef = useRef();
-
+  let direction = 1;
   let cardinalityStart = "1";
   let cardinalityEnd = "1";
+  let cardinalityvar;
+  let type = 10;
+  let relationshipType=(5,type);
 
   switch (data.cardinality) {
     // the translated values are to ensure backwards compatibility
     case t(Cardinality.MANY_TO_ONE):
     case Cardinality.MANY_TO_ONE:
       cardinalityStart = "n";
-      cardinalityEnd = "1";
+      cardinalityEnd = "(1,*)";
+      cardinalityvar="1";
       break;
     case t(Cardinality.ONE_TO_MANY):
     case Cardinality.ONE_TO_MANY:
       cardinalityStart = "1";
       cardinalityEnd = "n";
+      cardinalityvar="2";
       break;
     case t(Cardinality.ONE_TO_ONE):
     case Cardinality.ONE_TO_ONE:
       cardinalityStart = "1";
       cardinalityEnd = "1";
+      cardinalityvar="3";
       break;
     default:
       break;
@@ -45,13 +53,14 @@ export default function Relationship({ data }) {
 
   const cardinalityOffset = 28;
 
+
   if (pathRef.current) {
     const pathLength = pathRef.current.getTotalLength();
     const point1 = pathRef.current.getPointAtLength(cardinalityOffset);
     cardinalityStartX = point1.x;
     cardinalityStartY = point1.y;
     const point2 = pathRef.current.getPointAtLength(
-      pathLength - cardinalityOffset,
+      pathLength,
     );
     cardinalityEndX = point2.x;
     cardinalityEndY = point2.y;
@@ -79,7 +88,9 @@ export default function Relationship({ data }) {
         .scrollIntoView({ behavior: "smooth" });
     }
   };
-
+  if (cardinalityEndX < cardinalityStartX){
+    direction=-1
+  }
   return (
     <>
       <g className="select-none group" onDoubleClick={edit}>
@@ -102,48 +113,16 @@ export default function Relationship({ data }) {
           stroke="gray"
           className="group-hover:stroke-sky-700"
           fill="none"
+          stroke-dasharray={relationshipType} 
           strokeWidth={2}
           cursor="pointer"
         />
-        {pathRef.current && settings.showCardinality && (
-          <>
-            <circle
-              cx={cardinalityStartX}
-              cy={cardinalityStartY}
-              r="12"
-              fill="grey"
-              className="group-hover:fill-sky-700"
-            />
-            <text
-              x={cardinalityStartX}
-              y={cardinalityStartY}
-              fill="white"
-              strokeWidth="0.5"
-              textAnchor="middle"
-              alignmentBaseline="middle"
-            >
-              {cardinalityStart}
-            </text>
-            <circle
-              cx={cardinalityEndX}
-              cy={cardinalityEndY}
-              r="12"
-              fill="grey"
-              className="group-hover:fill-sky-700"
-            />
-            <text
-              x={cardinalityEndX}
-              y={cardinalityEndY}
-              fill="white"
-              strokeWidth="0.5"
-              textAnchor="middle"
-              alignmentBaseline="middle"
-            >
-              {cardinalityEnd}
-            </text>
-          </>
-        )}
+
+        {CrowOM(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityEnd)}
+        {CrowOO(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityEnd)}
+        {CrowZM(pathRef.current,settings.showCardinality, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityEnd)}
       </g>
+      
       <SideSheet
         title={t("edit")}
         size="small"
diff --git a/src/components/EditorCanvas/RelationshipFormat.jsx b/src/components/EditorCanvas/RelationshipFormat.jsx
new file mode 100644
index 0000000..60bb0de
--- /dev/null
+++ b/src/components/EditorCanvas/RelationshipFormat.jsx
@@ -0,0 +1,186 @@
+export function CrowOM(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityEnd){
+    return( 
+        pathRef && settings && (cardinalityvar==2)  &&(
+            <>
+              <line
+                x1={cardinalityEndX-(20*direction)}
+                y1={cardinalityEndY+15}
+                x2={cardinalityEndX-(20*direction)}
+                y2={cardinalityEndY-15}
+                stroke="gray"
+                strokeWidth='2'
+                className="group-hover:fill-sky-700"
+              />
+                <line
+                    x1={cardinalityEndX-(20*direction)}
+                    y1={cardinalityEndY}
+                    x2={cardinalityEndX+1}
+                    y2={cardinalityEndY-10}
+                    stroke="gray"
+                    strokeWidth='2'
+                    className="group-hover:fill-sky-700"
+                />
+                <line
+                    x1={cardinalityEndX-20*direction}
+                    y1={cardinalityEndY}
+                    x2={cardinalityEndX+1}
+                    y2={cardinalityEndY+10}
+                    stroke="gray"
+                    strokeWidth='2'
+                    className="group-hover:fill-sky-700"
+                />
+                <text
+                    x={cardinalityStartX}
+                    y={cardinalityStartY-10}
+                    fill="black"
+                    strokeWidth="0.5"
+                    textAnchor="middle"
+                    alignmentBaseline="middle"
+                >
+                    {cardinalityEnd}
+                </text>
+                <line
+                  x1={cardinalityStartX-(15*direction)}
+                  y1={cardinalityStartY+10}
+                  x2={cardinalityStartX-(15*direction)}
+                  y2={cardinalityStartY-10}
+                  stroke="gray"
+                  strokeWidth='2'
+                  className="group-hover:fill-sky-700"
+                />
+                <line
+                  x1={cardinalityStartX-(10*direction)}
+                  y1={cardinalityStartY+10}
+                  x2={cardinalityStartX-(10*direction)}
+                  y2={cardinalityStartY-10}
+                  stroke="gray"
+                  strokeWidth='2'
+                  className="group-hover:fill-sky-700"
+                />
+            </>
+        )
+    )
+}
+
+export function CrowOO(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityEnd){
+    return( 
+        pathRef && settings && cardinalityvar==3  &&(
+            <>  
+            {console.log(settings) }        
+            <line
+              x1={cardinalityEndX-(15*direction)}
+              y1={cardinalityEndY+10}
+              x2={cardinalityEndX-(15*direction)}
+              y2={cardinalityEndY-10}
+              stroke="gray"
+              strokeWidth='2'
+              className="group-hover:fill-sky-700"
+            />
+            
+            <line
+              x1={cardinalityEndX-(10*direction)}
+              y1={cardinalityEndY+10}
+              x2={cardinalityEndX-(10*direction)}
+              y2={cardinalityEndY-10}
+              stroke="gray"
+              strokeWidth='2'
+              className="group-hover:fill-sky-700"
+            />
+            <line
+              x1={cardinalityStartX-(15*direction)}
+              y1={cardinalityStartY+10}
+              x2={cardinalityStartX-(15*direction)}
+              y2={cardinalityStartY-10}
+              stroke="gray"
+              strokeWidth='2'
+              className="group-hover:fill-sky-700"
+            />
+            <line
+              x1={cardinalityStartX-(10*direction)}
+              y1={cardinalityStartY+10}
+              x2={cardinalityStartX-(10*direction)}
+              y2={cardinalityStartY-10}
+              stroke="gray"
+              strokeWidth='2'
+              className="group-hover:fill-sky-700"
+            />
+            
+            <text
+              x={cardinalityStartX}
+              y={cardinalityStartY-15}
+              fill="black"
+              strokeWidth="0.5"
+              textAnchor="middle"
+              alignmentBaseline="middle"
+            >
+              {cardinalityEnd}
+            </text>
+            </>
+        )
+    )
+}
+
+
+export function CrowZM(pathRef, settings, cardinalityvar, cardinalityEndX, cardinalityEndY, cardinalityStartX, cardinalityStartY,  direction, cardinalityEnd){
+  return( 
+      pathRef && settings && (cardinalityvar==1)  &&(
+          <>
+            <circle
+              cx={cardinalityEndX-24}
+              cy={cardinalityEndY}
+              r="4"
+              stroke="gray"
+              strokeWidth='2'
+              fill="none"
+              className="group-hover:fill-sky-700"
+            />
+              <line
+                  x1={cardinalityEndX-(20*direction)}
+                  y1={cardinalityEndY}
+                  x2={cardinalityEndX+1}
+                  y2={cardinalityEndY-10}
+                  stroke="gray"
+                  strokeWidth='2'
+                  className="group-hover:fill-sky-700"
+              />
+              <line
+                  x1={cardinalityEndX-20*direction}
+                  y1={cardinalityEndY}
+                  x2={cardinalityEndX+1}
+                  y2={cardinalityEndY+10}
+                  stroke="gray"
+                  strokeWidth='2'
+                  className="group-hover:fill-sky-700"
+              />
+              <text
+                  x={cardinalityStartX}
+                  y={cardinalityStartY-10}
+                  fill="black"
+                  strokeWidth="0.5"
+                  textAnchor="middle"
+                  alignmentBaseline="middle"
+              >
+                  {cardinalityEnd}
+              </text>
+              <line
+                x1={cardinalityStartX-(15*direction)}
+                y1={cardinalityStartY+10}
+                x2={cardinalityStartX-(15*direction)}
+                y2={cardinalityStartY-10}
+                stroke="gray"
+                strokeWidth='2'
+                className="group-hover:fill-sky-700"
+              />
+              <line
+                x1={cardinalityStartX-(10*direction)}
+                y1={cardinalityStartY+10}
+                x2={cardinalityStartX-(10*direction)}
+                y2={cardinalityStartY-10}
+                stroke="gray"
+                strokeWidth='2'
+                className="group-hover:fill-sky-700"
+              />
+          </>
+      )
+  )
+}
\ No newline at end of file