Skip to content

feat: add Insert Diagram modal with previews and search filter#190

Open
ThisIs-Developer wants to merge 8 commits into
mainfrom
feature/diagram-insert-modal
Open

feat: add Insert Diagram modal with previews and search filter#190
ThisIs-Developer wants to merge 8 commits into
mainfrom
feature/diagram-insert-modal

Conversation

@ThisIs-Developer

Copy link
Copy Markdown
Owner

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

vercel Bot commented Jun 22, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
markdown-viwer Ready Ready Preview, Comment Jun 23, 2026 7:08pm

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 23, 2026

Copy link
Copy Markdown

Deploying markdown-viewer with  Cloudflare Pages  Cloudflare Pages

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

View logs

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 23, 2026

Copy link
Copy Markdown

Deploying markdownviewer with  Cloudflare Pages  Cloudflare Pages

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

View logs

…s, cachestorage, local neutralino compilation)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant