Skip to content

v1.4.0

Choose a tag to compare

@playree playree released this 27 Oct 06:50
9caaaaa
  • ER diagrams (erDiagram) and state diagrams (stateDiagram / stateDiagram-v2) marked with %% @link-headings are linked to the headings after them like flowcharts: each entity (by its alias, or its name) and each state (by its description, or its id; composite states included) is linked to the heading with the same text, or to the one of a %% @ref above the line defining it, for example to put the definition of each table or the description of each state beside the diagram. Hovering and clicking highlight and scroll both ways, entities and states without a heading are faded, headings without one get a "no entity" / "no state" mark, and the Problems panel, quick fixes and @ref completion work as for flowcharts. With direction LR / RL, the headings are shown below the diagram. See examples/er-diagram.md and examples/state-diagram.md.
  • Wireframes: a screen mock-up written as an HTML file is put into a document like an image (![Sign-in](screens/login.html), a link alone in a paragraph at the top level, or [![Sign-in](screens/login.png)](screens/login.html) with an image GitHub shows instead), and shown in a frame with its own styles as in a browser (its text can be selected and copied, also when it is shown full screen with the button at its top right, where the space around the page is dragged, or the page with Space held, to pan it), with the number of each part (data-item="<number>"). With <!-- wireframe: link-headings --> before it, it is put beside the headings and item tables after it, and its parts are linked to the headings numbered like them (or to the heading of data-ref) and to the rows with their number in the column of the new table option item=: hovering and clicking highlight and scroll both ways, and parts, headings and rows without a counterpart are marked and reported in the Problems panel. width=<pixels> lays the page out at a fixed width scaled to the column, and stacked puts the descriptions below it. Its local style sheets and images are embedded into exported HTML. See examples/wireframe.md.
  • Wireframes can be numbered without data-item in their HTML: item.<number>="<CSS selector>" in their options (which may span several lines) numbers the elements matching the selector, and a selector that matches nothing is noted below the wireframe (a warning of the command line's export, which fails with --strict). Their :root rules, @font-face and @property (e.g. of Tailwind CSS) work as in a browser.
  • The command line's new capture command writes a screen of a running web app (on its development server, for example, also a single-page app that its scripts draw) as the HTML file of a wireframe: the page as headless Chrome shows it, without its scripts, with the styles that apply to it (also those added by scripts) laid out for the window it was captured in, and its images and fonts embedded. --fill, --click, --hover and --press, or a Playwright script (--script), prepare the page before it is captured, to show an error message or a dialog, and --storage-state opens it signed in. See Capturing screens.
  • Fixed local images written as HTML <img> tags (for example <img src="images/a.png" width="49%">) not showing in the preview and not being embedded in exported HTML.
  • Fixed the comparison with a Git revision (in the preview, exported HTML and --diff-base) taking a very long time on an HTML block of many comments followed by something else. Text after the end of a comment (<!-- a --> b) is no longer taken as part of it there.