Real product screens and design references for coding agents
Free online Mermaid diagram viewer and editor with live preview, AI generation, and exports
Stage
Not given
Not given
Founded
Not given
Not given
Based in
Not given
Not given
Pricing model
Free
Freemium
Pricing
Not given
Free: unlimited editor and preview, 3 saved diagrams, 5 AI uses total, PNG export 1× with watermark. Starter: $6.99/month or $69.90/year; 30 saved diagrams, 500 AI conversations per month, PNG export up to 4× without watermark. Pro: $11.99/month or $119.90/year; unlimited diagrams, unlimited AI, PNG
Key features
Browse onboarding flows and user journeys
Measured design guides with fonts, colors, and spacing
Compare UI designs against real products
Generate agent-ready build prompts
MCP server integration with Claude, Cursor, VS Code, ChatGPT
REST API endpoint for programmatic access
Documented interactions and design observations
No account or API key required
Live preview of Mermaid code as you type
AI diagram generator, editor and syntax fixer
PNG export on every plan; JPG, SVG and PDF on Pro
All 22+ Mermaid diagram types supported
Share diagrams via public links and embeds
Save diagrams to cloud with folders and version history
Keyboard shortcuts and autocomplete
Mobile-responsive editor with pan and pinch-zoom
What makes it different
191 product collections with 7,803+ real UI captures, not templates or mockups
Designed specifically for coding agents to reference during UI development
Free with no limits, accounts, or API keys required
MCP server compatibility for seamless agent integration
Documented design patterns with measured design guides for each product
No account or sign-up required to start editing diagrams
Affordable pricing: Starter at $6.99/month, Pro at $11.99/month
Diagrams render in your browser; nothing stored unless you choose to save
Fast editor with instant rendering and clear error messages
Screenrove
Mermaid Viewer