← Back
Master Edge Connections
← Back to Academy

Master Edge Connections

Learn how to create and customize edges to show relationships and data flow between nodes in your architecture diagrams

basicsbeginner⏱️7 min
Home/Documentation/Master Edge Connections

Learn how to create and customize edges to show relationships and data flow between nodes in your architecture diagrams

Academy/
Edge ConnectionsDocumentation

Master Edge Connections

Edges are connections or arrows between nodes that represent relationships, dependencies, or information flow in your architecture diagrams.

What You'll Learn!

In this tutorial, you're going to see how to create connections, add labels, customize visual styles, and manage edge relationships!

Edge Connections in Action

See how edges connect nodes with different directions and labels

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Interactive

Try dragging the nodes to see how edges automatically adjust!

Core Concepts

What Are Edges?

Edges represent the relationships and interactions between components in your architecture. They visually communicate how different parts of your system work together.

Edge Types and Algorithms

ArkT supports different edge drawing algorithms, each with its own visual style and use cases.

Linear

**Straight line connection** - Simple and direct. Best for clean, minimal diagrams and short-distance connections.

Catmull-Rom

**Smooth curved path** - Aesthetically pleasing. Handles complex layouts well with natural-looking curves.

Bezier Catmull-Rom

**Cubic Bezier curves** - Maximum smoothness. Professional appearance, best for presentation-ready diagrams.

Linear

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Straight line connection

Catmull-Rom

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Smooth curved path

Bezier Catmull-Rom

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Maximum smoothness

💡 Choosing the Right Algorithm

Choose the algorithm that best fits your diagram's aesthetic and layout complexity. Linear for technical docs, Catmull-Rom for general use, Bezier for presentations!

Edge Directions and Markers

Edges can have arrows (markers) to show the direction of data flow, dependencies, or communication.

End Arrow

Arrow at the target node (most common for showing flow direction)

Start Arrow

Arrow at the source node (useful for reverse dependencies)

Both Arrows

Arrows at both ends (bidirectional communication)

No Arrows

No arrows (general association or non-directional)

End Arrow

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Arrow at target (most common)

Both Arrows

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Bidirectional communication

No Arrows

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

General association

Start Arrow

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Reverse dependencies

When to Use Each Direction

•

API calls

Use "End" to show request direction from client to server

•

Database queries

Use "End" pointing from service to database

•

Bidirectional sync

Use "Both" for real-time synchronization or WebSocket connections

•

Loose coupling

Use "None" for general relationships without specific flow

Which arrow direction would you use for a WebSocket real-time sync?

End only
Start only
Both directions
No arrows

Edge Properties Explained

Stroke Styles

Stroke Width

Thickness of the edge line. Thicker lines indicate more important connections.

Dashed Style

Dashed lines for tentative or planned connections

Animated Style

Animated edges for active data flow or real-time streams

Thin

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

2px - Optional dependencies

Medium

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

3px - Standard connections

Thick

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

4px - Critical paths

Dashed

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Tentative connections

Animated

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Active data flow

Edge Colors

Colors help categorize and distinguish different types of connections in your diagram.

Stroke Color

The color of the edge line itself. Use different colors for different connection types.

Blue

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

HTTP/REST API calls

Green

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Database connections

Red

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Error flows

Purple

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

WebSocket/real-time

Label Fill Colors

The background color of the label text. Helps labels stand out against complex diagrams.

Blue Fill

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Info labels

Green Fill

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Success labels

Red Fill

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Error labels

Label Typography

Font size can indicate the importance or hierarchy of edge labels.

Small

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

10px font size

Medium

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

12px font size (default)

Large

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

15px font size

XL

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

20px font size

Step-by-Step Guides

Creating Connections

Drawing an Edge

•

Hover over the source node

•

Small circular handles appear on the node's edges

•

Click and hold on a handle

•

Drag your cursor toward the target node

•

Hover over the target node to see its handles

•

Release on a target handle to complete the connection

💡 Connection Tips

