As developers, we spend hours reading code to understand architecture, flow, and relationships. What if we could see our code? Not just syntax highlighting, but actual visual representations of logic, structure, and data flow.
I wanted something that worked seamlessly in VS Code without context switching. No more copying code to external tools or wrestling with manual diagram syntax.
FlowCraft: Code to Visualization in Seconds
FlowCraft lives in your VS Code sidebar. Select code, right-click, and generate:
- Flowcharts from algorithms
- Sequence diagrams from function calls
- Class diagrams from object structures
- State diagrams from logic flows
- ER diagrams from data models
- Gantt charts from project timelines
The extension supports multiple AI providers (OpenAI, Anthropic, Google, and FlowCraft's own API), so you can choose what fits your budget and quality needs.
Privacy-First Architecture
Your API keys stay in VS Code's Secret Storage - never sent to our servers. The BYOK (Bring Your Own Key) approach means you maintain full control. For the FlowCraft API, we only process what's necessary to generate your diagram.
Technical Journey: Building as a Solo Dev
Architecture Decisions
I architected FlowCraft with clear separation of concerns:
- State Management: Centralized store for diagrams, settings, and usage tracking
-
Service Layer:
DiagramServicehandles all business logic - generation, regeneration, duplication - API Client: Abstracted interface supporting multiple AI providers
- Webview UI: Modern, themed interface using VS Code's webview toolkit
The extension activates on-demand and uses progressive enhancement - core features work immediately, advanced features load as needed.
Key Features Implemented
Multi-Provider Support: The APIKeyService manages credentials for OpenAI, Anthropic, Google, and FlowCraft API. Each provider has its own validation and storage.
Diagram History: Every generation saves to local history with metadata. You can regenerate, duplicate, or export (SVG/PNG/PDF) any previous diagram.
Smart Input Methods: The generation flow supports:
- Current file content
- Selected code blocks
- Pasted descriptions
- File picker for larger projects
VS Code Chat Integration: Built a chat participant (@flowcraft) that responds to natural language commands like "generate a flowchart" or "explain this diagram."
Challenges Solved
Performance: Large codebases needed handling. I implemented a 10,000 character limit with clear user messaging and support contact for edge cases.
Provider Abstraction: Each AI provider has different response formats. The FlowCraftClient normalizes these into consistent DiagramResult and ImageResult types.
State Synchronization: Webview UI and extension host needed real-time sync. Used VS Code's message passing with nonce-based CSP for security.
Error Handling: Graceful degradation when APIs fail, with detailed error messages and retry logic.
The Development Experience
I dogfooded FlowCraft throughout development. Every time I needed to document architecture or explain flow to users, I used FlowCraft to generate diagrams from my own code. This created a tight feedback loop - if it didn't work for me, it wouldn't work for users.
The extension includes:
- Welcome view with usage stats and quick actions
- Settings view for API key management
-
Keyboard shortcuts (
Cmd+Shift+Dto generate,Cmd+Shift+Gfrom selection) - Context menu integration in editor and explorer
What's Next
FlowCraft 2.0.3 is live with core diagram generation. Coming soon:
- Infographic generation (SVG-based for presentations)
- AI image generation for illustrative diagrams
- Collaborative features for team documentation
- More diagram types and customization options
Try It Yourself
Install FlowCraft from the VS Code Marketplace. Bring your OpenAI, Anthropic, or Google API key, or use the FlowCraft API.
The extension is open source at github.com/shagunmistry/FlowCraft-VsCode-Extension. Issues and feature requests welcome!
As a solo developer, every download and star motivates the next feature. If FlowCraft helps you visualize your code, I'd love to hear your story.
Built with ❤️ for developers who believe documentation should be visual, not just textual.
Top comments (0)