AI-powered Chrome extension that transforms dense text into clear, interactive diagrams right inside your browser.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
The modern web is built on text, but human understanding is visual. Students, researchers, and professionals have to sift through dense articles, reports, and textbooks, trying to connect the dots hidden within paragraphs. The cognitive load is immense. Manually creating diagrams to aid understanding is slow, disruptive, and requires switching to separate design tools, breaking concentration and slowing progress. This not only makes comprehension harder, especially for visual learners or anyone short on time, but also makes communicating ideas harder. Complex concepts get buried in paragraphs when they could be shared more clearly and accurately through visual structure.
Graft is a Chrome extension that turns highlighted text into clear, customizable diagrams directly on the webpage, without switching tools or tabs.
- Highlight any passage and Graft analyzes the content to generate a diagram
- Customize your diagram manually on the canvas
- Refine the diagrams with natural language commands like “remove the node containing 'Photosynthesis'", "add a node with the label 'Oxygen'", "Connect the nodes that contain 'Energy'"
- Generate supplemental images or icons for your visual diagram
- Export the final diagram as a PNG or SVG for use in presentations, notes, or articles
- View your history of generated diagrams
This makes complex information not only easier to understand, but also easier to verify and share.
- Get a Gemini API Key from Google AI Studio and link to a billing account (not free tier) if you want to use the image generation feature
- Clone the repo
git clone https://github.com/JasonMun7/Graft.git
- Install NPM packages
npm install
- Create a
.envfile at the root and enter your API keyGOOGLE_API_KEY = "ENTER YOUR API KEY" - Build the extension
npm run build
- Make sure the Prompt API flags are enabled at chrome://flags
- Enable 'Developer mode' at chrome://extensions/
- Click 'Load unpacked' and select the
distdirectory that was created.
This is primarily for image generation or other features in the future that may use the backend
npx tsx src/server.ts-
Go to a website (eg. https://www.britannica.com/science/photosynthesis)
-
Highlight a paragraph. You have two options:
- Click on the blue button
- Paste the text in the text area and click 'Next'
- Click on the blue button
-
Click 'Generate Diagram'
-
Customize your diagram
-
Edit the diagram manually in the Canvas
-
Edit the diagram with natural language
-
Generate supplemental images with Imagen
-
Summarize your diagram
-
-
Export your diagram
-
Check your history or Create a new diagram
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT license. See LICENSE for more information.
- Jason Mun - jason.mun484@gmail.com - https://www.linkedin.com/in/jason-mun-25181b1b9/
- Andrew Cheung - andrewcheung360@gmail.com - https://www.linkedin.com/in/andrewcheung360/
- Justin Chung - justinjjhchung@gmail.com - https://www.linkedin.com/in/justinjjhchung/
Project Link: https://github.com/JasonMun7/Graft