Mermaid preview
Live SVG diagrams from text — flowcharts, sequence, ERD, Gantt.
Tools → Convert → Mermaid preview · 7-day free trial · Premium $9.99 / yr
Loading mermaid…
Built for the things AI can’t fake
This tool runs free, right here. The extension adds three things a web widget can’t:
Playground
↗JS / TS scratchpad — sandboxed and instrumented.
Paste real code, hit Run. Console + network monitor + watch expressions all in one panel.
- ·Real ES modules · top-level await
- ·URL imports — esm.sh & friends
- ·Live fetch monitor (every call)
- ·Watch expressions in your scope
- ·10s sandbox timeout · zero CORS pain
HTTP client
↗Postman-style request runner.
Save collections, share variables, hit any API. Includes GraphQL with introspection, OpenAPI / cURL import.
- ·Bearer / Basic / API-key auth
- ·GraphQL · introspection
- ·OpenAPI 3.x · cURL import
- ·Copy as fetch / axios / Python
Realtime (WS + SSE)
↗Stream-protocol tester — what Postman doesn’t do well.
WebSocket + Server-Sent Events with custom auth headers, auto-reconnect, JSON pretty-print.
- ·wss:// + ws:// + subprotocols
- ·SSE via fetch — Authorization works
- ·Auto-reconnect with backoff
- ·Send composer · ⌘ + Enter
What it does
Mermaid is a text-to-diagram language used everywhere modern docs live (GitHub Markdown, Notion, Obsidian, MkDocs). The preview renders it live as you type.
Why use VibeGear's mermaid preview
- ✓All major diagram types — flowchart, sequence, class, state, ERD, Gantt
- ✓Themed to match dark or light mode
- ✓Output double-sanitized (Mermaid strict + DOMPurify)
- ✓Copy SVG / Download SVG
- ✓6 one-click examples
How to use it
- 1Tools → Convert → Mermaid preview.
- 2Pick an example or type your own.
- 3Diagram renders live on the right.
Related tools
One install. Every tool above.
7 days free, then VibeGear Premium is $9.99 / €9.99 per year. Everything runs locally.
Install & start trial →→