Skip to content
Español

0070. Stories as the flows of a diagram

Status: accepted (stories-player-and-stills change, 4 November 2026). Amends 0023 and 0024.

On 4 November 2026 the owner asked for “scenes of animation” that tell several flows of one diagram, so that a reader sees each flow on the same drawing instead of a copy pasted elsewhere with one zone highlighted. The language already had it: a file may hold several story blocks for one diagram, and the canvas plays any of them (decision 0023). Three things were missing. The HTML player held one story per page (version: 2, one timeline), so a reader of a page could not pick a flow. A story could only be started in the text, so a person on the canvas wrote story … for … { scene … { } } by hand before the timeline offered anything. And the picture of a scene, the frame that goes into a slide or a document, was written one --at <time> at a time.

  • Version 3 documents hold a list of stories. A story document carries stories, each with its id, title, description and timeline, in the order given, over views embedded once by diagram id; the document’s id, title and description are its first story’s, so a page of one story reads as before. storiesDocument builds it, leaves out a story whose views cannot be drawn and names it; none drawn gives no document. PLAYER_VERSION is 3, and the runtime reads versions 2 and 3: readPlayerDocument lifts a version 2 timeline into one story of one, so pages written before keep playing. An older runtime says a version 3 document is unreadable, as it does for version 1; a page that mixes fragments takes the runtime of its newest one.
  • The Story picker belongs to the control bar. With more than one story the player shows a <select aria-label="Story"> before the scene picker. Picking a flow shows its first frame at 0 s, stopped (in the static view, its first scene’s final state), keeps the static view and the zoom, fills the scene picker, names the frame and the figure by the story, and announces “Story: ”. The summary lists every story under its title, the one shown marked <code dir="auto">aria-current</code>. The element attribute <code dir="auto">story="<id>"</code> chooses the story shown first (an unknown id gives the first). No key: Page Up and Page Down walk scenes, a flow is a deliberate choice, and keys typed in the picker stay its own.</li> <li><strong><code dir="auto">--stories</code> writes the page of every story.</strong> <code dir="auto">export <file> --stories</code> (or <code dir="auto">--stories a,b</code>, in that order) writes <code dir="auto"><stem>.stories.html</code>, or a fragment with <code dir="auto">--embed</code>; HTML is its format when none is given, and another format, <code dir="auto">--story</code>, <code dir="auto">--diagram</code>, <code dir="auto">--scenario</code>, <code dir="auto">--scenes</code>, <code dir="auto">--at</code> or a folder is a usage error. Each view is laid out once for the request. The web app’s export dialog offers <strong>Every story (N)</strong>, HTML only, and VS Code’s <strong>Export HTML Player</strong> offers <strong>Every story</strong>, both building the same request.</li> <li><strong><code dir="auto">createStory</code> is an edit like <code dir="auto">createDiagram</code>.</strong> It appends <code dir="auto">story <id> for <diagram> { scene <scene> { } }</code> after the last statement of the file, <code dir="auto">story1</code>, <code dir="auto">story2</code>… by default; the diagram must be one of the file’s. The canvas’s <strong>New story</strong>, beside the story picker, writes it for the diagram shown (in story mode, the playing story’s) and plays it at once on its empty scene, with a status line that says what to add. The new story warns <code dir="auto">story.empty-scene</code>, a warning, until its scene has an action. Read-only canvases do not offer it.</li> <li><strong>The stills of scenes are the static view’s frames.</strong> <code dir="auto">sceneStills(timeline)</code> in motion gives each scene’s final-state instant: its end for the last scene, 0.01 ms before it otherwise. The player’s static view and every export of scenes take it from there. <code dir="auto">--scenes</code> with <code dir="auto">--story</code> writes an SVG or PNG per scene, <code dir="auto"><stem>.<story>.<scene>.<ext></code>, or one PDF with a page per scene, every page the largest frame’s size with each frame fitted and centred (a multi-page <code dir="auto">capturePage</code>); <code dir="auto">--out</code> names a directory for SVG and PNG. Profiles take <code dir="auto">scenes true</code> on SVG, PNG and PDF of a story. The web app’s <strong>One picture per scene</strong> downloads a <code dir="auto">.zip</code> of the files or prints the pages; the timeline’s <strong>Export scenes</strong> asks VS Code for the format, and opens the web app’s dialog with the box checked.</li> <li><strong>The language stays 0.2.</strong> <code dir="auto">scenes</code> is an additive option of the <code dir="auto">export</code> block; the model JSON gains its <code dir="auto">scenes</code> key within version <code dir="auto">0.1</code>.</li> </ul> <div class="sl-heading-wrapper level-h2"><h2 id="alternatives-considered">Alternatives considered</h2><a class="sl-anchor-link" href="#alternatives-considered"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore>Section titled “Alternatives considered”</span></a></div> <ul> <li><strong>One <code dir="auto"><meltemi-player></code> per story with a selector outside.</strong> Views and fonts would be embedded once per story, and <code dir="auto">--embed</code> would give no single element to paste.</li> <li><strong>An optional <code dir="auto">stories</code> field under version 2.</strong> An older runtime would play the first story and say nothing of the others, which the version check exists to prevent.</li> <li><strong>Repeating <code dir="auto">--story</code> for several stories.</strong> Ambiguous with its meaning of one frame.</li> <li><strong>An <code dir="auto">export … for stories</code> profile.</strong> A new target form of the language for a page the command line writes in one go; a profile keeps one target.</li> <li><strong>A dialog asking the new story’s id and title.</strong> The canvas has none for <strong>New diagram</strong>; ids and titles are edited in the text, where hover documents them.</li> <li><strong>A single SVG sheet of every scene.</strong> A layout of its own; a PDF page per scene is what slides and documents take. One download per scene in the browser was refused too: browsers ask about several downloads and some refuse them.</li> </ul> <div class="sl-heading-wrapper level-h2"><h2 id="consequences">Consequences</h2><a class="sl-anchor-link" href="#consequences"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore>Section titled “Consequences”</span></a></div> <ul> <li>A page with an older runtime and a newer fragment says the document is unreadable; <code dir="auto">docs/player.md</code> says to paste the newest fragment first.</li> <li>The PDF of stories that show views of different sizes has pages of one size, the largest, with the smaller frames centred.</li> <li>A new story warns <code dir="auto">story.empty-scene</code> until <strong>Add to scene</strong> fills its scene; the status line says so.</li> <li>A story that cannot be drawn among several is left out and named; the page plays the others.</li> <li>The catalog keeps one page per story, and video stays one story per file. Colours per flow and filtered views with their own layout are not part of this change.</li> </ul> </div><footer class="portal-footer sl-flex"><p class="portal-release"><span class="portal-release-from">From Meltemi Diagrams <a href="https://github.com/askenaz-dev/meltemi-diagrams/releases/tag/v1.11.10">v1.11.10</a></span><span class="portal-release-date">published 2026-11-05</span><a class="portal-source" href="https://github.com/askenaz-dev/meltemi-diagrams/blob/v1.11.10/docs/decisions/0070-stories-as-the-flows-of-a-diagram.md">Source on GitHub</a></p><div class="pagination-links print:hidden astro-vhcebre3" dir="ltr"><a href="/diagrams/decisions/0069-the-app-is-meltemi-diagrams/" rel="prev" class="astro-vhcebre3"><svg aria-hidden="true" class="astro-vhcebre3 astro-6cvibhd6" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg><span class="astro-vhcebre3">Previous<br class="astro-vhcebre3"><span class="link-title astro-vhcebre3">0069. The app is Meltemi Diagrams</span></span></a><a href="/diagrams/launch/checklist/" rel="next" class="astro-vhcebre3"><svg aria-hidden="true" class="astro-vhcebre3 astro-6cvibhd6" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg><span class="astro-vhcebre3">Next<br class="astro-vhcebre3"><span class="link-title astro-vhcebre3">Launch checklist</span></span></a></div></footer></div></div></main></div></div></div></div></body></html>