A powerful Chrome extension that leverages built-in AI to convert descriptions into beautiful diagrams directly in your browser!
- 🤖 Uses Chrome's built-in AI to understand diagram requirements
- 📊 Generates various diagram types:
- Flowcharts
- Sequence diagrams
- Class diagrams
- State diagrams
- Entity Relationship diagrams
- 🎯 Simple, intuitive interface
- ⚡ Real-time diagram generation
- 🎨 Clean, modern design
- 📱 Responsive side panel interface
Make sure you’re fully set up with Chrome’s AI capabilities by reviewing our quick Setup Guide.
- Clone this repository:
git clone https://github.com/Gitesh08/conspectus.git- Open Chrome and navigate to:
chrome://extensions/-
Enable "Developer mode" in the top right corner.
-
Click "Load unpacked" and select the extension directory.
mermaid-diagram-generator/
├── manifest.json
├── background.js
├── images/
│ ├── icon16.png
│ ├── icon32.png
│ ├── icon48.png
│ └── icon128.png
├── lib/
│ └── mermaid.min.js
└── sidepanel/
├── index.html
├── styles.css
└── script.js- Click the extension icon in your Chrome toolbar
- The side panel will open with the diagram generator interface
- Type your diagram description in natural language
- Example: "Create a flowchart showing user registration process"
- Example: "Make a sequence diagram for checkout flow"
- Click "Generate Diagram"
- View your generated diagram in the panel
- Use the reset button to start over
Create a flowchart for user authentication with login and signup options
Generate a sequence diagram showing how a payment processor handles transactions
Make a state diagram for a traffic light system
Draw an ER diagram for a basic e-commerce database- Built with vanilla JavaScript
- Uses Chrome's built-in AI API
- Integrates Mermaid.js for diagram rendering
- Follows Chrome Extension Manifest V3 guidelines
- CSP-compliant implementation
Distributed under the MIT License. See LICENSE for more information.
- Mermaid.js for diagram rendering
- Chrome team for the built-in AI API
⭐ If you found this project helpful, please consider giving it a star!
Made with ❤️ by Gitesh