Create sequence diagrams with simple online tool

Swimlanes.io is a free webapp for making sequence diagrams. You simply edit the text on the left and the diagram is updated in real time. You can download your sequence diagrams as images or distribute with a link.

title: Swimlanes.io full syntax overview _: **1. Messages** One -> Two: Simple Two ->> Three: Open arrow Three -x Four: Lost message Three <-> Four: Bi-directional Two -> Two: To self Two -> One: Actors can be One <- Two: in any order Two -> Three: Regular Two <-- Three: Dashed Two => Three: Bold One -> Four: Markdown support for messages: *Italic*, **Bold**, ~~strike through~~ and `inline code`. + {fab-font-awesome} Icons note: Add sequence numbers to messages with the _**autonumber**_ statement // Uncomment next line for automatic message numbering // autonumber _: **2. Notes** note: Simple text formatting; **bold**, *italic*, ~~strike through~~ and `inline code`. + {fab-font-awesome} Icons 1. Ordered 2. list * Unordered * list [link](http://www.swimlanes.io) ``` { code block.. } ``` Two -> Three: A note is closed by a following element note: A note spans the length of the previoues message by default note One, Three: Specify the start and end actor to change the width of a note ``` note [start[,end]]: text ``` _: **3. Sections** if: Define conditional flows with _**if**_ Two -> Three: Message else: Optional alternative flow with _**else**_ Two -> One: Message else One <-> Four: Section lables are optional if: Sections can be nested one level end note One, Three: Sections are closed with the _**end**_ statement end group: _**group**_ can be used instead of _**if**_ for simple grouping end _: **4. Dividers** _: thin -: regular --: dashed =: bold -: Markdown support for dividers: *Italic*, **Bold**, ~~strike through~~ and `inline code`. + {fab-font-awesome} Icons _: **5. {fab-font-awesome fa-lg} Icons** note: {far-bolt fa-lg} Font Awesome icons are supported using: ``` {fa$-icon} ``` Where **$** is: - **b** for brand - **s** for solid - **r** for regular - **l** for light - **d** for duotone See [Font Awesome overview](/gallery/font-awesome) for more details and [fontawesome.com](https://fontawesome.com/v5.10.1/icons?d=gallery) for a full list of available icons. _: **6. Delay** ...: {fas-spinner} Indicate a delay in the flow _: **7. Order** note: Change the order of the actors with the _**order**_ statement ``` order: first [,second[,third ...]] ``` // Uncomment next line for re-ordering // order: Three, Two

Swimlanes.io full syntax overview

One
Two
Three
Four
1. Messages
Simple
Open arrow
Lost message
Bi-directional
To self
 
Actors can be
in any order
Regular
Dashed
Bold
Markdown support for messages: Italic, Bold, strike through and inline code. + Icons

Add sequence numbers to messages with the autonumber statement

2. Notes

Simple text formatting; bold, italic, strike through and inline code. + Icons

  1. Ordered
  2. list
  • Unordered
  • list

link

{
  code block..
}
A note is closed by a following element

A note spans the length of the previoues message by default

Specify the start and end actor to change the width of a note

note [start[,end]]: text
3. Sections
Define conditional flows with if
Message
Optional alternative flow with else
Message
Section lables are optional
Sections can be nested one level

Sections are closed with the end statement

group can be used instead of if for simple grouping
4. Dividers
thin
regular
dashed
bold
Markdown support for dividers: Italic, Bold, strike through and inline code. + Icons
5. Icons

Font Awesome icons are supported using:

{fa$-icon}

Where $ is:

  • b for brand
  • s for solid
  • r for regular
  • l for light
  • d for duotone

See Font Awesome overview for more details and fontawesome.com for a full list of available icons.

6. Delay
Indicate a delay in the flow
7. Order

Change the order of the actors with the order statement

order: first [,second[,third ...]]
One
Two
Three
Four
One
Two
Three
Four