Sequence diagrams.
Visual edits, plain text.

Open source sequence diagrams stored as concise text. The visual editor writes every change back to that text. Boil 'em, mash 'em, stick 'em in a stew.

See the showcase Create!

For documentation, AI interviews, and websites.

  • AI edits diagrams as text, and you edit visually.
  • Free and open source under the MIT.
  • Zero dependencies. Just 52 kB gzipped.
  • Use it from a CDN or install it as an npm module.

Live diagram

Loading the live diagram

Put it on any page.

Load one module. Keep the diagram source in the HTML.

<!doctype html>
<script type="module"
  src="https://cdn.jsdelivr.net/npm/lines-and-arrows@1.2/dist/lines-and-arrows.auto.min.js">
</script>

<lines-and-arrows theme="auto">
  @Browser
  @API
  @Database

  Browser -> API: Save draft
  critical Persist draft
    API -> Database: Write
    Database --> API: Stored
  gap User keeps editing
  API --> Browser: Draft saved
</lines-and-arrows>