GitHub Mermaid JSDoc Viewer Guillaume Ongenae מאת

Documenting architecture or flow logic with a ```mermaid block inside a JSDoc comment is a nice way to keep diagrams next to the code they describe — but GitHub only renders it as a fenced code block, not a diagram, whether you're reading the source or reviewing a diff. This extension adds a small badge next to the line number of every such block so you can preview or open the diagram without leaving the page or copy-pasting into an external tool.

• Scans /** ... */ JSDoc comments in .js/.jsx/.ts/.tsx files, and plain fenced blocks in .md/.markdown/.mdx files, for ```mermaid code blocks — on blob (source file) pages, and on PR "Files changed", commit and compare diff pages
• Overlays a small 📊 badge next to the line number of each detected block; click it to open a zoomable/pannable preview (via mermaid.ink), which also links to the full mermaid.live editor
• On diff pages, if the diagram itself was edited (not just surrounding code), the badge turns into 🔀 and clicking it shows the diagram before and after side by side — a red-tinted "Before" pane and a green-tinted "After" pane, each with its own "Open in Mermaid Live" link
• Preview supports scroll-to-zoom, drag-to-pan, double-click-to-reset, and a +/−/⟳ toolbar
• Works on GitHub's Turbo-driven navigation and lazy-loaded diffs — badges refresh automatically as you browse between files or scroll
• Light and dark mode support