Instantly render Mermaid diagrams from your clipboard with automatic monitoring (1-second polling), persistent history with search and pinning, and seamless Mermaid Live Editor integration. Built for diagram-driven workflows.
- Copy any Mermaid code → see it rendered automatically
- No need to close and reopen — diagrams update in real-time
- 1-second polling for instant feedback
- Smart detection of 13+ Mermaid diagram types
All Mermaid diagram types supported via mermaid.ink:
- Flowcharts & sequence diagrams
- Class, state, and ER diagrams
- Gantt charts & pie charts
- User journeys & git graphs
- Mind maps, timelines & quadrant charts
- Auto-save: Every rendered diagram saved automatically
- Deduplication: Same diagram? Updates last accessed time
- Search: Filter by diagram name
- Pin: Keep frequently used diagrams at the top
- Rename: Give meaningful names (e.g., "User Auth Flow v2")
- Last Accessed Sorting: Most recent first (pinned always on top)
- Limit: 100 most recent diagrams
Render Command (⌘ + Space → "Render Mermaid")
⌘ + R— Rename current diagram (if saved)⌘ + S— Save to history (if not saved)⌘ + H— Open History⌘ + E— Expand diagram (full-screen in browser)⌘ + C— Copy Mermaid code⌘ + ⇧ + C— Copy image URL
History Command (⌘ + Space → "Mermaid History")
⌘ + I— Pin/unpin diagram⌘ + R— Rename diagram⌘ + D— Delete diagram⌘ + C— Copy code⌘ + H— Back to history (from detail view)
Automatic rendering with metadata panel showing save status, diagram stats, and quick actions
Search, pin, and manage all your diagrams in one place
- Open Raycast (
⌘ + Space) - Type "Store" → Enter
- Search "Mermaid Live"
- Click "Install"
git clone https://github.com/rendis/mermaid-live-raycast.git
cd mermaid-live-raycast
npm install
npm run dev- Copy Mermaid code to clipboard:
graph TD A[Start] --> B[Process] B --> C[End] - Open Raycast (
⌘ + Space) - Type "Render Mermaid" → Enter
- Watch the magic happen ✨
- Rendered diagrams auto-save to history
- Open "Mermaid History" from Raycast
- Pin important diagrams (
⌘ + I) - Rename for better organization (
⌘ + R) - Search by name to find quickly
- Render a diagram
- Click "Edit in Mermaid Live" (or press Enter on the action)
- Opens mermaid.live with your diagram pre-loaded
- Edit visually with live preview
- Copy the updated code back to clipboard
┌─────────────────────────────────────────┐
│ Raycast Extension (React + TypeScript) │
├─────────────────────────────────────────┤
│ • Clipboard Polling (1s interval) │
│ • LocalStorage (history persistence) │
│ • pako compression (URL encoding) │
└──────────────┬──────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ mermaid.ink API │
│ (Serverless diagram rendering) │
└─────────────────────────────────────────┘
Tech Stack:
- Framework: Raycast API v1.104.5
- Language: TypeScript 5.0+
- Rendering: mermaid.ink (on-demand, no local dependencies)
- Compression: pako for URL-safe encoding
- Storage: LocalStorage for history and persistence
# Install dependencies
npm install
# Start development mode with hot reload
npm run dev
# Build for production
npm run build
# Lint and format
npm run lint
npm run fix-lint
# Publish to Raycast Store
npm run publishMermaid Live detects and renders all Mermaid diagram types:
| Type | Keyword | Example |
|---|---|---|
| Flowchart | graph, flowchart |
Process flows, decision trees |
| Sequence | sequenceDiagram |
API interactions, protocols |
| Class | classDiagram |
UML class structures |
| State | stateDiagram |
State machines, FSMs |
| ER | erDiagram |
Database schemas |
| Gantt | gantt |
Project timelines |
| Pie | pie |
Data distributions |
| Journey | journey |
User experience flows |
| Git Graph | gitGraph |
Branch workflows |
| Mindmap | mindmap |
Brainstorming, hierarchies |
| Timeline | timeline |
Historical events |
| Quadrant | quadrantChart |
Priority matrices |
Diagrams use Mermaid's default theme. To customize:
- Render your diagram
- Click "Edit in Mermaid Live"
- Adjust theme, colors, and styles in the editor
- Copy the updated code with inline styling
Diagram not rendering?
- Verify Mermaid syntax at mermaid.live
- Check your internet connection (mermaid.ink requires network access)
- Try copying the code again
Clipboard not detected?
- Ensure you have clipboard access enabled for Raycast
- System Preferences → Security & Privacy → Privacy → Accessibility
Icon not showing?
- Rebuild the extension:
npm run build - Restart Raycast dev mode:
npm run dev - If persistent, uninstall/reinstall extension in Raycast
MIT © Reynaldo Endis
- Mermaid.js — Incredible diagramming syntax
- mermaid.ink — Serverless rendering service
- Raycast — Blazing fast launcher
- pako — Fast compression library
Made with ❤️ for diagram lovers