markdownviewer.pages.dev

Add a diagram to Markdown by writing a fenced code block tagged mermaid and putting the diagram definition inside it. In an editor that renders Mermaid — such as Markdown Viewer, which lists Mermaid diagrams among its preview features — the block displays as a drawn diagram in the preview pane instead of as code. The conditions: the editor must support Mermaid rendering, and in Markdown Viewer the diagram rendering is a remote service, so you need a network connection for the diagram to appear.

Write the diagram as a Mermaid code block

The pattern is a standard fenced block whose info string is mermaid:

```mermaid
flowchart LR
  A[Write Markdown] --> B[Preview diagram]
  B --> C{Looks right?}
  C -- Yes --> D[Export]
  C -- No --> A
```

The same block form works for other Mermaid diagram types, for example a sequence diagram:

```mermaid
sequenceDiagram
  participant Author
  participant Editor
  Author->>Editor: Paste Mermaid block
  Editor-->>Author: Render preview
```

Two rules matter more than the diagram syntax itself:

• The info string must be mermaid. Without it, the editor treats the content as ordinary code and shows it as text.
• The diagram definition must be valid Mermaid. A syntax error usually produces an error message or blank area in the preview rather than a diagram.

Check the render in the right view

Markdown Viewer offers Edit, Split, and Preview modes in the toolbar. Split is the practical choice while drafting: you type in the editor and watch the diagram update in the preview beside it. Switch to Preview when you want to see the diagram at full width, and back to Edit for changes.

The preview also handles highlighted code and LaTeX math alongside Mermaid, so a document that mixes a diagram, a code sample, and a formula can be checked in one pass.

Export the result

Markdown Viewer exports as Markdown, HTML, PDF, or PNG. Which format to pick depends on what the diagram is for:

If the diagram is the main point of the document, open the exported file and confirm the diagram is present before sending it on.

When the diagram does not render

Work through these in order:

1. Check the fence tag. A block tagged text, md, or nothing at all will not render as a diagram.
2. Check the Mermaid syntax. Paste the definition into a minimal test block; if that fails too, the problem is in the definition, not the document.
3. Check the connection. In Markdown Viewer, remote diagram rendering uses network services, so an offline session can leave the diagram unrendered even though the Markdown is correct.
4. Check the export. A diagram that displays in preview may not survive every export path; verify the exported file itself rather than assuming.

Keep a backup of the source

Markdown Viewer autosaves ordinary editing on the device, and clearing browser storage can remove locally saved documents. Since a rendered diagram exists only in the preview, keep the Markdown source — with its Mermaid blocks — downloaded as a copy. That way the diagram can be regenerated anywhere Mermaid is supported, regardless of what happens to the browser workspace.

GFM (GitHub-Flavored Markdown) is a Markdown dialect that extends CommonMark with features GitHub needed for its own content: tables, task lists, strikethrough, autolinks, and fenced code blocks with syntax highlighting. If you write Markdown in an online editor that advertises GFM live preview, you can use those extensions and see them rendered as you type. The main condition to keep in mind: GFM is a superset of CommonMark, so plain Markdown still works, but some extensions (tables, task lists) will not render in tools that only support basic Markdown.

What GFM adds to standard Markdown

Standard Markdown (and its stricter specification, CommonMark) covers headings, emphasis, links, images, lists, blockquotes, and code. GFM keeps all of that and adds a defined set of extensions:

The fenced code block is the one people most often associate with GFM, because the language tag after the opening backticks is what enables syntax highlighting in a GFM-aware preview.

How GFM differs from standard Markdown in practice

The differences matter most when you move a document between tools:

• Tables and task lists are extensions, not core Markdown. A strict CommonMark renderer will show the pipe characters and bracket syntax as plain text instead of a table or checkbox.
• Autolinks are looser in GFM. A bare URL becomes a link; in strict CommonMark you generally need <https://example.com> or [text](url).
• Strikethrough is GFM-only. ~~text~~ is not part of CommonMark, so it may appear literally elsewhere.
• Underscores inside words. GFM follows CommonMark's rule that snake_case_words are not turned into emphasis, which avoids a common formatting surprise.

A practical rule: if a document must render identically everywhere, stick to core Markdown for structure and treat tables, task lists, and strikethrough as enhancements for GFM-capable viewers.

Using GFM in an online editor with live preview

In a browser-based editor such as Markdown Viewer, the workflow is:

