Media
3 items
Description
Open and preview Mermaid diagrams found in JSDoc comments while browsing source files on GitHub. ## Why 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. --- ## Features - 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](https://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