diff --git a/docs/Links-Ports.md b/docs/Links-Ports.md
index 8de11a4..a211770 100644
--- a/docs/Links-Ports.md
+++ b/docs/Links-Ports.md
@@ -1,7 +1,13 @@
 ### Ports
 
 ```js
-import Diagram, { Canvas, createSchema, useSchema, useCanvas, CanvasControls } from 'beautiful-react-diagrams';
+import Diagram, {
+  Canvas,
+  createSchema,
+  useSchema,
+  useCanvas,
+  CanvasControls,
+} from 'beautiful-react-diagrams'
 
 const initialSchema = createSchema({
   nodes: [
@@ -9,8 +15,8 @@ const initialSchema = createSchema({
       content: 'Start',
       coordinates: [100, 150],
       disableDrag: true,
-      outputs: [ 
-        { id: 'port-1', label: 'Source 1' }, 
+      outputs: [
+        { id: 'port-1', label: 'Source 1' },
         { id: 'port-2', label: 'Source 2' },
       ],
       outputsAlignment: 'right',
@@ -18,17 +24,29 @@ const initialSchema = createSchema({
     {
       content: 'Middle',
       coordinates: [300, 150],
-      inputs: [
-        { id: 'port-3' },
-        { id: 'port-4' },
-      ],
-      outputs: [
-        { id: 'port-5' },
-        { id: 'port-6' },
-      ],
+      inputs: [{ id: 'port-3' }, { id: 'port-4' }],
+      outputs: [{ id: 'port-5' }, { id: 'port-6' }],
       inputsAlignment: 'left',
       outputsAlignment: 'right',
     },
+    {
+      content: 'StartDEBUG',
+      coordinates: [600, 50],
+      disableDrag: false,
+      outputs: [
+        { id: 'portDEBUG-1', label: 'Source 1' },
+        { id: 'portDEBUG-2', label: 'Source 2' },
+      ],
+      outputsAlignment: 'bottom',
+    },
+    {
+      content: 'MiddleDEBUG',
+      coordinates: [750, 350],
+      inputs: [{ id: 'portDEBUG-3' }, { id: 'portDEBUG-4' }],
+      outputs: [{ id: 'portDEBUG-5' }, { id: 'portDEBUG-6' }],
+      inputsAlignment: 'top',
+      outputsAlignment: 'bottom',
+    },
     /*{
       content: 'End',
       coordinates: [600, 150],
@@ -40,56 +58,68 @@ const initialSchema = createSchema({
     },*/
   ],
   links: [
-    { input: 'port-1',  output: 'port-4' },
-  ]
-});
+    { input: 'port-1', output: 'port-4' },
+    { input: 'portDEBUG-1', output: 'portDEBUG-4' },
+  ],
+})
 
 const UncontrolledDiagram = () => {
-  const [canvasState, handlers] = useCanvas(); // creates canvas state
-  const [schema, { onChange }] = useSchema(initialSchema); // creates diagrams schema
+  const [canvasState, handlers] = useCanvas() // creates canvas state
+  const [schema, { onChange }] = useSchema(initialSchema) // creates diagrams schema
 
   return (
     <div style={{ height: '30rem' }}>
       <Canvas {...canvasState} {...handlers}>
-         <Diagram schema={schema} onChange={onChange} />
-         <CanvasControls />
+        <Diagram schema={schema} onChange={onChange} />
+        <CanvasControls />
       </Canvas>
     </div>
-  );
-};
+  )
+}
 
-<UncontrolledDiagram />
+;<UncontrolledDiagram />
 ```
 
 ### Readonly Links
 
 ```js
-import Diagram, { Canvas, createSchema, useSchema, useCanvas, CanvasControls } from 'beautiful-react-diagrams';
+import Diagram, {
+  Canvas,
+  createSchema,
+  useSchema,
+  useCanvas,
+  CanvasControls,
+} from 'beautiful-react-diagrams'
 
 // the diagram model
 const initialSchema = createSchema({
   nodes: [
-    { id: 'node-1', content: 'Hey Jude', coordinates: [312, 27], },
-    { id: 'node-2', content: 'Don\'t', coordinates: [330, 90], },
-    { id: 'node-3', content: 'be afraid', coordinates: [100, 320], },
-    { id: 'node-4', content: 'let me down', coordinates: [306, 332], },
-    { id: 'node-5', content: 'make it bad', coordinates: [515, 330], },
-    { id: 'node-6', content: 'Take a sad song', coordinates: [295, 460], },
+    { id: 'node-1', content: 'Hey Jude', coordinates: [312, 27] },
+    { id: 'node-2', content: "Don't", coordinates: [330, 90] },
+    { id: 'node-3', content: 'be afraid', coordinates: [100, 320] },
+    { id: 'node-4', content: 'let me down', coordinates: [306, 332] },
+    { id: 'node-5', content: 'make it bad', coordinates: [515, 330] },
+    { id: 'node-6', content: 'Take a sad song', coordinates: [295, 460] },
   ],
   links: [
-    { input: 'node-1',  output: 'node-2', readonly: true, className: 'my-custom-link-class' },
-    { input: 'node-2',  output: 'node-3', readonly: true },
-    { input: 'node-2',  output: 'node-4', readonly: true },
-    { input: 'node-2',  output: 'node-5', readonly: true },
-    { input: 'node-3',  output: 'node-6', readonly: true },
-    { input: 'node-4',  output: 'node-6', readonly: true },
-    { input: 'node-5',  output: 'node-6', readonly: true },
-  ]
-});
+    {
+      input: 'node-1',
+      output: 'node-2',
+      readonly: true,
+      className: 'my-custom-link-class',
+    },
+    { input: 'node-2', output: 'node-3', readonly: true },
+    { input: 'node-2', output: 'node-4', readonly: true },
+    { input: 'node-2', output: 'node-5', readonly: true },
+    { input: 'node-3', output: 'node-6', readonly: true },
+    { input: 'node-4', output: 'node-6', readonly: true },
+    { input: 'node-5', output: 'node-6', readonly: true },
+  ],
+})
 
 const DiagramExample = () => {
-  const [ canvasStates, canvasStateHandlers] = useCanvas(); // creates canvas states    
-  const [schema, { onChange }] = useSchema(initialSchema); // creates diagrams schema
+  const [canvasStates, canvasStateHandlers] = useCanvas() // creates canvas states
+  const [schema, { onChange }] = useSchema(initialSchema) // creates diagrams schema
 
   return (
     <div style={{ height: '35rem' }}>
@@ -98,8 +128,8 @@ const DiagramExample = () => {
         <CanvasControls />
       </Canvas>
     </div>
-  );
-};
+  )
+}
 
-<DiagramExample />
+;<DiagramExample />
 ```
