Mermaid diagrams in Markdown (#462): installed Mermaid in an isolated, script-free, offline Chromium page

.github/workflows/ci.yml

@@ -86,6 +86,19 @@ jobs:
       - uses: ./.github/actions/linux-shells
         if: runner.os == 'Linux'
       - run: npm ci
+      # The Mermaid diagram tests use a real Mermaid. NMSh never downloads one; CI fetches the pinned release, checks its npm
+      # integrity and keeps only the bundle (tests/diagramsChrome.test.ts reads NMSH_TEST_MERMAID).
+      - name: Mermaid for the diagram tests
+        shell: bash
+        run: |
+          set -euo pipefail
+          dir="$RUNNER_TEMP/mermaid"
+          mkdir -p "$dir"
+          npm pack mermaid@12.2.0 --pack-destination "$dir" --silent > /dev/null
+          actual="sha512-$(openssl dgst -sha512 -binary "$dir/mermaid-12.2.0.tgz" | openssl base64 -A)"
+          test "$actual" = "sha512-w7nr/SFrLO7BaVTs3dQTvYSV6nYSBj0Yy9DjBhsIJtAcHqRzXSq4Pg32ujHZ/AdWsAMNEvvhbm5dt9E2tOiHzw=="
+          tar -xzf "$dir/mermaid-12.2.0.tgz" -C "$dir" package/package.json package/LICENSE package/dist/mermaid.min.js
+          echo "NMSH_TEST_MERMAID=$dir/package" >> "$GITHUB_ENV"
       # Built-launcher tests must execute rather than silently skip on fresh runners.
       - run: npm run build
       - run: npm test -- --shard=${{ matrix.shard }}/2 --test-timeout=120000

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Added
 
+- **Mermaid diagrams in Markdown** ([#462](https://github.com/raiseCatError/notMyShell/issues/462); [design](docs/design/diagrams.md)). A ```` ```mermaid ```` fence is drawn as a real diagram — flowcharts, sequence, class, state, ER, Gantt, pie, journey, git graph, mind map, timeline, quadrant, XY, requirement, Sankey, block and C4 diagrams — in Preview (NMSh's renderer and the Chromium preview), Split's preview pane, the viewer and Hybrid's inactive blocks, with the image backend your terminal supports (Kitty graphics, iTerm2, Sixel, or character art); `i` opens it in the image viewer to zoom and pan. NMSh uses the Mermaid you installed (`npm install -g mermaid`, or `NMSH_MERMAID`) inside the real browser it already drives, and downloads nothing. The page that draws runs no document script, loads nothing from the network or disk and returns only pixels; Mermaid's security settings are locked against directives. Settings → General → **Mermaid diagrams**: *On request* (default: press `D`, or F1 › Diagrams while editing — opening a document never starts a browser), *Automatic*, or *Off*. The fence stays the source: in Hybrid the block under the caret is its exact text, edits are drawn after a pause, and anything not drawn (not asked yet, no browser or Mermaid, a syntax error, too large, a timeout) shows the fence as written with `(diagram not drawn: reason)`. Drawings are cached by content and theme, bounded in number, bytes and time, and the renderer page closes when no document shows a diagram.
 - **Hybrid Markdown editing** ([#460](https://github.com/raiseCatError/notMyShell/issues/460)). **F3** in a Markdown document (or `H` from the read-only views) shows it *rendered* — headings, emphasis, links, lists, tables, quotes, code — except for the block your caret (or selection) is in, which shows its exact Markdown source and is fully editable. Move on and it renders again. It is another presentation of the same buffer: every key is the editor's (letters always type; snippets, list/table helpers, undo/redo, hunk review, recovery drafts and Save As all work as in the source editor), the caret lives in source positions, and switching views never changes the text. The smallest safe block is revealed — the whole list for a nested item, the whole table, the whole fence — and a selection shows every block it touches as source. The view is anchored to a source line, so revealing a block does not move what is above it. F3 again returns to the source editor; in the split view (F2) F3 switches the text pane between source and hybrid. Limits: Markdown files only (not HTML); images appear as `[image: alt]`; Up/Down move by source line; pointer input is not handled.
 - **Expandable `<details>`** ([#462](https://github.com/raiseCatError/notMyShell/issues/462)). The native Markdown/HTML viewer now shows `<details><summary>…</summary>…</details>` as a disclosure: `▸ Summary` when closed (hiding its content), `▾ Summary` with the content indented when open — in the rendered view, the preview, the split's preview pane and the hybrid view. GitHub-style details, with a blank line and Markdown inside and `</details>` in a later block, are understood (nested ones too); the `open` attribute sets the starting state. **`z`** toggles the summary at or below the top of the screen, **`Z`** all summaries in view; choices are kept by summary text, survive scrolling, resizing and edits above, and never change the file. Scripts, handlers and unknown tags in a details block are inert text. Not yet: pointer clicks (the viewer has no pointer support), and toggling inside the hybrid view (it shows each details as written: closed unless `open`).
 - **Math in Markdown** ([#462](https://github.com/raiseCatError/notMyShell/issues/462)). `$…$` (GitHub's rules: no space inside the dollars, not before a digit) and display `$$…$$` / ```` ```math ```` render as typeset math in the viewer, preview, split and hybrid view, offline and without a browser: real stacked fractions with a bar, roots, super- and subscripts (Unicode where every character has one, an unambiguous `x^(…)` form otherwise, placed in two dimensions in display), `∑ ∏ ∫` with limits, Greek letters, operators and relations, `\left…\right` stretched delimiters, `matrix`/`pmatrix`/`bmatrix`/`vmatrix`/`cases` and `\text`. It is a defined subset, not full LaTeX: anything outside it (unknown commands, too large, too wide, a fraction that does not fit one row inline) stays as its source text with a dim `(not rendered: reason)`, never a guess. Source is preserved exactly (the editor and `/copy` are unchanged), Safe Glyphs draw with plain ASCII, and formulas are limited in size, depth and rows. Rendering through KaTeX in the optional browser is not part of this slice.
@@ -16,7 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - **Split view for Markdown and HTML documents** ([#461](https://github.com/raiseCatError/notMyShell/issues/461)). **F2** (or `s` in the read-only views) in the document workspace shows the editor beside NMSh's own preview of the *same* buffer: the text on the left, the rendered document on the right, updated as you type, without saving. The preview follows the caret to its block (`l` in the preview pane turns that off), **Ctrl+O** moves between the panes, `x` swaps the sides and `<` `>` change their widths (30–70%). Only the text pane is editable; keys typed while the preview has the focus never reach the text. The preview pane has its own find (`/`) and heading prompt (`#`). Below 100 columns only the focused pane is shown at full width, and widening the terminal brings the split back. Esc leaves for the read-only source view with your unsaved text kept; F2 again returns to editing. The browser-quality preview is not used in the split; the pane is NMSh's renderer. Mouse input in the split is not handled yet.
 - **Heading navigation** ([#462](https://github.com/raiseCatError/notMyShell/issues/462), first slice). In a Markdown or HTML document, **`#`** in the viewer or workspace opens a heading prompt: type to narrow, Up/Down choose, Enter jumps (source or rendered view, any width) and **Backspace** goes back to where you were. In the editor, F1 then `h` (or *Go to heading…* in the snippet palette) lists the headings with their depth; `j` / *Back* returns to the caret position you left, even after edits. `/view README.md#install` opens the file at that heading. Anchors follow GitHub's rules (lower-case, punctuation dropped, `-1`, `-2` for repeats; raw HTML headings listed without an anchor); Jekyll/Kramdown ids are different and are not implemented (see the [architecture note](docs/architecture/document-source-map.md)). Underneath, every parsed Markdown block now knows its source lines and every rendered row its block's line, the shared map the coming split view and hybrid editing build on.
 - **`/playground`: an unsaved Markdown or HTML document** ([#468](https://github.com/raiseCatError/notMyShell/issues/468), second slice). `/playground md`, `/playground html`, or `/playground` to choose, opens an editable scratch document in the document workspace at once — type, switch between source, edit and preview with the usual keys, and use the snippets. Nothing is saved for you: **Ctrl+S asks for a file name** (Save As creates a new file with the same checked save as `/edit` and never replaces an existing one), and closing with unsaved text asks Save As, Discard or Keep editing. If NMSh or the terminal dies, the text is kept as a private draft and `/playground recover` brings it back. The preview is NMSh's own renderer: no browser process, no folder served, scripts and network stay off. Split view arrives with [#461](https://github.com/raiseCatError/notMyShell/issues/461).
-- **Snippets in `/edit`** ([#468](https://github.com/raiseCatError/notMyShell/issues/468), first slice). In a Markdown or HTML file, **F1** (Markdown: F1 then `/`) opens a searchable palette of built-in templates — headings, tables, task lists, fenced code, block quotes, footnotes, Mermaid and math blocks as source text (NMSh does not render them), an HTML page skeleton, semantic sections, lists, tables, links and images — together with the editing actions that already exist. Type to filter, Enter inserts. A snippet is plain text inserted as one undoable edit; its placeholders are selected one by one with **Tab / Shift+Tab** for as long as you are inside it, **Esc** or moving away ends that without touching the text, and Tab is an ordinary tab everywhere else. Block templates start on their own line, wrap a selection where it makes sense, and follow the line's indentation. Nothing is executed, fetched or installed.
+- **Snippets in `/edit`** ([#468](https://github.com/raiseCatError/notMyShell/issues/468), first slice). In a Markdown or HTML file, **F1** (Markdown: F1 then `/`) opens a searchable palette of built-in templates — headings, tables, task lists, fenced code, block quotes, footnotes, Mermaid and math blocks (inserted as source text), an HTML page skeleton, semantic sections, lists, tables, links and images — together with the editing actions that already exist. Type to filter, Enter inserts. A snippet is plain text inserted as one undoable edit; its placeholders are selected one by one with **Tab / Shift+Tab** for as long as you are inside it, **Esc** or moving away ends that without touching the text, and Tab is an ordinary tab everywhere else. Block templates start on their own line, wrap a selection where it makes sense, and follow the line's indentation. Nothing is executed, fetched or installed.
 - **Review changes made on disk while you edit** ([#463](https://github.com/raiseCatError/notMyShell/issues/463), third slice). When saving finds the file changed by something else, the conflict choice now includes **Review changes** (`v`). It merges three versions — the file as you opened or last saved it, your unsaved text and the file now on disk — and lists the hunks. Changes only the disk made default to the disk's version (`m` keeps yours instead); text you both changed, or changes that touch each other, are conflicts that stay undecided until you pick yours (`m`), the file's (`t`), both (`b`) or the original (`o`). `n`/`p` move between hunks, `c` jumps to the next conflict, `r` previews the result, `z` takes back a decision, Esc closes without changing anything. **Enter** applies the result to the editor as one undoable edit after re-reading the file (if it changed again, the review starts over); nothing is written to the file until you save, and the save re-checks it as always. A deleted file offers Save anyway only. Very different files (more than 1,500 edits from the version you opened) are one coarse conflict, never a guess.
 - **Table editing in `/edit`** ([#463](https://github.com/raiseCatError/notMyShell/issues/463), second slice). In a GFM table in a Markdown file, **Tab / Shift+Tab** move between cells and select the cell's text (the delimiter row is skipped; outside a table Tab is a tab as before), the status line names the row and column, and **F1** adds the table actions: add a row below, delete a row, add a column to the right, delete a column, cycle the column's alignment. Each edits only the table rows it changes, keeps your spacing, outer pipes and alignment colons, and is one undo step; the table is never regenerated or re-padded.
 - **Markdown editing helpers in `/edit`** ([#463](https://github.com/raiseCatError/notMyShell/issues/463), first slice; Markdown files only). **Enter** continues a bullet, numbered or task list (same marker and indentation, next number, unchecked box) and splits an item at the caret; on an empty item it ends the list (a nested one steps out a level). **Tab / Shift+Tab** on list items indent or outdent the item with its children (selected items together); elsewhere Tab is a tab as before. **F1** opens the Markdown actions: toggle a task checkbox, renumber the list at the caret, insert a link or image around the selection, wrap the selection in bold, italic, code or strikethrough (again to unwrap). Every action changes only the lines it names and is one undo step; text is never reflowed or regenerated.

docs/design/browser-engine.md

@@ -13,7 +13,8 @@ to install or set and everything else keeps working.
 | Process | `engine.ts` | One lazily started process tree, idle shutdown, `shutdown()`, relaunch after a crash. |
 | Page | `page.ts` | One DevTools target plus NMSh's policy: URL rules, frames, input, find, zoom, dialogs, popups, downloads. |
 | Preview | `preview.ts` | The loopback server behind a document preview. |
-| Markdown | `markdownHtml.ts` | `markdownToHtml` and `htmlDocumentFor`. |
+| Markdown | `markdownHtml.ts` | `markdownToHtml` and `htmlDocumentFor` (Mermaid fences become `data:` PNG images when drawn). |
+| Diagrams | `diagram.ts` | The Mermaid renderer page: isolated world, page scripts off, no network, SVG drawn only as an image, PNG out ([diagrams](diagrams.md)). |
 
 ## Process