Sequence Diagram Tools

There are several flavors and syntaxes of sequence diagrams.

Each renderer/editor has its own take on the medium. It’s not standardized.

Editors

websequencediagrams
swimlanes
sequencediagram.org
Mermaid
Plantuml
lucidchart
ASCII flow
draw.io
excalidraw.com
tldraw.com
Metz - Really cool visual editor, not sequence diagrams but infra diagrams/charts.

Create an html page

If you want, you can have a self-contained html page with a sequence diagram inside. Use this lib: js-sequence-diagrams

  <html>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>
    <body>
      <div id="diagram"></div>
    <script>
      var diagram = Diagram.parse("A->B: Message");
      diagram.drawSVG("diagram", {theme: 'hand'});
    </script>

    </body>
  </html>

Generate an image

If you don’t want a html document, use kaleocheng/seq-cli to generate a raster image directly.

node_modules/.bin/seq-cli -i example/hello.seq -o hello.png

Finite State Machines

For designing state machine diagrams, this is an okay tool -> Finite State Machine Designer

Other

Other interesting possibly useful stuff:

c4 model - standardized diagramming language used by spotify

Last modified: September 5, 2024