Editor Instructions
This guide covers the shared source-editor controls, toolbar, storage, export, and presentation features.
To create and edit a diagram, start with Sequence Instructions or Architecture Instructions.
Source Editor
- Press Ctrl-Space to show completions.
- Syntax errors are shown beside the source and can be clicked to select the affected line. In an architecture diagram, rest the pointer on the marker to read how a line of that kind is written.
- Undo and redo apply to canvas edits as well as typed changes. See Keyboard Shortcuts.
View Menu and Presentation
| Presentation Mode | - Hides menus, buttons, and the text editor; canvas editing remains available |
| Participant Overlay On Scroll | - Keeps sequence participants visible when their original row is scrolled out of view |
| Read Only Presentation Mode | - Disables canvas editing in presentation mode and lets dragging pan the diagram |
| Shrink to Fit | - Scales a large diagram to fit the available page in presentation or edit mode |
Press Ctrl-M / Cmd-M to enter or leave Presentation Mode.
Zoom and Image Size
- Use the toolbar's magnifying-glass buttons to zoom in or out, in steps from 25 % to 500 %. They scale the whole drawing, including its text; the layout stays the same.
- Set the zoom before exporting: zoom in for a larger image or out for a smaller one. The PNG, SVG and copy/paste images are at the current zoom on every screen.
- To change the space between elements instead, use the spacing settings in Sequence Instructions or Architecture Instructions.
Save, Export, and Share
Save source to keep an editable diagram. On SequenceDiagram.org, use Save or Ctrl-S / Cmd-S and choose a file, browser storage, or configured cloud storage. Use Open or Ctrl-O / Cmd-O to reopen it. Keep any diagram-mode marker with the source.
The export button opens these options:
- PNG: a raster image for documents and slides. Use Download or Export To.
- SVG: a vector image that stays sharp when scaled. Use Download or Export To.
- Copy/paste: choose Render to display an image, then copy it into another application.
- Share link: choose Create and copy a link. The link contains a snapshot of the source; generate a new link after making changes. Presentation links can open read-only, with an optional Shrink to Fit setting.
Anyone with a share link can read its diagram source. Read-only presentation controls editing in that view; it does not make the source private.
For a PDF, set the zoom and use your browser's Print to PDF. The print layout includes the diagram without the editor and toolbar.
Buttons on All Platforms
Open export and sharing options.
Add an element to the diagram.
Zoom in.
Zoom out.
Buttons on SequenceDiagram.org
Choose Sequence or Architecture to create a new diagram. Opening the menu does not replace the current diagram.
Open diagram source.
Save the diagram source.
Keyboard Shortcuts
| Ctrl-Z / Cmd-Z | - Undo a source or canvas edit |
| Ctrl-Shift-Z / Cmd-Shift-Z (or Ctrl-Y / Cmd-Y) | - Redo |
| Ctrl-S / Cmd-S | - Save diagram source |
| Ctrl-O / Cmd-O | - Open diagram source |
| Ctrl-M / Cmd-M | - Presentation mode |
| Ctrl-Space | - Autocomplete in source |
| Ctrl-F / Cmd-F | - Find in source |
| Shift-Ctrl-F / Cmd-Option-F | - Replace in source |
| Shift-Ctrl-R / Shift-Cmd-Option-F | - Replace all in source |