Mermaid Live Editor: Real-time diagram editing and sharing
SvelteKit application for authoring and rendering Mermaid diagrams.
Learn more about Mermaid Live Editor
Mermaid Live Editor is a web-based application built with SvelteKit that provides real-time rendering and editing of Mermaid diagram syntax. The application uses a split-pane interface where user input is continuously parsed and rendered through the Mermaid JavaScript library, displaying visual diagrams alongside the text-based markup. It implements client-side rendering with reactive state management to instantly reflect changes as users type, while also providing diagram export functionality in multiple formats including SVG and PNG. The application includes URL-based state persistence that encodes diagram definitions in shareable links, enabling collaboration without requiring backend storage or user authentication. Deployment is optimized for static hosting through SvelteKit's adapter system, allowing the application to run entirely in the browser with minimal server requirements.
Real-Time Diagram Rendering
Diagrams render immediately as syntax is edited without manual refresh or compilation steps. Live preview enables rapid iteration on complex visualizations with instant visual feedback.
URL-Based State Sharing
Generated URLs encode complete diagram state, enabling distribution of view-only or editable versions without authentication or file storage. Share diagrams as simple links with full fidelity preservation.
Multi-Format Export Options
Direct SVG export and PNG generation through configurable rendering services including mermaid.ink and Kroki integration. Supports production-ready outputs without local tooling or build pipelines.
import mermaid from 'mermaid';
mermaid.initialize({ startOnLoad: true });
const diagramDefinition = `
graph TD
A[Start] --> B[Process]
B --> C[End]
`;
await mermaid.render('diagram-id', diagramDefinition);Top in Developer Tools
Related Repositories
Discover similar tools and frameworks used by developers
bat
Enhanced cat replacement with syntax highlighting and Git integration for file viewing.
UniTask
Zero-allocation async/await using structs and custom method builders.
Mermaid
JavaScript library rendering text-based diagrams as SVG.
gogcli
Command-line interface for Gmail, Calendar, Drive, Contacts, and other Google services with JSON output.
Playwright
Cross-browser automation framework with built-in test runner.
Related Reading
Guides and comparisons from the Greptile content library
How to ACTUALLY Think About Code Reviews: The 3-Layer Checklist
A code review checklist and best practices organized around three layers — Mechanical, Structural, and Narrative — that help any team improve code quality without slowing reviews down.
Greptile Ranks #1 on Martian's AI Code Review Benchmark
Greptile ranks #1 on Martian's independent online AI code review benchmark, leading all evaluated tools in F1 score and precision with near-leading recall.
Best AI Code Review Tools for GitLab
Enterprise-grade AI code review tools for GitLab teams. In-depth comparison of accuracy, security, and integration features to accelerate your merge request workflows.
10 Powerful Code Quality Tools That Catch Bugs Before Deployment
We tested 10 code quality tools that catch bugs before production. Detailed comparison with real-world examples, pricing, and ROI analysis for dev teams.