feat(viewer): settings, Mermaid, export as seen by damusix · Pull Request #57 · noormdev/ignatius

damusix · 2026-10-27T13:25:02Z

Seven viewer requests in one change. Contract: docs/spec/viewer-qol.md; why: docs/design/viewer-qol.md.

Mermaid is a separate dist/static/mermaid.js (5.3 MB). Live mode loads it only when a page has a diagram; ignatius export inlines it only when a body has one. The app bundle grew 7 KB.
Diagram look: full-strength entity colours cycled per node, black outlines, shadows, bold labels, on a dotted panel. theme.mermaid adds stroke_width, radius, shadow and node_fills next to the per-mode Mermaid variables.
Theme safety: Mermaid writes themeVariables and themeCSS into the SVG unescaped. Every ignatius.yml value that reaches them is checked, palette colours included; a dropped value is a config.mermaid_theme_invalid warning.
Sidebar tab rests as a thin lip at the right edge and slides out on hover or focus.
Keys: Shift+L previous graph layout, L/Shift+L flip the flow view, R reset layout, Cmd/Ctrl+C copy link (only with no text selected), Shift+H hide the selected entities' groups. Groups dialog gets Hide/Show per group. Help shows keycaps.
Settings is sectioned and owns the light/dark choice; the header theme button is gone, so test/visual/theme.ts switches theme through Settings for the visual scripts.
Export HTML carries only this model's layout entries, because the localStorage layout stores hold every model served on the origin.
Deferred: viewer-qol-f-1, a possible React dev build in the shipped bundle.

Markdown typography, a Settings modal (always open examples), a sidebar edge tab, Dictionary and sidebar scroll memory, Mermaid diagrams themed from theme.mermaid, Export HTML of the current view, and a modal focus trap. The modeling skill teaches ## Logic flows inside process bodies. Mermaid ships as a lazily loaded sidecar so models without diagrams pay nothing, and theme values are filtered because Mermaid writes them into the SVG unsanitized.

Diagrams take full-strength entity colours, black outlines, shadows and bold labels, with theme.mermaid stroke_width, radius, shadow and node_fills. The sidebar tab rests as a thin lip and slides out on hover or focus. Palette colours that reach the diagram stylesheet are checked, since Mermaid writes them unescaped. Prose is capped at 72ch.

…Settings Shift+L steps the graph layout back; L/Shift+L flip the flow view; R resets the layout; Cmd/Ctrl+C copies the view link unless text is selected; the Groups dialog and Shift+H hide whole groups as one undo step. Help shows each key as a keycap. Settings is split into sections and takes over the light/dark choice from the header button.