Render Mermaid diagrams as SVG images directly in your Markdown files.
- ⚡ Zero-config install - Auto-downloads versioned LSP binary on first use
- 🎨 Clean preview - Shows only rendered diagrams, no source code in preview
- 📝 Editable source - Source saved to separate
.mmdfiles for easy editing - 🔒 Secure - SVG output sanitized, files written only to project directory
- 🎯 Proper text rendering - Native SVG text with correct positioning for all diagram types
- 🚀 Fast - Works with any Mermaid diagram type
- ⚡ Bulk rendering - Render all diagrams at once with "Render All X Diagrams"
- Mermaid CLI (
mmdc) - Install with:
npm install -g @mermaid-js/mermaid-cli
- Open Zed
- Press
Cmd+Shift+P(orCtrl+Shift+P) - Type "Extensions: Install Development Extension"
- Navigate to the cloned repository directory
- Select it
git clone https://github.com/dawsh2/zed-mermaid-preview.git
cd zed-mermaid-preview
./scripts/build.sh && ./scripts/install.shRestart Zed to load the extension.
```mermaid
flowchart TD
A[Start] --> B[Process]
B --> C[End]Place cursor in block → Right-click → "Render Mermaid Diagram"
When you have multiple mermaid blocks, use:
- "Render All X Mermaid Diagrams" - Renders all at once
- "Render Mermaid Diagram" - Renders only the current block
- Place cursor on the HTML comment line (e.g.,
<!-- mermaid-source-file:...-->) - Right-click → "Edit Mermaid Source"
- The original code block is restored for editing
Note: The "Edit Mermaid Source" action only appears when your cursor is on the HTML comment line, not on the image itself.
After rendering:
document.md # Main markdown with images
document_diagram_0.svg # Rendered diagram
document_diagram_0.mmd # Source code (editable)
See example.md for various diagram types and complexity levels.
Production (End Users):
- Extension auto-downloads versioned LSP binary from GitHub releases on first use
- Binary cached at
~/.../Zed/extensions/work/mermaid-preview/mermaid-lsp-cache/v0.1.24/ - Updates download to new versioned folders automatically
- No manual setup required!
Development (Contributors):
- LSP binary NOT in git (excluded via
.gitignoreto keep repo clean) - You build locally and point extension to your build
# Clone and setup development environment
git clone https://github.com/dawsh2/zed-mermaid-preview.git
cd zed-mermaid-preview
# One-time: Configure to use local builds
./scripts/dev-setup.sh
# Build everything
./scripts/build.sh
# Restart your terminal to pick up env var
# Then restart Zed# Make changes to LSP code
vim lsp/src/render.rs
# Rebuild (MERMAID_LSP_PATH ensures Zed uses this)
cd lsp && cargo build --release
# Restart Zed to load changes
# Your local build is now active!
# Run tests
cargo testIf you don't set the env var, Zed will use the cached download from GitHub. You'll need to manually copy after each build:
cp target/release/mermaid-lsp ~/Library/Application\ Support/Zed/extensions/work/mermaid-preview/mermaid-lsp-cache/v0.1.24/# Package binaries for all platforms
./scripts/package-mermaid-lsp.sh <target>
# Bump version in extension.toml
# Create GitHub release with binaries
# Users auto-update!This extension executes the mmdc command-line tool to render diagrams. Security considerations:
- ✅ Path Traversal Protection: Validates all file paths stay within project boundaries
- ✅ No Command Injection: Uses safe command execution (no shell interpolation)
- ✅ Script Tag Removal: Rejects SVGs containing
<script>tags - ✅ Regex DoS Protection: Uses efficient patterns to prevent catastrophic backtracking
- ✅ Automatic Cleanup: Removes orphaned files to prevent disk space accumulation
Important: This extension assumes diagram code comes from trusted sources (your own files). If processing untrusted Mermaid diagrams, be aware that malicious syntax could potentially exploit vulnerabilities in the mmdc tool itself.
For complete security documentation, see SECURITY.md.
See CONTRIBUTING.md for development setup and guidelines.
MIT