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);See how people are using mermaid-live-editor
Top in Developer Tools
Related Repositories
Discover similar tools and frameworks used by developers
spdlog
Fast C++ logging with flexible sinks and fmt formatting.
fastfetch
High-performance CLI system information display written in C.
node-gyp
Compiles native C/C++ addons for Node.js.
doomemacs
Modular framework with lazy loading and vim keybindings.
awesome-css-frameworks
Categorized catalog of CSS frameworks with GitHub metrics.