Pro tips for creating connections:

  • Nodes must exist before you can connect them
  • You can connect a node to itself (self-loop)
  • Multiple edges can connect the same two nodes
  • Drag slowly to see the edge path preview

Selecting Edges

•

Click directly on the edge line

•

The edge highlights to indicate selection

•

The floating control bar appears on the right

•

All edge properties become editable

🎯 Selection Help

Selection tips: Click on the thicker part of the edge line for easier selection. Selected edges show a highlighted outline. Click on empty canvas space to deselect.

Where do edge controls appear when you select an edge?

Top toolbar
Floating action bar (top center)
Floating control bar (right side)
Bottom panel

Adding Labels to Edges

Label Best Practices

Why label edges? Labels explain the relationship between connected components:

  • API endpoints: "GET /users", "POST /auth"
  • Data types: "User Data", "Configuration"
  • Protocols: "HTTPS", "gRPC", "WebSocket"
  • Frequencies: "Real-time", "Batch (nightly)"
•

Select the edge by clicking on it

•

Find the "Label" field in the floating control bar

•

Type a descriptive label

•

The label appears on the edge line

Label Writing Tips

Be concise but descriptive

Include technical details when relevant (protocols, endpoints)

Use consistent terminology across your diagram

Consider adding data types or frequencies

Customizing Edge Appearance

You can customize edge colors, stroke width, algorithms, and label styles. See the "Understanding Edges" section above for visual examples of all available options.

•

Select the edge by clicking on it

•

Use the floating control bar on the right to adjust properties

•

Change stroke color, label fill, width, algorithm, or direction

•

Changes apply immediately as you edit

💡 Experiment!

Pro tip: Try moving nodes around after changing algorithms to see how each style responds to different layouts. Some algorithms handle tight spaces better than others!

Deleting Edges

•

Select the edge by clicking on it

•

Press Delete or Backspace key, OR

•

Use the delete option in the floating control bar

⚠️ Deletion Behavior

Important to know:

  • Deleted edges can be restored with Cmd/Ctrl + Z (Undo)
  • Deleting a node automatically deletes all connected edges
  • You can select multiple edges (cmd/ctr + Click) and delete them together
Reference Material

Best Practices

Use different colors for different types of connections (API calls, data flow, dependencies)

Add labels to edges to describe the relationship or data being transferred

Use arrows to show the direction of data flow or dependencies

Make primary connections thicker than secondary ones

Label edges with technical details like protocols or endpoints

Use consistent edge styling across your entire diagram

Keep edge paths clear by adjusting node positions

Common Use Cases

Showing API communication between microservices

Documenting data flow in data pipelines

Mapping dependencies between system components

Illustrating message queue connections

Representing database relationships and queries

Visualizing authentication flows

Creating deployment dependency graphs

Documenting event-driven architectures

Keyboard Shortcuts

Essential Edge Shortcuts

Delete the selected edge

Delete

Delete the selected edge (alternative)

Backspace

Deselect all edges

Escape
Continue Learning

You're an Edge Master! 🎯

You now know how to create connections, add meaningful labels, and customize edges to create professional, informative architecture diagrams!

Congratulations!

What you've mastered: Creating connections between nodes Selecting and editing edges Adding descriptive labels Changing edge styles and algorithms Adding directional arrows Customizing colors and sizes Deleting edges

Pro tips to remember:

  • Use different colors for different connection types
  • Labels make diagrams easier to understand
  • Arrows show the direction of data flow
  • Thicker edges indicate more important connections
2 of 10

Related Articles

6 m

Infinite Levels

Master multi-level diagrams and breadcrumb navigation

basicsbeginner
5 m

Create Your First Node

Master the basics of node creation in ArkT diagrams

basicsbeginner
4 m

Add Text Annotations

Use text nodes for titles, labels, and annotations

basicsbeginner

Practice with Tutorial

Apply what you've learned with an interactive, step-by-step tutorial.

View All Modules in Academy

On This Page

IntroductionUnderstanding EdgesWorking with EdgesQuick ReferenceNext Steps