ChatGPT Graph Extension

Transform ChatGPT conversations into interactive graph visualizations with branches and tangents.

Installation

1. Load the extension:

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" (top-right toggle)
   • Click "Load unpacked"
   • Select the GraphFlow folder

2. Visit ChatGPT:

   • Go to chat.openai.com
   • Look for the purple graph button in the bottom-right corner

3. Toggle graph view:

   • Click the purple button to switch between normal and graph view

Usage

Basic Controls

• Click & Drag - Pan around the graph
• Mouse Wheel - Zoom in/out
• Click Node - View full message
• Hover Node - Quick preview

Buttons

• + / - - Zoom in/out
• Fit - Center all nodes
• Reset - Reset view
• Back to Chat - Return to normal ChatGPT

Branch Creation

• Right-click any node
• Select "Branch from here"
• Return to chat view and continue from that point

Node Colors

• 🔵 Blue - Your messages
• 🟢 Green - ChatGPT responses
• 🟠 Orange - Branch points

Troubleshooting

Extension not appearing

• Refresh the ChatGPT page (Cmd/Ctrl + R)
• Check extension is enabled at chrome://extensions/
• Reload extension (click refresh icon)

Graph not rendering

• Check browser console (F12) for errors
• Ensure you have messages in the conversation
• Try toggling view off and on again

Cytoscape not loading

• Verify lib/cytoscape.min.js exists in extension folder
• Reload extension in Chrome
• Check console for "Cytoscape loaded successfully" message

Requirements

• Chrome, Edge, or Chromium-based browser (v88+)
• ChatGPT account at chat.openai.com

License

MIT License - See LICENSE file