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.


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


    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
      <div id="diagram"></div>
      var diagram = Diagram.parse("A->B: Message");
      diagram.drawSVG("diagram", {theme: 'hand'});


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 interesting possibly useful stuff:

  • c4 model - standardized diagramming language used by spotify
Last modified: September 20, 2022
© 2024