Sequence diagrams.
Cool as shit.

Open source sequence diagrams with a visual editor and concise text. Boil 'em, mash 'em, stick 'em in a stew.

See the showcase Create!

Use it in the documentation, AI-interviews, or your website.

  • AI edits diagrams as text, and you edit visually.
  • Free and open source under the MIT.
  • Zero dependencies. Just 45 kB.
  • 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@0.15/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>