src/diagram.mmd
flowchart LR
Code[Write code] --> Run[Run]
Run --> Result[See result]
5 files
Ready
Mermaid 12ReadyMMDLn 1Ln 1, Col 1
Online Mermaid playground with a first-class .mmd editor, secure live rendering, syntax feedback, sharing, and a runnable Vite project export.
Choose a source file from the explorer and edit it with Monaco.
Edit package.json to add browser-compatible npm packages or change versions. Preview packages load from esm.sh. Successful previews save resolved versions for ranges and tags with your draft and shares; change the range to resolve again. Scripts and build plugins run only in downloaded projects.
Auto-run updates the browser preview as you type. Turn it off to run your changes manually.
Use the console for browser logs and errors, or evaluate a command against the preview.
Share creates a snapshot link. Download exports the source so you can continue locally.
flowchart LR
Code[Write code] --> Run[Run]
Run --> Result[See result]
import mermaid from 'mermaid'
import diagramSource from './diagram.mmd'
import './styles.css'
const diagram = document.querySelector('#diagram')
const error = document.querySelector('#diagram-error')
mermaid.initialize({
startOnLoad: false,
securityLevel: 'strict',
suppressErrorRendering: true,
theme: 'neutral',
})
try {
const { svg } = await mermaid.render('mermaid-preview', diagramSource)
diagram.innerHTML = svg
diagram.querySelector('svg')?.setAttribute('aria-label', 'Simple Mermaid flowchart')
} catch (renderError) {
diagram.replaceChildren()
error.textContent = renderError instanceof Error
? renderError.message
: 'Check the diagram syntax and try again.'
error.hidden = false
}
The editor uses Monaco, the engine behind VS Code, with language-aware editing tools and familiar keyboard controls.
Edit a source file from the project explorer — the live preview recompiles automatically.
Add, rename, duplicate or delete project files as needed. Update affected imports after renaming or moving a file.
Use the console for logs and errors, and Format to tidy the active file.
Share the complete project or download a Vite project ZIP with its source files and package.json.
Mermaid 12.1
Mermaid Syntax Highlighting
Flowcharts and Sequence Diagrams
Class, State and ER Diagrams
Strict Security Rendering
Live Diagram Preview
Shareable Projects
Vite Project Export
Local Runtime — No CDN
Auto-run updates the preview as you type. Turn it off to run manually with Run or Ctrl/⌘ + Enter.
The Console prompt can inspect browser globals and the rendered DOM, but not variables scoped inside ES modules or component state.
Console shortcuts apply when its prompt is focused. Editor shortcuts apply inside the code editor.
Code runs in a sandboxed browser preview, without Node.js, a backend, or private environment variables.
Download the project when you need build plugins, server APIs, native modules, or a production dependency workflow.
Mermaid 12 supports flowcharts, sequence, class, state and entity relationship diagrams, plus timelines, mind maps, Gantt charts, git graphs and other Mermaid syntaxes.
The preview uses the locally hosted Mermaid runtime with strict security, HTML labels disabled and error rendering suppressed. User syntax runs inside the playground’s sandboxed preview frame.