Markdown actdiag editor

Write an activity diagram with swimlanes in actdiag's short text and see it drawn as you type. List the steps and the order they happen in, then put each step in the lane of the person or system that does it. The text sits in your Markdown as an ```actdiag block. Free in your browser, with no Python and no sign-up.

actdiag is part of the blockdiag family.

actdiag syntax

A diagram is actdiag { … }. Links between steps use -> as in blockdiag, and each lane lists the steps that belong to it. Steps take the same attributes as blockdiag nodes.

Steps in lanes

Write the flow first, then the lanes. A step's position in its lane follows the order of the flow.

You write

actdiag {
  order -> pack -> ship -> receive;
  lane customer {
    label = "Customer";
    order; receive;
  }
  lane shop {
    label = "Shop";
    pack; ship;
  }
}

You get

Labels and shapes

Give a step a longer label or another shape with attributes, either in the lane or in the flow.

You write

actdiag {
  write -> check -> publish;
  check -> write [label = "changes"];
  lane author {
    label = "Author";
    write [label = "Write draft"];
    publish [label = "Publish", shape = roundedbox];
  }
  lane editor {
    label = "Editor";
    check [label = "Approve?", shape = diamond];
  }
}

You get

Cheat sheet

Write this	You get
`A -> B -> C;`	Steps in order
`lane name { A; B; }`	A swimlane holding steps A and B
`label = "Title";` in a lane	The lane's heading
`A [label = "Text"];`	A step with its own label
`[shape = diamond]`	A decision or other blockdiag shape
`B -> A [label = "retry"];`	A labelled link back

This is actdiag's layout and drawing ported to run in your browser. A lane with no name is labelled "Lane 1", "Lane 2" and so on.

Something not working? Let us know.