Markdown & Mermaid Playground
Live PreviewReal-time GitHub-Flavored Markdown editor with live Mermaid diagram rendering, tables, and task lists. Zero server execution.
Markdown Source
0 lines · 0 chars Markdown
Rendered Document
Ready Preview
About This Tool
A live Markdown editor with a lightweight GFM-subset parser: headers, bold/italic, inline code, fenced code blocks, tables, and task-list checkboxes all render in the preview pane as you type, plus ```mermaid fences render as actual diagrams. It is designed for drafting READMEs, API docs, or architecture notes with diagrams, without leaving the browser.
It focuses on real-time previewing and rapid drafting with immediate HTML export or raw Markdown downloading.
Key Features
- Three starter templates: Architecture & Mermaid Diagrams, GFM Tables/Task Lists/Code, and API Documentation.
- Mermaid diagrams on demand: Mermaid.js lazy-loads from a CDN only when a ```mermaid fence is present.
- GFM task lists: - [x] / - [ ] checkboxes render with strikethrough for completed items.
- Live render on edit: Debounced about 250ms, toggleable off in favor of the manual Render button.
- Copy HTML & Export Markdown: Copy the rendered HTML or download raw source as .md file.
- Keyboard shortcuts: Cmd/Ctrl+Enter renders immediately without touching the mouse.
Frequently Asked Questions
What Markdown features are supported?
Headers (# to ###), bold/italic, inline code, fenced code blocks with language tags, GFM tables, task list checkboxes (- [x] / - [ ]), unordered lists, and fenced ```mermaid diagram blocks.
How are Mermaid diagrams rendered?
Any ```mermaid code fence is detected and the Mermaid.js library is lazy-loaded from a CDN on demand, then rendered in dark theme directly inside the preview pane.
Does it support LaTeX math or full CommonMark?
The parser is a lightweight regex-based implementation covering the common GFM subset described above: it is not a full CommonMark or LaTeX math engine, so advanced syntax (nested blockquotes, footnotes, math delimiters) may not render as expected.
Can I turn off live rendering?
Yes, uncheck "Live render on edit" and use the Render button (or Ctrl/Cmd+Enter) to render on demand instead of on every keystroke.
Is my document uploaded anywhere?
No. Parsing and rendering happen entirely in your browser; the only network requests are the one-time CDN loads for the Mermaid library when a diagram is present.
