Markdown viewer and editor with Mermaid

Markdown document

Type, paste or open a Markdown file and see an instant preview, just like on GitHub: tables, task lists, footnotes, alerts, Mermaid diagrams, LaTeX formulas and highlighted code. Then you can download it as HTML or save it as a PDF. Everything is processed in your browser.

Table of contents

Synced scrolling

Keep line breaks

---
title: "Sample document"
tags: [markdown, mermaid, katex]
---

# Sample document

Edit this text and see the result instantly. It supports **bold**, *italic*, ~~strikethrough~~, `code`, links like https://ittools.tech and footnotes[^1].

> [!NOTE]
> GitHub alerts work too: try TIP, IMPORTANT, WARNING or CAUTION.

## Tasks and tables

- [x] Write the README
- [ ] Add a diagram

| HTTP | Endpoint | Status |
|:-------|:-----|-------:|
| `GET` | `/api/users` | 200 |
| `POST` | `/api/users` | 201 |
| `DELETE` | `/api/users/42` | 204 |

```typescript
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
}
```

## Diagrams and formulas

```mermaid
sequenceDiagram
    participant C as App
    participant A as API
    participant D as DB
    C->>A: GET /api/users/42
    A->>D: SELECT * FROM users WHERE id = 42
    D-->>A: row
    A-->>C: 200 OK (JSON)
```

```mermaid
flowchart LR
    A[Commit] --> B{Tests OK?}
    B -- ✓ --> C[Build]
    B -- ✗ --> D[Fix]
    D --> A
    C --> E[Deploy]
```

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Euler: $e^{i\pi} + 1 = 0$

</details>

[^1]: Everything is processed in your browser; the document is never sent to any server.

0 words · 0 lines · 0 min read

How it works

Markdown is the format of READMEs, technical documentation, wikis and notes in almost every development tool, but each platform adds its own extensions. This viewer follows GitHub Flavored Markdown (GFM), the most widely used variant: on top of the basics, it renders tables, task lists, strikethrough, autolinks, footnotes and the NOTE, TIP, IMPORTANT, WARNING and CAUTION alerts.

Code blocks marked as mermaid become diagrams (flowchart, sequence, class, state, entity-relationship, Gantt, Git and more), formulas between $ signs are rendered with KaTeX, and all other code is highlighted according to the language specified. If the document starts with a YAML block between --- lines, like the ones used by Jekyll, Hugo or Docusaurus, it is shown as a separate table.

The document never leaves your browser. Any HTML it contains is sanitized before being displayed, so opening a third-party README does not run scripts, and the diagram and formula libraries are only downloaded if the document uses them.

Examples

```mermaid
flowchart LR
  A[Commit] --> B[Build] --> C[Deploy]
```

Commit → Build → DeployA code block with the mermaid language is rendered as a diagram. If it has a syntax error, the code stays visible with the Mermaid error message below it.

## Getting Started
## API v2.0 (beta)
## Getting Started

#getting-started · #api-v20-beta · #getting-started-1Headings get the same id GitHub gives them: lowercase, spaces replaced with hyphens, no punctuation and a number at the end if they repeat. That way a [text](#getting-started) link works the same here and in the repository.

Line one
Line two

<p>Line one
Line two</p>  →  <p>Line one<br>Line two</p>

In standard Markdown a single line break does not end the paragraph; you need to leave a blank line or end the line with two spaces. GitHub comments and issues do keep them: to see it that way, turn on Keep line breaks.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.A quote that starts with [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] or [!CAUTION] is shown as a colored alert, just like on GitHub. On platforms that do not support them it looks like a regular quote.

Use cases

Check how a README or CHANGELOG will look before pushing it to the repository.
Read a downloaded .md file without installing an editor: open it with the button or by dragging it in.
Try out Mermaid architecture, flow or sequence diagrams and fix the syntax with the live preview.
Turn documentation into a standalone HTML page or a PDF to share with people who do not use Git.
Write notes or technical documentation with math formulas in LaTeX notation.
View the Markdown text returned by an AI assistant with its formatting, tables and code blocks.

Frequently asked questions

What types of Mermaid diagrams can be rendered?

All the ones Mermaid ships with: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture and kanban, among others. Diagrams use light or dark colors to match the site theme and are rendered in strict mode: label text cannot inject HTML or run code on click.

How do I write a math formula?

Between $ signs for an inline formula, such as $a^2 + b^2 = c^2$, and between $$ or in a code block with the math language for a formula centered on its own line. The syntax is the LaTeX supported by KaTeX. To write a literal $ sign, as in a price, put a backslash before it; even so, "$5 and $10" is not treated as a formula because the second $ has a space before it and a digit after it.

Can I use HTML inside Markdown?

Yes, just like on GitHub: tags such as details and summary for collapsible sections, kbd for keys, sub and sup, img with a size or p with align. Before displaying it, scripts, event attributes such as onclick, javascript: links and style and form tags are removed, so a third-party document cannot run code or change the rest of the page.

How do I convert it to PDF?

Export and then Print or save as PDF opens the print dialog with only the document, without the site interface, and there you choose Save as PDF. Tables, code blocks and diagrams are kept from being split across pages. If you prefer a file to publish, Download .html generates a standalone page with the styles included.

Why doesn't an image with a relative path show up?

Because the viewer has no access to the other folders in the repository: a path like ./docs/logo.png only exists on your disk or on GitHub. Images with a full address, starting with https://, are displayed without any problem.