feat: add Insert Diagram modal with previews and search filter

[ThisIs-Developer]

Description

This Pull Request introduces a new "Insert Diagram" utility button to the editor formatting toolbar. It opens a modal dialog that enables users to browse diagram/chart categories, search/filter template cards, view high-fidelity previews, and insert preset code blocks directly into their Markdown document.

To preserve website performance and loading speeds, diagram cards are rendered using lightweight, theme-aware inline SVGs that scale gracefully, avoiding eager loading of heavy third-party javascript libraries or network requests.

Key Changes

• Formatting Toolbar Addition: Added a new Diagram icon button (bi-diagram-3) and wired it to open the selection modal in index.html.
• Interactive Overlay UI: Implemented a responsive modal overlay featuring a category sidebar (Mermaid, PlantUML, Graphviz, D2, Vega-Lite, ABC Notation, WaveDrom, Markmap), search input, a template card grid, and a bottom preview section.
• Modern Styles: Styled sidebar elements, hover effects, search filters, and card selections matching the application's clean design and automatically supporting Light/Dark themes (styles.css).
• Templates & Previews: Included rich, predefined diagram configurations and high-fidelity card previews (e.g. Sequence Diagram showing "Sequence preview" and ER Diagram showing "ER preview" labels) inside script.js.
• Responsive Layout: Designed clean mobile layouts that automatically stack the sidebar horizontally on smaller viewport sizes.

Verification

• Opened modal to browse through all categories.
• Verified search queries correctly filter the available diagram cards.
• Verified selecting a card updates the bottom preview pane and enables the "Insert" action.
• Confirmed template insertion places code block snippet correctly at the cursor position.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
markdown-viwer	Ready	Preview, Comment	Jun 24, 2026 10:23am

[cloudflare-workers-and-pages]

Deploying markdown-viewer with    Cloudflare Pages

Latest commit:	163c6bc
Status:	✅  Deploy successful!
Preview URL:	https://ae21985e.markdown-viewer.pages.dev
Branch Preview URL:	https://feature-diagram-insert-modal.markdown-viewer.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying markdownviewer with    Cloudflare Pages

Latest commit:	163c6bc
Status:	✅  Deploy successful!
Preview URL:	https://81f5a717.markdownviewer.pages.dev
Branch Preview URL:	https://feature-diagram-insert-modal.markdownviewer.pages.dev

View logs

[auditee]

Implemented and pushed the diagram-rendering rewrite in c88a482.

What changed

• Replaced the split PlantUML/D2/Graphviz browser paths with renderer adapters that return normalized inline SVG.
• PlantUML now uses one source-preserving pipeline for the Insert Diagram preview and the final document renderer, with local Neutralino support, the PlantUML server, and Kroki fallback.
• D2 now uses validated Kroki GET encoding plus JSON POST fallback, timeouts, transient retries, syntax-aware errors, retry UI, and structured diagnostics. The renderer no longer mutates D2 source by prepending style declarations.
• Added a shared DiagramViewer UI for Mermaid, PlantUML, D2, Graphviz, Vega-Lite, WaveDrom, Markmap, and ABC SVG output: consistent toolbar placement, SVG/PNG export, copy, zoom in/out, reset, fit-to-screen, pointer/touch pan, loading/error states, and responsive bounds.
• Added document rendering for the Kroki-backed formats that were previously available only in the Insert Diagram modal.
• Synchronized the web renderer, preview worker, styles, modal, and desktop resources.

Root cause fixed

The preview and inserted PlantUML diagrams used different rendering/sizing paths. The final renderer combined engine-specific image assumptions with flex sizing, while the modal normalized SVG independently. The shared pipeline now preserves the renderer's viewBox, applies preserveAspectRatio="xMidYMid meet", and constrains only the outer viewport, so node geometry is never stretched or compressed.

Verification

• PlantUML: sequence, class, activity, component, state, use-case, mind map, Gantt, and object diagrams all rendered successfully.
• Original object-diagram regression: modal and inserted output both use viewBox="0 0 138 80"; measured aspect-ratio delta was 0.0003 (pixel rounding only).
• D2: six repeated valid renders completed with no false offline state; oversized diagrams stayed within the viewer width/height bounds; invalid source produced a syntax-specific error and Retry action.
• Shared viewer: SVG and PNG exports reported success; Zoom In, Zoom Out, Reset, Fit, and modal state were exercised; no diagram SVG overflowed its container.
• Static checks: node --check passed for both web/desktop scripts and workers, git diff --check passed, and web/desktop script/worker/style parity is exact.