1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta 7 name="description" 8 content="Open source sequence diagrams stored as readable text, with a visual editor for people and a simple format for AI agents." 9 /> 10 <title>Lines & Arrows | Sequence diagrams as text, with a visual editor</title> 11 <link rel="canonical" href="https://lines-and-arrows.dev/" /> 12 <meta property="og:type" content="website" /> 13 <meta property="og:site_name" content="Lines & Arrows" /> 14 <meta property="og:title" content="Lines & Arrows" /> 15 <meta 16 property="og:description" 17 content="Open source sequence diagrams stored as readable text, with a visual editor for people and a simple format for AI agents." 18 /> 19 <meta property="og:url" content="https://lines-and-arrows.dev/" /> 20 <meta 21 property="og:image" 22 content="https://lines-and-arrows.dev/assets/social-card.png" 23 /> 24 <meta property="og:image:type" content="image/png" /> 25 <meta property="og:image:width" content="1200" /> 26 <meta property="og:image:height" content="630" /> 27 <meta 28 property="og:image:alt" 29 content="A Lines & Arrows sequence diagram showing a person and AI agent creating readable diagram source, rendering it, and sharing it with a team." 30 /> 31 <meta name="twitter:card" content="summary_large_image" /> 32 <meta name="twitter:title" content="Lines & Arrows" /> 33 <meta 34 name="twitter:description" 35 content="Sequence diagrams as text, with a visual editor." 36 /> 37 <meta 38 name="twitter:image" 39 content="https://lines-and-arrows.dev/assets/social-card.png" 40 /> 41 <link rel="icon" href="./favicon.svg" type="image/svg+xml" /> 42 <link rel="stylesheet" href="./styles.css?v=20260923-2" /> 43 </head> 44 <body class="home-page"> 45 <a class="skip-link" href="#main">Skip to content</a> 46 47 <header class="site-header"> 48 <nav class="nav-shell" aria-label="Primary navigation"> 49 <a class="wordmark" href="#top"> 50 <span class="wordmark-name">Lines & Arrows</span> 51 </a> 52 53 <div class="nav-links"> 54 <a href="./showcase.html">Showcase</a> 55 <a href="./constructor.html">Constructor</a> 56 <a href="./features.html">Features</a> 57 <a 58 href="https://raw.githubusercontent.com/apurin/lines-and-arrows/refs/heads/main/website/agents.md" 59 > 60 Agents 61 </a> 62 <a 63 class="nav-github" 64 href="https://github.com/apurin/lines-and-arrows" 65 target="_blank" 66 rel="noreferrer" 67 aria-label="Lines and Arrows on GitHub" 68 > 69 <img 70 src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/assets/bold/github-logo-bold.svg" 71 alt="" 72 width="18" 73 height="18" 74 /> 75 <span>GitHub</span> 76 </a> 77 </div> 78 <div class="theme-switcher" role="group" aria-label="Color theme"> 79 <button type="button" data-site-theme="light" aria-pressed="true"> 80 <span class="control-icon icon-sun" aria-hidden="true"></span> 81 <span class="visually-hidden">Light theme</span> 82 </button> 83 <button type="button" data-site-theme="dark" aria-pressed="false"> 84 <span class="control-icon icon-moon" aria-hidden="true"></span> 85 <span class="visually-hidden">Dark theme</span> 86 </button> 87 </div> 88 </nav> 89 </header> 90 91 <main id="main"> 92 <section class="home-hero section-shell" id="top"> 93 <div class="hero-copy"> 94 <div class="hero-intro"> 95 <h1>Sequence diagrams.<br />Visual edits, plain text.</h1> 96 <p class="hero-lede"> 97 Open source sequence diagrams stored as concise text. The visual 98 editor writes every change back to that text. 99 Boil 'em, mash 'em, stick 'em in a stew. 100 </p> 101 <div class="hero-actions"> 102 <a class="button button-primary" href="./showcase.html"> 103 See the showcase
104 <span 105 class="control-icon icon-arrow-up-right" 106 aria-hidden="true" 107 ></span> 108 </a> 109 <a class="button button-secondary" href="./constructor.html"> 110 Create! 111 <span 112 class="control-icon icon-arrow-right" 113 aria-hidden="true" 114 ></span> 115 </a> 116 </div> 117 </div> 118 <div class="hero-proof"> 119 <p class="hero-use-cases"> 120 For documentation, AI interviews, and websites. 121 </p> 122 <ul class="hero-facts" aria-label="Project facts"> 123 <li>AI edits diagrams as text, and you edit visually.</li> 124 <li>Free and open source under the MIT.</li> 125 <li>Zero dependencies. Just 52 kB gzipped.</li> 126 <li> 127 <span> 128 Use it from a CDN or install it as an 129 <a href="https://www.npmjs.com/package/lines-and-arrows">npm module</a>. 130 </span> 131 </li> 132 </ul> 133 </div> 134 </div> 135 136 <figure class="hero-workbench"> 137 <div class="workbench-heading"> 138 <div> 139 <span class="workbench-index" aria-hidden="true">01</span> 140 <p>Live diagram</p> 141 </div> 142 <div 143 class="surface-switcher" 144 role="group" 145 aria-label="Diagram mode" 146 > 147 <button 148 type="button" 149 data-hero-surface="view" 150 aria-pressed="true" 151 > 152 View 153 </button> 154 <button 155 type="button" 156 data-hero-surface="edit" 157 aria-pressed="false" 158 > 159 Edit 160 </button> 161 <button 162 type="button" 163 data-hero-surface="source" 164 aria-pressed="false" 165 > 166 Source 167 </button> 168 </div> 169 </div> 170 171 <div class="diagram-stage diagram-stage-hero"> 172 <div class="diagram-loading">Loading the live diagram</div> 173 <lines-and-arrows 174 id="hero-diagram" 175 theme="light" 176 mode="view" 177 branding="false" 178 copy-source="false" 179 download-svg="false" 180 canvas-background="transparent" 181 tabindex="-1" 182 label="A regional database outage is resolved through quorum-based failover and a safe transaction retry" 183 ></lines-and-arrows> 184 185 <div 186 class="hero-source-editor" 187 id="hero-source-editor" 188 hidden 189 > 190 <label for="hero-source">Diagram source</label> 191 <textarea 192 id="hero-source" 193 spellcheck="false" 194 aria-describedby="hero-source-error" 195 ></textarea> 196 <div class="hero-source-actions"> 197 <button type="button" id="apply-hero-source"> 198 Apply source 199 </button> 200 <p 201 id="hero-source-error" 202 class="hero-source-error" 203 role="alert" 204 aria-live="polite" 205 ></p> 206 </div> 207 </div> 208 </div> 209 210 <p class="visually-hidden" id="hero-mode-status" aria-live="polite"> 211 View mode, read-only. 212 </p> 213 </figure> 214 </section> 215 216 <section class="home-embed-section section-shell" id="embed"> 217 <div class="home-embed-copy"> 218 <h2>Put it on any page.</h2> 219 <p>Load one module. Keep the diagram source in the HTML.</p> 220 </div> 221 <pre class="home-embed-code"><code class="language-html"><!doctype html> 222<script type="module" 223 src="https://cdn.jsdelivr.net/npm/<!--email_off-->[email protected]<!--/email_off-->/dist/lines-and-arrows.auto.min.js"> 224</script> 225 226<lines-and-arrows theme="auto"> 227 @Browser 228 @API 229 @Database 230 231 Browser -> API: Save draft 232 critical Persist draft 233 API -> Database: Write 234 Database --> API: Stored 235 gap User keeps editing 236 API --> Browser: Draft saved 237</lines-and-arrows></code></pre> 238 </section> 239 </main> 240 241 <footer class="site-footer section-shell"> 242 <p> 243 <strong>Lines & Arrows</strong>
244 <span>Sequence diagrams as text, with a visual editor.</span> 245 </p> 246 <div class="footer-links"> 247 <a href="./showcase.html">Showcase</a> 248 <a href="./constructor.html">Constructor</a> 249 <a href="./features.html">Features</a> 250 <a 251 href="https://raw.githubusercontent.com/apurin/lines-and-arrows/refs/heads/main/website/agents.md" 252 > 253 Agents 254 </a> 255 <a href="https://www.linkedin.com/in/apurin" target="_blank" rel="noreferrer">Anton Purin â</a> 256 </div> 257 </footer> 258 259
259<script 260 defer 261 src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js" 262 integrity="sha384-zLRFO4dwowZvh8kzutOb5AWhH7f39HeJp+N7PtHF1SQtTBnifRx0AtmvTYs3F4YV" 263 crossorigin="anonymous" 264 ></script>
264 265
265<script 266 defer 267 src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-markup.min.js" 268 integrity="sha384-HkMr0bZB9kBW4iVtXn6nd35kO/L/dQtkkUBkL9swzTEDMdIe5ExJChVDSnC79aNA" 269 crossorigin="anonymous" 270 ></script>
270 271
271<script async type="module" src="./app.js?v=20261002-1"></script>
271 272
272<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"0f458d4e0dca4661841907587ea03472","r":1,"spa":2}' crossorigin="anonymous"></script>
272 273</body> 274</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.