Skip to content

Render Mermaid diagrams in exported HTML - #1173

Closed
YoshihideShirai wants to merge 3 commits into
asciidoctor:mainfrom
YoshihideShirai:codex/htmlmermaidsvg
Closed

Render Mermaid diagrams in exported HTML#1173
YoshihideShirai wants to merge 3 commits into
asciidoctor:mainfrom
YoshihideShirai:codex/htmlmermaidsvg

Conversation

@YoshihideShirai

Copy link
Copy Markdown
Contributor

What changed

This renders Mermaid diagrams during HTML export by converting generated <pre class="mermaid"> blocks into embedded SVG before the HTML is written.

The export path now reuses Mermaid in a Node/JSDOM environment, keeps Mermaid's strict security level, and only runs this extra rendering step for the html5 backend. A focused unit test covers the exported HTML transformation.

Why

Fixes #1170. In v4, the VS Code preview initializes Mermaid in the webview, but exported HTML is static and did not include a Mermaid renderer or pre-rendered diagram output. As a result, Mermaid blocks exported as raw <pre class="mermaid"> elements and stayed blank in a browser.

Validation

  • npm install --package-lock-only --ignore-scripts
  • npm run lint
  • npm run format && git diff --exit-code
  • npm run typecheck
  • npm run build-test
  • npm run test:unit

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.

Mermaid diagrams are not rendered in exported HTML in version 4

1 participant