Messages & Arrows

Change Arrow Style

Modify arrows to indicate lost messages, distinct directions, etc.

Sequence Diagram Example
Loading...
Arrow Styles Diagram

Advanced Arrow Syntax

Complex arrow styles including colored, bidirectional, half-arrows, and external signals.

Colored & Styled Arrows

Basic Colored Arrows

Sequence Diagram Example
Loading...
Colored & Styled Arrows - Basic Diagram

Async Style

Sequence Diagram Example
Loading...
Colored & Styled Arrows - Async Diagram

Reverse Arrows

Sequence Diagram Example
Loading...
Colored & Styled Arrows - Reverse Diagram

Bidirectional Arrows

Sequence Diagram Example
Loading...
Colored & Styled Arrows - Bidirectional Diagram

Half Arrows

Basic Half Arrows

Sequence Diagram Example
Loading...
Half Arrows - Basic Diagram

Triangle Half Arrows

Sequence Diagram Example
Loading...
Half Arrows - Triangle Diagram

Reverse Half Arrows

Sequence Diagram Example
Loading...
Half Arrows - Reverse Diagram

External Signals

Signals starting from or ending at the diagram boundary.

Incoming Messages

Sequence Diagram Example
Loading...
Incoming Messages Diagram

Outgoing Messages

Sequence Diagram Example
Loading...
Outgoing Messages Diagram

Return Keyword

The return keyword generates a return message with an optional text label. It automatically identifies the point that caused the most recent lifeline activation and draws a dashed arrow back to the caller.

Sequence Diagram Example
Loading...
Return Keyword Example

Slanted or Odd Arrows

You can use the (nn) option (before or after arrow) to make the arrows slanted, where nn is the number of shift pixels.

Sequence Diagram Example
Loading...
Slanted Arrows

Colored Slanted Arrows

You can combine slant styling with colors.

Sequence Diagram Example
Loading...

Parallel messages

You can use the & command to display parallel messages. This is particularly useful for modelling non-blocking operations or concurrent events.

Sequence Diagram Example
Loading...
Parallel Messages

Message to Self

A participant can send a message to itself.

Sequence Diagram Example
Loading...
Message to Self Diagram

Self-Message Variations

Self-messages support various styles including colors, line types (dashed, dotted), and different arrowheads.

Basic Styles

Sequence Diagram Example
Loading...
Self-Message Variations - Basic Diagram

Async Styles

Sequence Diagram Example
Loading...
Self-Message Variations - Async Diagram

Bidirectional Styles

Sequence Diagram Example
Loading...
Self-Message Variations - Bidirectional Diagram

Half Arrow Styles

Sequence Diagram Example
Loading...
Self-Message Variations - Half Arrows Diagram

Incoming and Outgoing (Detailed)

Sequence Diagram Example
Loading...
Incoming Outgoing Diagram

Text Alignment & Placement

Align text using skinparam sequenceMessageAlign.

Sequence Diagram Example
Loading...
Text Alignment & Placement Diagram

Response Message Below Arrow

Sequence Diagram Example
Loading...
Response Message Below Arrow Diagram

Message Sequence Numbering

The keyword autonumber is used to automatically add an incrementing number to messages.

Basic Usage

Sequence Diagram Example
Loading...
Autonumber Basic Usage Diagram

Start Number and Increment

You can specify a start number with autonumber <start>, and also an increment with autonumber <start> <increment>.

Sequence Diagram Example
Loading...
Autonumber Start and Increment Diagram

Custom Formatting

You can specify a format for your number by using double-quotes. The formatting is done with 0 meaning digit and # meaning digit (zero if absent). You can use some HTML tags in the format.

Sequence Diagram Example
Loading...
Autonumber Custom Formatting Diagram

Stop and Resume

You can use autonumber stop and autonumber resume <increment> <format> to respectively pause and resume automatic numbering.

Sequence Diagram Example
Loading...
Autonumber Stop and Resume Diagram

Multi-Digit Numbering

Your start number can be a 2 or 3 digit sequence using a field delimiter such as ., ;, ,, : or a mix of these. For example: 1.1.1 or 1.1:1. Automatically the last digit will increment. To increment the first digit, use: autonumber inc A. To increment the second digit, use: autonumber inc B.

Sequence Diagram Example
Loading...
Autonumber Multi-Digit Numbering Diagram

Delay

You can add a delay in the timeline using ... syntax. This creates a vertical gap with optional centered text.

Sequence Diagram Example
Loading...
Timeline Delay Diagram

Anchors and Duration

Sequence Diagram Example
Loading...
Anchors and Duration Diagram