Chrome Extension
Install the ToDiagram Chrome Extension to visualize data from any webpage instantly
The ToDiagram Chrome Extension allows you to select structured data from any webpage and instantly visualize it as an interactive diagram. Perfect for debugging API responses, exploring configuration files, and analyzing data without copy-pasting.
Overview
The Chrome Extension acts as a bridge between web content and the ToDiagram editor. Select JSON, YAML, CSV, or XML data on any webpage, and the extension will open it directly in ToDiagram for visualization and editing.
Key Benefits:
- Zero Copy-Paste: Select text and visualize instantly
- Works Anywhere: Any website, documentation page, or web app
- Auto-Detection: Automatically identifies data format
- Privacy-First: Minimal permissions, data processed client-side
- Always Available: Quick access from browser toolbar
Installation
Open Chrome Web Store
Visit the ToDiagram Chrome Extension page on the Chrome Web Store.
Add to Chrome
Click the "Add to Chrome" button in the top-right corner.
Confirm Installation
When prompted, click "Add extension" to confirm the installation.
Pin Extension (Optional)
For quick access, click the puzzle piece icon in your toolbar and pin the ToDiagram extension.
The extension works on all Chromium-based browsers including Chrome, Edge, Brave, and Opera.
How to Use
Select Data
Highlight any structured data on a webpage (JSON, YAML, CSV, XML).
Right-Click
Right-click on the selected text to open the context menu.
Choose "Open in ToDiagram"
Click the "Open in ToDiagram" option from the menu.
View Diagram
A new tab opens with your data visualized as an interactive diagram.
Supported Formats
The extension automatically detects and handles these formats:
| Format | Extensions | Common Uses |
|---|---|---|
| JSON | .json | API responses, configs, data objects |
| YAML | .yaml, .yml | Kubernetes manifests, configs, CI/CD files |
| XML | .xml | Legacy APIs, SOAP responses, configs |
| CSV | .csv | Tables, exports, datasets |
Format detection is automatic. Just select the data and the extension handles the rest.
Troubleshooting
Popup Blocker Issues
Problem: New tab doesn't open when using extension
Solutions:
- Check browser popup blocker settings
- Allow popups for
todiagram.com - Use context menu if issues persist
FAQ
Additional Resources
- Chrome Web Store: Install Extension
- Video Tutorial: See demo at chrome-extension page
- Support: Contact via todiagram.com
- Feature Requests: Submit via support
Next Steps
Now that you have the extension installed:
- Learn about Data Formats for better understanding
- Explore Interface Guide to master the editor
- Try Keyboard Shortcuts for faster workflow
- Check out Export Options for sharing diagrams