Diagram Lens
Render diagram code blocks on GitHub — inline, instantly
Diagram Lens is a browser extension for Chrome and Firefox that automatically renders diagram code blocks on GitHub pages as inline SVG images, with a one-click toggle to switch back to the source code at any time.
Supported Formats
17 formats across 12 independent toggle switches:
| Format | Code fence identifiers |
|---|---|
| Graphviz / DOT | dot, graphviz, viz |
| PlantUML | plantuml, puml, uml, wsd |
| Mermaid | mermaid |
| Excalidraw | excalidraw |
| D2 | d2 |
| SvgBob | svgbob |
| Ditaa | ditaa |
| BlockDiag family | blockdiag, seqdiag, actdiag, nwdiag, rackdiag, packetdiag |
| BPMN | bpmn |
| WaveDrom | wavedrom |
| Vega / Vega-Lite | vega, vega-lite |
| Erd | erd |
Where It Works on GitHub
- Repository markdown files (README, docs, etc.)
- Issue and pull request descriptions and comments
- Gists
- Wiki pages
Key Features
- Auto-render or on-demand — choose whether diagrams render automatically on page load, or only when you click "Show diagram"
- Per-block toggle — every rendered block has a button to flip between the diagram and the original source code
- Per-format control — enable or disable each diagram format independently
- Theme support — Auto (follows GitHub's light/dark theme), Light, or Dark
- Non-destructive — original code blocks are preserved and restored when toggled or when the extension is disabled
- SPA-aware — handles GitHub's Turbo/Pjax navigation and dynamically loaded content
- Grayscale icon — the toolbar icon turns grayscale when the extension is disabled
- Powered by Kroki — diagrams generation requests are sent to kroki.io over HTTPS; no account or API key needed
Availability
Coming soon to the Chrome Web Store and Firefox Add-ons.
Support
If Diagram Lens saves you time, consider supporting development with a coffee donation. A privacy policy and support contact are also available.