# Lines & Arrows for agents Lines & Arrows is an open source sequence-diagram format with a visual editor. The diagram is stored as concise text, so agents can write and validate the same source that people view or edit. This guide contains everything needed to author, validate, and render Lines & Arrows through the supported integrations below. Use the self-contained paths below; consult repository sources only for host requirements they do not cover. Testing showed that even mid-tier models at low reasoning reproduce the syntax and embedding correctly most of the time. Save verification for diagrams used in permanent documentation or websites. ## Put a diagram on a page The CDN build registers the `` element. No package install or framework is required. ```html Sequence diagram @Client @API @Worker Client -> API: Start job API -> Worker: Run Worker --> API: Done API --> Client: Complete ``` Diagram source inside HTML is text content. Write arrow operators as `->`, `-->`, and `->x`; literal `>` is valid in HTML text. Escape `&` as `&` and `<` as `<` when those characters appear in labels or metadata. Assigning the element's `source` property or calling `renderDiagram()` also accepts raw diagram source. Browser integrations target current stable Chromium. The syntax module and CLI run on Node.js 22 or newer. ## Render inside GUI harness In many cases it makes sense to render a diagram right inside a GUI AI harness if it supports HTML rendering (as a part of explanation, interview, etc). When a browser host provides an ordinary DOM container but cannot use custom elements or external script tags, import the exact browser module and call `renderDiagram()` directly: ```html
``` `renderDiagram(target, source, options)` accepts Lines & Arrows text directly. ### Configure direct rendering Enable `selectableActors: true` to receive `onActorSelect` callbacks or call the returned controller's `selectActor(name)`. Pass an existing actor name to select it or `null` to clear selection. ## Configure the web component Set configuration through attributes on ``: | Attribute | Values and behavior | | --- | --- | | `mode` | `view` by default. Use `edit` to enable the visual editor, undo and redo controls, and editing keyboard shortcuts. | | `selectable-actors` | Boolean attribute. View mode is static by default; add this attribute to let people select actors. Edit mode keeps its own required selection behavior. | | `branding` | The compact header shows “Powered by Lines & Arrows” by default. Use `false` to hide the attribution text. | | `copy-source` | The Copy source action is shown by default. Use `false` to hide it. A view with branding and this action both hidden omits the compact header row and its spacing. | | `theme` | `auto`, `light`, or `dark`. The default is `auto`. | | `canvas-background` | `transparent` by default. Use `solid` when the component should paint its theme or palette background. | | `label` | An accessible name describing the diagram. | Copy source uses the browser Clipboard API in a secure context such as HTTPS or localhost. Keep `clipboard-write` enabled in the page's Permissions Policy. A cross-origin `