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: