src/diagram.mmd
Ready
localhost:5173
Mermaid 11ReadyMMDLn 1, Col 1
Online Mermaid playground with a first-class .mmd editor, secure live rendering, syntax feedback, sharing, and a runnable Vite project export.
Online Mermaid playground with a first-class .mmd editor, secure live rendering, syntax feedback, sharing, and a runnable Vite project export.
Runtime: v11.16.1
Author the .mmd file directly with Mermaid-aware highlighting and starter snippets. The preview validates and renders locally and reports syntax errors without replacing your source.
Press Enter to evaluate, ↑ and ↓ to browse command history, and Ctrl/⌘ + L to clear the console.
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
}