Skip to content

README.md

Latest commit

 

History

History
190 lines (148 loc) · 6.23 KB

README.md

File metadata and controls

190 lines (148 loc) · 6.23 KB
Raw

GPT RENDER: Graphviz diagram renderer for GPT responses in Firefox and Chrome

Right-click on a DOT code block in any web page (including ChatGPT) and render it to SVG in a lightweight in-page popup.

Features

  • Context menu entry: render selection or the nearest code block
  • In-page SVG popup with Close button
  • Offline Graphviz via viz.js with full.render.js worker
  • Diagnostics check from background to content: scheme support, viz.js present, worker reachable
  • Modular content router and UI host ready for more renderers

Project structure

gptrender
├── dist
│   ├── chrome
│   │   ├── icons
│   │   ├── src
│   │   │   ├── renderers
│   │   │   │   └── renderer_graphviz.js
│   │   │   ├── background.chrome.js
│   │   │   ├── background.firefox.js
│   │   │   ├── content_bootstrap.js
│   │   │   └── content_router.js
│   │   ├── ui
│   │   │   ├── popup_host.css
│   │   │   └── popup_host.js
│   │   ├── vendor
│   │   │   └── graphviz
│   │   │       ├── full.render.js
│   │   │       └── viz.js
│   │   ├── background.js
│   │   └── manifest.json
│   ├── firefox
│   │   ├── icons
│   │   ├── src
│   │   │   ├── renderers
│   │   │   │   └── renderer_graphviz.js
│   │   │   ├── background.chrome.js
│   │   │   ├── background.firefox.js
│   │   │   ├── content_bootstrap.js
│   │   │   └── content_router.js
│   │   ├── ui
│   │   │   ├── popup_host.css
│   │   │   └── popup_host.js
│   │   ├── vendor
│   │   │   └── graphviz
│   │   │       ├── full.render.js
│   │   │       └── viz.js
│   │   ├── background.js
│   │   └── manifest.json
│   └── gpt-diagrams-chrome.zip
├── icons
├── manifests
│   ├── manifest.chrome.json
│   └── manifest.firefox.json
├── src
│   ├── renderers
│   │   └── renderer_graphviz.js
│   ├── background.chrome.js
│   ├── background.firefox.js
│   ├── content_bootstrap.js
│   └── content_router.js
├── tools
│   └── build.mjs
├── ui
│   ├── popup_host.css
│   └── popup_host.js
├── vendor
│   └── graphviz
│       ├── full.render.js
│       └── viz.js
├── LICENSE
├── package.json
└── README.md

Requirements

  • Firefox Developer Edition or Firefox Release
  • Chrome 116+ (tested on current release)
  • No external services required
  • npm
  • Node 18 or newer

Install on Firefox (temporary)

  1. Open about:debugging
  2. This Firefox → Load Temporary Add-on → select your manifest.json
  3. Open a normal https page
  4. Right-click inside a DOT code block → Graph with Graphviz

Notes on restricted pages:

  • Scripts do not run on about:*, addons.mozilla.org, Reader View, built-in PDF viewer, or view-source:. Use a normal http or https page. file:// works if your manifest matches file URLs and you enable file access.

Install on Chrome from a zip

  1. Create or download the extension zip
  2. Unzip it to a folder on disk
  3. Visit chrome://extensions
  4. Toggle Developer mode on
  5. Click Load unpacked and choose the unzipped folder
  6. Optional: toggle Allow access to file URLs if you want to render on file:// pages

To update later, replace files in that folder and click Reload on the card in chrome://extensions.

Usage

Two ways to render:

  • Highlight any DOT snippet, right click, choose Graph with Graphviz
  • Right click inside a code block that contains DOT, choose Graph with Graphviz

A popup appears with the SVG. Close it with the button in the header.

Sample DOT to test

digraph G {
  rankdir=TB;
  a -> b -> c;
  a -> c;
}

HTML-like label note

When using <TABLE> labels, you must escape & as &amp;. The router tries to be forgiving, but it is best practice to write them correctly.

How it works

  • content.js listens for background probes and render requests
  • Background creates the context menu and sends a GRAPHVIZ_DIAG ping to verify:
    • Page scheme is http, https, or file
    • window.Viz is present
    • vendor/full.render.js is reachable via browser.runtime.getURL
  • If checks pass, background sends GRAPHVIZ_RENDER with either the selection or a null payload
  • content.js finds DOT text when null is provided, renders via viz.js and inserts an SVG popup

Permissions

  • contextMenus to add the right-click item
  • activeTab and tabs to message content and inject alerts into the page
  • <all_urls> so the content script can detect code blocks where allowed

Troubleshooting

  • The message says content scripts are not running
    You are on a restricted page, or the URL scheme is unsupported. Try a normal https page. For local files, enable file access.

  • Viz is not defined
    Ensure vendor/viz.js loads before content.js in manifest.json. Reload the extension, then refresh the tab.

  • Worker not reachable
    Confirm vendor/full.render.js is present and listed under web_accessible_resources in the manifest. Paths must match exactly.

  • No popup appears
    Open the page console. Look for [Graphviz] from content or [Graphviz BG] from background. Errors will include the reason.

  • documentElement is null
    Ensure content init runs after DOM is ready. Use DOMContentLoaded if you start work very early.

Privacy and security

  • Rendering is fully local
  • No network requests aside from loading the worker from the extension bundle
  • No data leaves the browser

Roadmap

Optional modules as separate renderers and assets:

  • Mermaid (vendor/mermaid/mermaid.min.js)
  • Cytoscape.js (vendor/cytoscape/cytoscape.min.js)
  • ECharts (vendor/echarts/echarts.min.js)

Additions will require:

  • Vendor files under vendor/
  • Web accessible entries in manifest.json
  • Detection plus dispatch in content.js

License

  • viz.js and full.render.js are MIT licensed. Keep their headers.
  • Repo code is covered by the LICENSE in this project.