1. Start a document. Create a new file, open a local .md or .markdown file, paste text, or import from GitHub.
2. Switch to Split view. The editor and preview sit side by side, so formatting changes appear as you type. Edit and Preview modes are also available in the toolbar.
3. Write GFM syntax. Add a table, a task list, or a fenced code block with a language tag.
4. Check the preview. Confirm the table has aligned columns, the checkboxes render, and the code block is highlighted.
5. Export when done. The result can be downloaded as Markdown, HTML, PDF, or PNG.

Two behaviors from the tool's own documentation are worth knowing before you rely on it:

• Ordinary editing and autosave stay on the device, but sharing, GitHub import, external images, and remote diagram rendering use network services.
• Clearing browser storage can remove locally saved documents, so keep a separate backup by downloading a Markdown copy.

Code blocks, math, and diagrams in GFM preview

GFM's fenced code blocks are the foundation for richer previews:

• Syntax-highlighted code: open with triple backticks, add a language identifier (for example js or python), write the code, and close with triple backticks. The preview highlights it when the renderer supports the language.
• LaTeX math: the editor's preview supports LaTeX math, so formulas render rather than showing raw notation.
• Mermaid diagrams: diagram blocks render as graphics in the preview. Because remote diagram rendering uses a network service, a diagram may not appear if that service is unavailable.

For a quick check, write one table, one task list, and one fenced code block in the same document. If all three render correctly in Split view, your GFM syntax and the preview are working together as expected.

Open Markdown Viewer in a browser and you can start writing immediately: create a blank document, paste Markdown text, or open a local .md/.markdown file, then switch between Edit, Split, and Preview modes to check formatting as you type. No account is required for ordinary editing and autosave, which stay on your device. The trade-off is that your documents live in browser storage, so clearing it can delete them — download a Markdown copy as a backup.

Start a document in under a minute

1. Open markdownviewer.pages.dev. The welcome screen offers several starting points: New document, Open from device, Import from GitHub, or a Welcome template that demonstrates features with an example.
2. Choose New document for a clean file, or Open from device to load one or more existing Markdown files.
3. Use the toolbar to switch between Edit, Split (editor and preview side by side), and Preview.
4. Organize files into workspaces and folders via the Explorer if you plan to keep several documents.

You can also drag Markdown files, images, GIFs, or videos into the editor to add them. Pasting text directly works as well.

Expected result: your text appears in the editor and renders in the preview pane as you type. If the preview looks wrong, check that your syntax matches GitHub-Flavored Markdown (for example, a table needs a header separator row).

What the preview supports

The editor renders GitHub-Flavored Markdown, so headings, links, tables, and task lists behave as they do on GitHub. Beyond that, the preview highlights code blocks and renders LaTeX math and Mermaid diagrams.

A document outline panel lets you generate a table of contents from headings, with options for heading levels (H1–H6), TOC format (bulleted links, numbered links, or plain text), normalized heading levels, and a collapsible wrapper. If the panel says "No headings in this document," add #-style headings first.

Export and share

When the document is ready, export it as Markdown, HTML, PDF, or PNG. Exporting Markdown is also your backup path — keep a downloaded copy separate from the browser, since clearing browser storage can remove locally saved documents.

Sharing is optional and only needed for collaboration:

• Share Snapshot — a point-in-time share of the document.
• Live Share — for ongoing collaboration.

Both are optional features; skip them for solo writing.

What stays on your device vs. what goes online

This distinction matters if you work with sensitive content:

• On-device: ordinary editing and autosave.
• Network services: sharing (Share Snapshot, Live Share), GitHub import, external images, and remote diagram rendering.

So a document containing only text, standard GFM, and local images stays local during normal editing, but a Mermaid diagram triggers remote rendering, and importing from GitHub or loading external images sends requests out. If that's a concern, keep diagrams and external assets out of sensitive drafts or accept that those specific elements are processed remotely.

Common snags

• Preview doesn't match what you expect: confirm you're using GFM syntax; switch to Split mode to see the source and result together.
• Document disappeared: browser storage was likely cleared. Restore from your downloaded Markdown backup.
• TOC panel is empty: the document has no headings in the selected range — add headings or widen the H1–H6 range.
• Diagram or image not rendering: these depend on network services; check your connection or whether the source is reachable.

For a broader look at what online Markdown editors are and how they fit different workflows, see "What Is an Online Markdown Editor and How Do You Use One?"

You can write and preview Markdown live in a browser without creating an account. Open markdownviewer.pages.dev, start a blank document or open a local .md/.markdown file, then switch to Split view so the editor and preview sit side by side and formatting updates as you type. This works for GitHub-Flavored Markdown (GFM) with headings, links, tables, task lists, highlighted code, LaTeX math, and Mermaid diagrams. Ordinary editing and autosave stay on your device; sharing, GitHub import, external images, and remote diagram rendering use network services.

