Skip to content

Manual screenshots

Add PNG or WebP files here, then reference them from any manual page with Markdown:

md
![Flow chart toolbar](./images/flow-toolbar.png)

Optional caption and width (HTML only when you need sizing):

md
<img src="./images/flow-toolbar.png" alt="Flow chart toolbar" width="720" />

Tips

  • Prefer PNG for UI screenshots; keep files under ~500 KB when possible.
  • Use short, descriptive filenames (dialogue-export-modal.png).
  • Run npm run docs:build:app to rebuild the bundled manual (public/docs/).
  • Edit sources under docs/manual/; preview with npm run docs:dev.
  • Files in docs/public/ are served from the site root (/foo.png); use docs/manual/images/ for page-specific screenshots.

No HTML editor is required — edit the .md files in any text editor or IDE.

YarnDraft — lightweight, cross-platform narrative design tool