Diagram Weaver

Generate beautiful, production-level architecture diagrams instantly from a dedicated VS Code Sidebar.
Super fast. Works with 100% FREE AI models (Groq & Gemini) — No Copilot needed.

🖼️ Beautiful Diagram Styles

Diagram Weaver supports three distinct visual aesthetics. Pick the one that fits your project!

🎨 Eraser.io Style (Beautiful Modern)

🔷 Mermaid Classic

📐 Draw.io Export Mode

⚡ Why Diagram Weaver?

🛠️ The Setup (100% Free & Easy)

Diagram Weaver supports 3 powerful AI providers.

🥇 Option 1: Groq API (Highly Recommended)

Groq uses advanced Llama models running on specialized hardware. It is mind-blowingly fast (1-3 seconds) and completely free.

1. Go to 👉 console.groq.com/keys
2. Sign in with Google and click "Create API Key"
3. Paste it into the Diagram Weaver Sidebar!

🥈 Option 2: Gemini API (Alternative Free)

Google's Gemini 1.5 Flash model is also free. Get a key at aistudio.google.com.

🥉 Option 3: GitHub Copilot

If you already pay for GitHub Copilot Chat, Diagram Weaver can hook directly into it! No keys required.

🚀 How to Use

Using Diagram Weaver is incredibly intuitive with the new sidebar:

🌟 Auto-Scan Your Project (Zero Prompting)

Want a diagram but don't want to type anything?

1. Open the Diagram Weaver Sidebar (the icon on the left panel).
2. Click "Auto-Scan Project" at the bottom.
3. Diagram Weaver instantly reads your files and draws your exact architecture!

✍️ Custom Prompt Mode

Know exactly what you want?

1. Open the Diagram Weaver Sidebar.
2. Select your Diagram Style (e.g., Eraser.io style).
3. Type a prompt like: "Draw a React frontend talking to a Node backend with MongoDB"
4. Click Generate Diagram and watch it appear instantly.

💬 Copilot Chat Integration

If you prefer chat, you can still talk to Diagram Weaver directly in the Copilot Chat panel!

• @diagram draw a microservices architecture with AWS
• @diagram /explainProject (scans your whole workspace)
• @diagram /fromSelection (diagrams the code you highlighted)
• @diagram /generateDocs (dumps the diagram into an ARCHITECTURE.md file)

💾 Exporting Your Work

Once your diagram is generated, you have 4 single-click export options:

• Export SVG: For pixel-perfect infinite scaling.
• Export PNG: For sending on Slack/Discord.
• Export Mermaid: For saving the raw code to Github Markdown.
• Export Draw.io: For opening in Draw.io to manually edit the boxes and arrows later!

🤝 Open Source

Diagram Weaver is completely free and open source. Enjoy crafting beautiful architectures directly in your editor!