Title: [Markdown Preview] gitGraph diagrams render empty (white box) on Windows when VS Code runs as Administrator — mermaid-markdown-features 10.0.0 / Mermaid 11.15.0

[psi16181918161phi]

[

Does this issue occur when all extensions are disabled?: Yes/No

• VS Code Version:
• OS Version:

Summary

In VS Code 1.121.0, Markdown Preview renders gitGraph Mermaid diagrams as empty
white boxes when VS Code is launched with Administrator privileges on Windows 10.
All other diagram types (flowchart, stateDiagram-v2, gantt, pie) render
correctly in the same file and same preview session.

This is a new regression in 1.121.0, which shipped the built-in
mermaid-markdown-features extension (v10.0.0) replacing the deprecated
bierner.markdown-mermaid extension.

Environment

• VS Code version: 1.121.0
• Extension: mermaid-markdown-features v10.0.0 (built-in)
• Mermaid version: 11.15.0 (bundled in markdown-preview-out/index.js)
• OS: Windows 10 Pro, Build 26200
• Electron: running as Administrator (elevated)
• Reproduced with: all third-party Mermaid extensions disabled

Steps to Reproduce

1. Launch VS Code as Administrator (right-click → Run as administrator)

2. Open any .md file containing a gitGraph fenced code block, e.g.:

   ```mermaid
   gitGraph
      commit id: "init"
      branch develop
      checkout develop
      commit id: "feat: scaffold"
      checkout main
      merge develop id: "merge"
   

3. Open Markdown Preview (Ctrl+Shift+V)

4. Observe the diagram container is an empty white box

Expected Behaviour

A fully rendered gitGraph SVG diagram, identical to what renders on
mermaid.live with the same source.

Actual Behaviour

Empty white rectangle where the diagram should be. No error message shown.
%%{init: {"logLevel": 2}}%% added to the diagram block produces zero
console output — the error is silently swallowed before Mermaid's logger runs.

Root Cause Analysis (from source inspection)

Traced through the bundled markdown-preview-out/index.js:

1. renderMermaidElement() calls mermaid.parse() — succeeds (no
   MermaidParseError thrown)
2. mermaid.render() → render6() → diag.renderer.draw() → draw4()
3. Inside draw4(), branch label dimensions are calculated via:

label.node().appendChild(labelElement);
const bbox = labelElement.getBBox();   // ← root cause
pos = setBranchPosition(branch, pos, index, bbox, rotateCommitLabel);

4. getBBox() returns {x:0, y:0, width:0, height:0} because CSS/web-font
   rendering is not yet complete at draw time in the Admin-mode webview context.
5. All branch positions evaluate to 0; setupGraphViewbox() sets the SVG
   viewBox to "0 0 0 0" → the SVG is present in the DOM but has zero
   dimensions and is invisible.
6. No error is thrown, so renderMermaidElement writes the empty SVG
   string to the container with no mermaid-error pre-element.

This is NOT a syntax error in the diagram — the identical source renders
correctly on mermaid.live, on GitHub.com, and in any standard browser.

Why gitGraph specifically?

All other diagram types do not call getBBox() for critical layout calculation.
gitGraph's draw4 uniquely relies on getBBox() to measure branch label
widths before any content is drawn. If it returns zero, the entire layout
collapses.

Related Issues

• Unable to run sandboxed process when run as elevated under applocker #122951 — "Unable to run sandboxed process when run as elevated under
  applocker" — the long-standing admin-mode Chromium sandbox issue; labelled
  workbench-run-as-admin, webview, upstream-issue-linked.

The CSS font rendering failure in the webview renderer when VS Code is elevated
is likely a downstream symptom of the same Chromium sandbox degradation
described in #122951.

Suggested Fix

In extensions/mermaid-markdown-features (or upstream in mermaid-js/mermaid):
defer draw4 until document.fonts.ready resolves, or fall back to an
estimated text dimension when getBBox() returns a zero-width result:

const bbox = labelElement.getBBox();
// Fallback: estimate ~8px per character when font metrics unavailable
const safeBbox = (bbox.width === 0 && bbox.height === 0)
  ? { x: 0, y: 0, width: branch.name.length * 8, height: 16 }
  : bbox;
pos = setBranchPosition(branch, pos, index, safeBbox, rotateCommitLabel);

Workaround (for users)

Push the file to GitHub and view the rendered markdown there — gitGraph renders
correctly via GitHub's own Mermaid renderer.

---

**To file it:** go to https://github.com/microsoft/vscode/issues/new?template=bug_report.md, paste the title and body above.

---

Now for the **local debug patch** to confirm the `getBBox()` theory before filing — this modifies the installed extension in-place (reversible by reinstalling VS Code / restarting): ---

**To file it:** go to https://github.com/microsoft/vscode/issues/new?template=bug_report.md, paste the title and body above.

---

Now for the **local debug patch** to confirm the `getBBox()` theory before filing — this modifies the installed extension in-place (reversible by reinstalling VS Code / restarting):