diff --git a/examples/simple-react/src/SimpleAsyncapi.tsx b/examples/simple-react/src/SimpleAsyncapi.tsx
index 8e10e20..4428932 100644
--- a/examples/simple-react/src/SimpleAsyncapi.tsx
+++ b/examples/simple-react/src/SimpleAsyncapi.tsx
@@ -230,7 +230,7 @@ function Asyncapi() {
   let node;
   if (document !== undefined) {
     node = (
-      <ApplicationView asyncapi={{ document }} />
+      <ApplicationView asyncapi={{ document }} edgeType={'default'} />
     );
   } else {
     node = <h1>Wait...</h1>;
diff --git a/examples/simple-react/src/SimpleSystem.tsx b/examples/simple-react/src/SimpleSystem.tsx
index 40f964e..c991f7a 100644
--- a/examples/simple-react/src/SimpleSystem.tsx
+++ b/examples/simple-react/src/SimpleSystem.tsx
@@ -5,6 +5,7 @@ function App() {
     <div className="App">
       <SystemView
         includeControls={true}
+        edgeType={'smoothstep'}
         applications={[
           {
             application: {
diff --git a/library/src/types.ts b/library/src/types.ts
index 19d9d4e..bab3b33 100644
--- a/library/src/types.ts
+++ b/library/src/types.ts
@@ -114,3 +114,10 @@ export interface OutgoingNodeProps {
 export interface LayoutProps {
   elementsToRender: FlowElement[];
 }
+
+export type EdgeType =
+  | 'smoothstep'
+  | 'step'
+  | 'straight'
+  | 'floating'
+  | 'default';
diff --git a/library/src/visualiser/helpers/collect-nodes.ts b/library/src/visualiser/helpers/collect-nodes.ts
index 298385f..794cf5c 100644
--- a/library/src/visualiser/helpers/collect-nodes.ts
+++ b/library/src/visualiser/helpers/collect-nodes.ts
@@ -10,43 +10,50 @@ import {
   ApplicationServerData,
   MessageData,
   SystemViewData,
+  EdgeType,
 } from '../../types';
 
-export function collectApplicationNodes({
-  asyncapi,
-  application,
-  incomingOperations,
-  outgoingOperations,
-}: ApplicationViewData): Array<FlowElement> {
+export function collectApplicationNodes(
+  {
+    asyncapi,
+    application,
+    incomingOperations,
+    outgoingOperations,
+  }: ApplicationViewData,
+  edgeType: EdgeType = 'smoothstep',
+): Array<FlowElement> {
   const nodes: Array<FlowElement> = [];
 
   if (asyncapi) {
-    nodes.push(...collectAsyncAPINodes(asyncapi));
+    nodes.push(...collectAsyncAPINodes(asyncapi, { edgeType }));
   } else if (application) {
     nodes.push(...createApplicationNode(application));
   }
 
   if (incomingOperations) {
     incomingOperations.forEach(op => {
-      nodes.push(...createIncomingNode(op));
+      nodes.push(...createIncomingNode(op, edgeType));
     });
   }
   if (outgoingOperations) {
     outgoingOperations.forEach(op => {
-      nodes.push(...createOutgoingNode(op));
+      nodes.push(...createOutgoingNode(op, edgeType));
     });
   }
 
   return nodes;
 }
 
-export function collectApplicationFocusNodes({
-  asyncapi,
-  application,
-  external,
-  incomingOperations,
-  outgoingOperations,
-}: ApplicationFocusViewData): Array<FlowElement> {
+export function collectApplicationFocusNodes(
+  {
+    asyncapi,
+    application,
+    external,
+    incomingOperations,
+    outgoingOperations,
+  }: ApplicationFocusViewData,
+  edgeType: EdgeType = 'smoothstep',
+): Array<FlowElement> {
   const nodes: Array<FlowElement> = [];
   const leadApplicationIncomingChannels: string[] = [];
   const leadApplicationOutgoingChannels: string[] = [];
@@ -54,20 +61,20 @@ export function collectApplicationFocusNodes({
   if (asyncapi) {
     const createIncomingNodeFn = (data: IncomingNodeData) => {
       leadApplicationIncomingChannels.push(data.id);
-      return createIncomingNode(data);
+      return createIncomingNode(data, edgeType);
     };
     const createOutgoingNodeFn = (data: OutgoingNodeData) => {
       leadApplicationOutgoingChannels.push(data.id);
-      return createOutgoingNode(data);
+      return createOutgoingNode(data, edgeType);
     };
 
     nodes.push(
-      ...collectAsyncAPINodes(
-        asyncapi,
-        createApplicationNode,
+      ...collectAsyncAPINodes(asyncapi, {
+        createApplicationNodeFn: createApplicationNode,
         createIncomingNodeFn,
         createOutgoingNodeFn,
-      ),
+        edgeType,
+      }),
     );
   } else if (application) {
     nodes.push(...createApplicationNode(application));
@@ -75,13 +82,13 @@ export function collectApplicationFocusNodes({
 
   if (incomingOperations) {
     incomingOperations.forEach(op => {
-      nodes.push(...createIncomingNode(op));
+      nodes.push(...createIncomingNode(op, edgeType));
       leadApplicationIncomingChannels.push(op.id);
     });
   }
   if (outgoingOperations) {
     outgoingOperations.forEach(op => {
-      nodes.push(...createOutgoingNode(op));
+      nodes.push(...createOutgoingNode(op, edgeType));
       leadApplicationOutgoingChannels.push(op.id);
     });
   }
@@ -106,12 +113,12 @@ export function collectApplicationFocusNodes({
     external.forEach(externalApp => {
       if (externalApp.asyncapi) {
         nodes.push(
-          ...collectAsyncAPINodes(
-            externalApp.asyncapi,
-            createExternalApplicationNode,
+          ...collectAsyncAPINodes(externalApp.asyncapi, {
+            createApplicationNodeFn: createExternalApplicationNode,
             createIncomingNodeFn,
             createOutgoingNodeFn,
-          ),
+            edgeType,
+          }),
         );
       } else if (externalApp.application) {
         nodes.push(...createExternalApplicationNode(externalApp.application));
@@ -129,9 +136,10 @@ export function collectApplicationFocusNodes({
   return nodes;
 }
 
-export function collectSystemNodes({
-  applications = [],
-}: SystemViewData): Array<FlowElement> {
+export function collectSystemNodes(
+  { applications = [] }: SystemViewData,
+  edgeType: EdgeType = 'floating',
+): Array<FlowElement> {
   const nodes: Array<FlowElement> = [];
   const outgoingConnections: { [key: string]: string[] } = {};
   const incomingConnections: { [key: string]: string[] } = {};
@@ -158,12 +166,12 @@ export function collectSystemNodes({
 
   applications.forEach(app => {
     if (app.asyncapi) {
-      collectAsyncAPINodes(
-        app.asyncapi,
+      collectAsyncAPINodes(app.asyncapi, {
         createApplicationNodeFn,
         createOutgoingNodeFn,
         createIncomingNodeFn,
-      );
+        edgeType,
+      });
     } else if (app.application) {
       nodes.push(...createApplicationNode(app.application));
     }
@@ -182,7 +190,7 @@ export function collectSystemNodes({
         for (const incomingApp of incomingConnections[uniqueChannel]) {
           const edge = {
             id: `${appId}-to-${incomingApp}`,
-            type: 'floating',
+            type: edgeType,
             style: { stroke: 'orange', strokeWidth: 4 },
             source: appId,
             target: incomingApp,
@@ -196,11 +204,19 @@ export function collectSystemNodes({
   return nodes;
 }
 
-export function collectAsyncAPINodes(
+function collectAsyncAPINodes(
   { document, topExtended }: AsyncapiApplicationData,
-  createApplicationNodeFn: typeof createApplicationNode = createApplicationNode,
-  createIncomingNodeFn: typeof createIncomingNode = createIncomingNode,
-  createOutgoingNodeFn: typeof createOutgoingNode = createOutgoingNode,
+  {
+    createApplicationNodeFn = createApplicationNode,
+    createIncomingNodeFn = createIncomingNode,
+    createOutgoingNodeFn = createOutgoingNode,
+    edgeType = 'floating',
+  }: {
+    createApplicationNodeFn?: typeof createApplicationNode;
+    createIncomingNodeFn?: typeof createIncomingNode;
+    createOutgoingNodeFn?: typeof createOutgoingNode;
+    edgeType?: EdgeType;
+  },
 ): Array<FlowElement> {
   const nodes: Array<FlowElement> = [];
   const documentTitle = document.info().title();
@@ -216,13 +232,16 @@ export function collectAsyncAPINodes(
         });
 
       nodes.push(
-        ...createIncomingNodeFn({
-          id: `incoming_${channelId}`,
-          channel: channelPath,
-          description: channel.description() || 'No description',
-          messages,
-          forApplication: documentTitle,
-        }),
+        ...createIncomingNodeFn(
+          {
+            id: `incoming_${channelId}`,
+            channel: channelPath,
+            description: channel.description() || 'No description',
+            messages,
+            forApplication: documentTitle,
+          },
+          edgeType,
+        ),
       );
     } else if (channel.hasSubscribe()) {
       const messages: MessageData[] = channel
@@ -233,13 +252,16 @@ export function collectAsyncAPINodes(
         });
 
       nodes.push(
-        ...createOutgoingNodeFn({
-          id: `outgoing_${channelId}`,
-          channel: channelPath,
-          description: channel.description() || 'No description',
-          messages,
-          forApplication: documentTitle,
-        }),
+        ...createOutgoingNodeFn(
+          {
+            id: `outgoing_${channelId}`,
+            channel: channelPath,
+            description: channel.description() || 'No description',
+            messages,
+            forApplication: documentTitle,
+          },
+          edgeType,
+        ),
       );
     }
   }
@@ -323,7 +345,10 @@ export function createExternalApplicationNode(
   return [externalOutgoing, externalIncoming];
 }
 
-export function createIncomingNode(data: IncomingNodeData): Array<FlowElement> {
+export function createIncomingNode(
+  data: IncomingNodeData,
+  edgeType: EdgeType,
+): Array<FlowElement> {
   const appId = data.forApplication || '';
   const incomingNode: Node = {
     id: data.id,
@@ -333,7 +358,7 @@ export function createIncomingNode(data: IncomingNodeData): Array<FlowElement> {
   };
   const connectionEdge: Edge = {
     id: `incoming-${appId}-${data.id}`,
-    type: 'smoothstep',
+    type: edgeType,
     style: { stroke: '#7ee3be', strokeWidth: 4 },
     target: appId,
     source: data.id,
@@ -357,7 +382,10 @@ export function createExternalIncomingNode(
   ] as Edge[];
 }
 
-export function createOutgoingNode(data: OutgoingNodeData): Array<FlowElement> {
+export function createOutgoingNode(
+  data: OutgoingNodeData,
+  edgeType: EdgeType,
+): Array<FlowElement> {
   const appId = data.forApplication || '';
   const outgoingNode: Node = {
     id: data.id,
@@ -367,7 +395,7 @@ export function createOutgoingNode(data: OutgoingNodeData): Array<FlowElement> {
   };
   const connectionEdge: Edge = {
     id: `outgoing-${appId}-${data.id}`,
-    type: 'smoothstep',
+    type: edgeType,
     style: { stroke: 'orange', strokeWidth: 4 },
     source: appId,
     target: data.id,
diff --git a/library/src/visualiser/react-flow-renderer/ApplicationFocusView.tsx b/library/src/visualiser/react-flow-renderer/ApplicationFocusView.tsx
index b0bb136..a82eba1 100644
--- a/library/src/visualiser/react-flow-renderer/ApplicationFocusView.tsx
+++ b/library/src/visualiser/react-flow-renderer/ApplicationFocusView.tsx
@@ -11,7 +11,7 @@ import nodeTypes from '../../components/react-flow-renderer-nodes';
 import FloatingEdge from '../../components/react-flow-renderer-nodes/FloatingEdge';
 import { collectApplicationFocusNodes } from '../helpers/collect-nodes';
 
-import { ApplicationFocusViewData, LayoutProps } from '../../types';
+import { ApplicationFocusViewData, EdgeType, LayoutProps } from '../../types';
 
 const edgeTypes: EdgeTypesType = {
   floating: FloatingEdge,
@@ -23,6 +23,7 @@ export interface ApplicationFocusViewProps extends ApplicationFocusViewData {
   ) => React.JSXElementConstructor<LayoutProps>;
   sideMenu?: () => React.JSXElementConstructor<any>;
   includeControls?: boolean;
+  edgeType?: EdgeType;
 }
 
 export const ApplicationFocusView: React.FunctionComponent<ApplicationFocusViewProps> = ({
@@ -44,15 +45,19 @@ export const ApplicationFocusView: React.FunctionComponent<ApplicationFocusViewP
     );
   },
   includeControls = false,
+  edgeType = 'smoothstep',
 }) => {
   const [loaded, setLoaded] = useState(false);
-  const elements = collectApplicationFocusNodes({
-    asyncapi,
-    application,
-    external,
-    incomingOperations,
-    outgoingOperations,
-  });
+  const elements = collectApplicationFocusNodes(
+    {
+      asyncapi,
+      application,
+      external,
+      incomingOperations,
+      outgoingOperations,
+    },
+    edgeType,
+  );
 
   const handleLoaded = (reactFlowInstance: any) => {
     setLoaded(true);
diff --git a/library/src/visualiser/react-flow-renderer/ApplicationView.tsx b/library/src/visualiser/react-flow-renderer/ApplicationView.tsx
index a2e164f..461c6d5 100644
--- a/library/src/visualiser/react-flow-renderer/ApplicationView.tsx
+++ b/library/src/visualiser/react-flow-renderer/ApplicationView.tsx
@@ -4,11 +4,17 @@ import ReactFlow, {
   BackgroundVariant,
   FlowElement,
   Controls,
+  EdgeTypesType,
 } from 'react-flow-renderer';
 import { ColumnLayout } from '../../components/layouts';
 import { collectApplicationNodes } from '../helpers/collect-nodes';
 import nodeTypes from '../../components/react-flow-renderer-nodes';
-import { ApplicationViewData, LayoutProps } from '../../types';
+import { ApplicationViewData, EdgeType, LayoutProps } from '../../types';
+import FloatingEdge from '../../components/react-flow-renderer-nodes/FloatingEdge';
+
+const edgeTypes: EdgeTypesType = {
+  floating: FloatingEdge,
+};
 
 export interface ApplicationViewProps extends ApplicationViewData {
   layout?: (
@@ -16,6 +22,7 @@ export interface ApplicationViewProps extends ApplicationViewData {
   ) => React.JSXElementConstructor<LayoutProps>;
   sideMenu?: () => React.JSXElementConstructor<any>;
   includeControls?: boolean;
+  edgeType?: EdgeType;
 }
 
 export const ApplicationView: React.FunctionComponent<ApplicationViewProps> = ({
@@ -36,14 +43,18 @@ export const ApplicationView: React.FunctionComponent<ApplicationViewProps> = ({
     );
   },
   includeControls = false,
+  edgeType = 'smoothstep',
 }) => {
   const [loaded, setLoaded] = useState(false);
-  const elements = collectApplicationNodes({
-    asyncapi,
-    application,
-    incomingOperations,
-    outgoingOperations,
-  });
+  const elements = collectApplicationNodes(
+    {
+      asyncapi,
+      application,
+      incomingOperations,
+      outgoingOperations,
+    },
+    edgeType,
+  );
 
   const handleLoaded = (reactFlowInstance: any) => {
     setLoaded(true);
@@ -61,6 +72,7 @@ export const ApplicationView: React.FunctionComponent<ApplicationViewProps> = ({
         elements={elements}
         minZoom={0.1}
         onLoad={handleLoaded}
+        edgeTypes={edgeTypes}
       >
         <Background
           color="#d1d1d3"
diff --git a/library/src/visualiser/react-flow-renderer/SystemView.tsx b/library/src/visualiser/react-flow-renderer/SystemView.tsx
index 79d6199..3577a29 100644
--- a/library/src/visualiser/react-flow-renderer/SystemView.tsx
+++ b/library/src/visualiser/react-flow-renderer/SystemView.tsx
@@ -11,7 +11,7 @@ import nodeTypes from '../../components/react-flow-renderer-nodes';
 import FloatingConnectionLine from '../../components/react-flow-renderer-nodes/FloatingConnectionLine';
 import FloatingEdge from '../../components/react-flow-renderer-nodes/FloatingEdge';
 import { collectSystemNodes } from '../helpers/collect-nodes';
-import { LayoutProps, SystemViewData } from '../../types';
+import { EdgeType, LayoutProps, SystemViewData } from '../../types';
 
 const edgeTypes: EdgeTypesType = {
   floating: FloatingEdge,
@@ -23,6 +23,7 @@ export interface SystemViewProps extends SystemViewData {
   ) => React.JSXElementConstructor<LayoutProps>;
   sideMenu?: () => React.JSXElementConstructor<any>;
   includeControls?: boolean;
+  edgeType?: EdgeType;
 }
 
 export const SystemView: React.FunctionComponent<SystemViewProps> = ({
@@ -40,9 +41,10 @@ export const SystemView: React.FunctionComponent<SystemViewProps> = ({
     );
   },
   includeControls = false,
+  edgeType = 'floating',
 }) => {
   const [loaded, setLoaded] = useState(false);
-  const elements = collectSystemNodes({ applications });
+  const elements = collectSystemNodes({ applications }, edgeType);
 
   const handleLoaded = (reactFlowInstance: any) => {
     setLoaded(true);