Create sequence diagrams

npm install arrow
9 downloads in the last week
20 downloads in the last month

Create sequence diagrams with a domain-specific language.

Usage: arrow [-o type] [-v] [-h] FILE...

  -o  output type [pdf, svg, json]  [string]  [default: "pdf"]
  -v  verbose logging               [boolean]
  -h  Show help                     [boolean]

Small example:

set text_color purple

Alice -> Bob: Hello #comment
Bob -> Alice: World
Bob -> Bob: !


Use npm:

npm install -g arrow


The following sections describe syntax that can be placed in a .wsd file for input to the arrow processor.


# [comment] Place a comment on a line by iteself, or at the end of any line.
If you need a # in a string, enclose the string in double quotes (").


participant "[description]" as [name] Create a new participant in the order that the participant directive appears in the input file. The description is output, and the name is what is used for reference in later directives.


participant Alice
participant "Bob Cat" as bob


Arrows are draw between participants with open ends, closed ends, solid or dashed lines, and may be bi-directional.


< or > closed arrow end

<< or >> open arrow end


- solid line

-- dashed line


# A "normal" message from A to B
A -> B

# An "exciting" message between A and B
# No, this doesn't have any defined meaning, as far as I know


The minimum messsage looks like participant arrow participant, but a full description is:

[label:] participant[@time] arrow participant[@time] [:title] [[message options]]

Draw a line with arrows between two participants. A participant that has not been previously mentioned will be automatically created. Note that a message may be of the form B -> B, which produces a self message.


A message can have a title that will be drawn over the message line. The title will be justified toward the start of the message, or in the middle for bi-directional messages.


A->B: The title


Each message start time can have a timestamp associated with it by prefixing the messagewith label:. Subsequent messages can be declared to start or end at a given label by suffixing the participant name with @time, where time is the lable from a previous message. This will usually result in a diagonal line.


early: A-->>B
late: B-->>A

Message options

Message options modify the message, and are of the form name [= value], with multiple options separated by a comma (,). The following message options may be set:

  • duration: The number of time slices that this message takes up. If this is not 1, a diagonal line will result. [Default: 1]
  • advance: The number of time slices to advance the clock after this message. This is useful after a flurry of crossing diagonal lines. [Default: 1]


A->B [duration=2, advance=2]
B->A [duration=2]


set [option] [value] set an option governing the production of the diagram to the given value. If the value is omitted, it defaults to true.


The following options may be set (followed by their defaults):

  • arrow_color: black
  • arrow_height: 10
  • arrow_width: 15
  • auto_number: false
  • background: white
  • block_tab_fill: gray
  • block_stroke: gray
  • column_width: 150
  • font: Helvetica
  • line_color: black
  • line_width: 1
  • rung_color: black
  • rung_width: 1
  • text_color: black
  • text_size: 13
  • time_height: 20

Programmatic Interface

var arrow = require('arrow');
arrow.draw("A->B", "pdf", function(error, out) {
    // err is `null` or an `Error`
    // out is a `String` or `Buffer`

Supported Output Types

  • PDF
  • SVG
  • JSON
npm loves you