diff --git a/src/components/Segment/makePath.js b/src/components/Segment/makePath.js
index c580abc..0a6b13f 100644
--- a/src/components/Segment/makePath.js
+++ b/src/components/Segment/makePath.js
@@ -25,10 +25,28 @@ const makePath = (from, to, inputEntityType, outputEntityType, inputAlignment, o
     // if both ports are vertically aligned
     // TODO: this formula is wrong, needs to be fixed
     if (isVerticalAlignment(inputAlignment) || isVerticalAlignment(outputAlignment)) {
-      const sourceCurve = sourceX + Math.abs(targetX - sourceX) * offsetCurve;
-      const targetCurve = targetX - Math.abs(targetX - sourceX) * offsetCurve;
+      // ********************** Solution with original naming convention *********************
+      // Need to identify which element has the lowest Y
+      // const sourceCurve = targetY - Math.abs(targetY - sourceY) * offsetCurve;
+      // const targetCurve = sourceY + Math.abs(targetY - sourceY) * offsetCurve;
 
-      return `M ${sourceX} ${sourceY} C ${sourceCurve} ${sourceY} ${targetCurve} ${targetY} ${targetX} ${targetY}`;
+      // return `M ${sourceX} ${sourceY} C ${sourceX} ${sourceCurve} ${targetX} ${targetCurve} ${targetX} ${targetY}`;
+
+      // ********************** Solution with proposed naming convention *********************
+      // Proposal to rename variables
+      // C accepts two control points and a target to draw the bezier.
+      let controlOffset = Math.abs(targetY - sourceY) * offsetCurve;
+      // The initial implementation assumes a source is above the target, the same
+      // goes for horizontal alignment, it assume the source is to the left of the target
+      if (targetY < sourceY) {
+        controlOffset = -controlOffset;
+      }
+      const control1X = sourceX;
+      const control1Y = targetY - controlOffset;
+      const control2X = targetX;
+      const control2Y = sourceY + controlOffset;
+
+      return `M ${sourceX} ${sourceY} C ${control1X} ${control1Y} ${control2X} ${control2Y} ${targetX} ${targetY}`;
     }
 
     // if input is vertical and output is horizontal