What is a Markdown Previewer?
A Markdown previewer turns Markdown source into formatted HTML as you type. ToolSnap's previewer also renders Mermaid diagrams from fenced code blocks and can export the result as a PDF using the font family and size you choose. Everything runs in your browser — your notes, docs, and diagrams never leave your device.
How to Use the Markdown Previewer
- Paste or type Markdown in the left editor, or open a
.mdfile. The right pane updates as you type. - Add diagrams with a
```mermaidfence. Flowcharts, sequence diagrams, class diagrams, and other Mermaid types are supported. - Pick a font family and size for the preview. The same settings are used when you download a PDF.
- Download PDF to save a print-ready file. The export always uses a light page background so diagrams stay readable on paper.
Mermaid Diagrams
Mermaid lets you describe diagrams in text. Put the diagram source in a fenced block labeled mermaid:
```mermaid
flowchart LR
A[Write Markdown] --> B[Preview]
B --> C[PDF]
```Common diagram types include flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, and pie charts. Invalid diagram syntax is skipped so the rest of the document still previews.
PDF Export
The PDF is generated from the rendered preview — including tables, code blocks, and Mermaid diagrams — not from a screenshot of the whole page chrome. Choose a sans-serif, serif, or monospace stack (or a specific family like Georgia or Courier New) and a size from 12px to 24px. Long documents are split across A4 pages.
Supported Markdown
- Headings, emphasis, links, images, blockquotes, and horizontal rules
- Ordered, unordered, and GitHub-style task lists
- Tables, fenced code blocks, and syntax highlighting
- Strikethrough and autolinks (GitHub Flavored Markdown)
- Mermaid diagrams in
mermaidfences - GitHub-style math (
$...$,$$...$$) including\color{Name}{text}
Privacy
Parsing, diagram rendering, and PDF generation all happen locally with JavaScript. Nothing is uploaded to a server and there is no account. You can use this tool on drafts, internal docs, and unpublished notes.
Frequently Asked Questions
Does it support GitHub Flavored Markdown?
Yes. Tables, task lists, strikethrough, and fenced code blocks work. The preview uses GitHub’s Markdown colors and syntax highlighting so README files look close to github.com. Raw HTML in Markdown is sanitized before it is shown, so scripts and embeds are stripped.
Why does the PDF look slightly different from the preview?
The on-screen preview follows your site theme (including dark mode). The PDF always uses a white page so it prints cleanly. Font family and size match what you selected.
Is there a size limit?
There is no hard limit, but very long documents or many complex Mermaid diagrams can slow the browser during preview or PDF export. For typical README files, notes, and design docs, it stays fast.
Can I open a local Markdown file?
Yes. Use Open .md file to load .md, .markdown, or .txt from your computer. The file is read in the browser and is not uploaded.