Step 1: Get a document into the editor

From the welcome screen you have several entry points:

• New document — start with a clean Markdown file.
• Open from device — choose one or more Markdown files from your computer.
• Import from GitHub — open a file or repository (uses a network service).
• Welcome template — load an example to explore features.
• Drag and drop — drop Markdown files, images, GIFs, or videos into the workspace to add them.

You can also paste text directly into the editor. Organize documents into workspaces and folders using the Explorer.

Step 2: Switch between Edit, Split, and Preview

Use the toolbar to change how you see the document:

Split view is the core of live preview: each change in the left pane appears in the right pane immediately.

Step 3: Check GFM syntax in the preview

As you type, confirm these render correctly in the preview pane:

• Headings (#, ##, …)
• Links and images
• Tables
• Task lists (- [ ] / - [x])
• Fenced code blocks with syntax highlighting
• LaTeX math
• Mermaid diagrams

If a table or diagram doesn't render, check that the fence is closed and the syntax matches GFM or Mermaid conventions. Remote diagram rendering requires a network connection.

Step 4: Export or share the result

When the preview looks right, choose an output:

• Markdown — download a .md copy to keep as a backup.
• HTML — rendered page for the web.
• PDF — fixed-layout document.
• PNG — image of the rendered output.
• Share Snapshot — optional sharing of a snapshot.
• Live Share — optional real-time sharing.

Share Snapshot and Live Share are optional and use network services; skip them if the document should stay local.

Step 5: Protect your work with separate backups

Ordinary editing and autosave stay on this device, which means clearing browser storage can remove locally saved documents. Download a Markdown copy regularly (Step 4) and keep it outside the browser. If you rely on GitHub import or external images, remember those paths depend on network services and won't be available offline.

Common snags

• Preview not updating — confirm you're in Split or Preview view, not Edit.
• Diagram or math not rendering — check fence closure and syntax; remote rendering needs a connection.
• Document missing after clearing browser data — restore from your downloaded Markdown backup.
• Images broken after moving files — external images load over the network; keep local copies if you need offline access.

An online Markdown editor is a browser-based tool that splits the screen into a plain-text editor on the left and a live rendered preview on the right, so you see formatted output as you type. It suits anyone who needs to write or check Markdown without installing a desktop app — you open the page, start typing, and your draft autosaves in the browser. No account is required to begin, and when you're done you can export to PDF, Word, or HTML, or download the .md file itself.

How the editor works

The core mechanic is a two-pane loop: every keystroke in the left pane updates the rendered preview on the right. That means you never have to guess whether a table, equation, or code block will render correctly — you watch it happen.

On markdownlivepreview.dev, the editor also:

• Opens existing files — upload a .md file and continue editing where you left off.
• Autosaves — your work stays in the browser between visits.
• Runs on any device — the same behavior on Windows, Mac, Linux, tablets, and phones.

Because it's a browser tab, it's faster than a desktop app when you only need to write or verify a small amount of Markdown.

What syntax and features it supports

The editor handles the Markdown most people actually write, plus a few extras:

If you're unsure of a syntax, the site's cheat sheet is meant to sit open in another tab while you write.

Common ways people use it

An online Markdown editor works as a quick creation tool for anything that ends up in Markdown:

• GitHub README files
• Blog posts, notes, and technical writing
• Academic papers with equations
• Reports you'll later export to PDF or Word
• Testing Markdown syntax before you commit it

For one specific case — when you already have a .md file and only want to read it — the site offers a separate file viewer where you drag the file in and it opens formatted.

Getting from draft to finished document

When your draft is ready, you have several exits:

1. Download the .md file if you're keeping it as source.
2. Convert to PDF for a shareable, fixed-layout document.
3. Convert to Word if the recipient needs an editable .docx.
4. Convert to clean HTML for pasting into a site or CMS.

The editor links directly to each of these conversion tools, so you don't have to leave the workflow to find them.

A practical tip for tables

Writing a Markdown table by hand is tedious and error-prone. The site suggests building it visually in a table generator and pasting the result back into the editor — a small step that saves a lot of fiddling with pipe characters and alignment rows.

When a browser editor is the right choice

Use an online editor when you want speed and zero setup: quick notes, checking how a snippet renders, editing a file someone sent you, or drafting something you'll export. If you live in Markdown all day and want local files, plugins, and offline access, a desktop app like Typora or Obsidian becomes worth the install. For everything in between, a browser tab is the shorter path.