Replace Current Markmap Rendering with Official Markmap Rendering Engine

[ThisIs-Developer]

Replace Current Markmap Rendering with Official Markmap Rendering Engine

Problem & Root Causes Resolved

1. Incorrect Renderer: Replaced the previous simple Blue/Gray indentation-based box layout generator with the official markmap-lib and markmap-view rendering engines.

2. Code Blocks Ignored/Omitted: Fixed a bug in preview-worker.js where the segmented preview block splitter prematurely split the markmap block at inner code blocks by normalizing Markmap fences before block splitting.

3. Accidental Canvas Panning/Dragging: In the normal preview pane, the canvas could be dragged out of view. Disabled D3 zoom and panning listeners on the preview canvas to keep it fixed, while retaining full CSS-based panning/zooming inside the fullscreen/zoom modal.

4. Excessive Vertical Whitespace: Resized the SVG height dynamically post-layout using the exact node tree bounds (rect.y2 - rect.y1) to prevent large empty spaces.

5. Blank Template Previews (Root Cause Found & Fixed):

   The Markmap.create(svg, opts, data) static method internally fires setData(data).then(() => fit()) — a detached promise chain that returns immediately without waiting for rendering. The setData() method itself is async because it contains await new Promise(requestAnimationFrame) to measure foreignObject sizes via _relayout(). After the requestAnimationFrame, it applies node positions through D3 transitions.

   Because Markmap.create() returns the instance before setData() completes, the offscreen serialization helper (renderMarkmapPreviewSvg) calls new XMLSerializer().serializeToString(svg) on an SVG that has no rendered content — the nodes, paths, circles, and foreignObjects haven't been created yet.

   Fix: Replaced Markmap.create(svg, opts, root) with manual construction:

   const instance = new markmap.Markmap(svg, markmapOptions);
   instance.transition = (sel) => sel; // synchronous transitions for compact mode
   await instance.setData(root);       // wait for rendering to complete

   This ensures all SVG child elements are in the DOM before serialization.

6. Vertical Centering: Set autoFit: false in the options to prevent renderData() from calling this.fit() at the end (line 1314 of markmap-view.js). Applied a tight viewBox using the computed layout bounds for compact mode, with relative CSS dimensions to let the browser center via flexbox.

Files Changed

• preview-worker.js & desktop-app/resources/js/preview-worker.js
• script.js & desktop-app/resources/js/script.js
• styles.css & desktop-app/resources/styles.css
• desktop-app/prepare.js

Testing & Verification

• Panning/dragging is disabled in normal preview, but works in fullscreen modal.
• Vertical space matches diagram size.
• Template card previews render with visible content.
• Template cards have identical dimensions and centered previews.
• Bottom preview scales correctly without clipping.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
markdown-viwer	Ready	Preview, Comment	Jun 29, 2026 6:16pm

[cloudflare-workers-and-pages]

Deploying markdown-viewer with    Cloudflare Pages

Latest commit:	e4004d8
Status:	✅  Deploy successful!
Preview URL:	https://703bee46.markdown-viewer.pages.dev
Branch Preview URL:	https://fix-markmap-nested-code-bloc.markdown-viewer.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying markdownviewer with    Cloudflare Pages

Latest commit:	e4004d8
Status:	✅  Deploy successful!
Preview URL:	https://fa1eb95d.markdownviewer.pages.dev
Branch Preview URL:	https://fix-markmap-nested-code-bloc.markdownviewer.pages.dev

View logs