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.