Markdown 查看器与编辑器（支持 Mermaid）

Markdown 文档

编写、粘贴或打开 Markdown 文件，像在 GitHub 上一样即时预览：表格、任务列表、脚注、提示框、Mermaid 图表、LaTeX 公式和高亮代码。之后可以下载为 HTML 或保存为 PDF。所有内容都在你的浏览器中处理。

同步滚动

保留换行

---
title: "示例文档"
tags: [markdown, mermaid, katex]
---

# 示例文档

编辑这段文字，即可立即看到效果。支持 **粗体**、*斜体*、~~删除线~~、`代码`、像 https://ittools.tech 这样的链接以及脚注[^1]。

> [!NOTE]
> GitHub 提示框同样可用：试试 TIP、IMPORTANT、WARNING 或 CAUTION。

## 任务和表格

- [x] 编写 README
- [ ] 添加图表

| 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();
}
```

## 图表和公式

```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]: 所有内容都在你的浏览器中处理，文档不会发送到任何服务器。

0 个单词 · 0 行 · 阅读约 0 分钟

工作原理

Markdown 是 README、技术文档、Wiki 以及几乎所有开发工具中笔记所用的格式，但每个平台都会加入自己的扩展语法。本查看器遵循使用最广泛的 GitHub Flavored Markdown（GFM）：除基础语法外，还能渲染表格、任务列表、删除线、自动链接、脚注，以及 NOTE、TIP、IMPORTANT、WARNING 和 CAUTION 提示框。

标记为 mermaid 的代码块会转换为图表（流程图、时序图、类图、状态图、实体关系图、甘特图、Git 图等），$ 符号之间的公式由 KaTeX 渲染，其余代码则按指定的语言高亮显示。如果文档以 --- 行包围的 YAML 块开头（如 Jekyll、Hugo 或 Docusaurus 所用的格式），它会显示为单独的表格。

文档不会离开你的浏览器。其中包含的 HTML 在显示前会被清理，因此打开第三方的 README 不会执行脚本；图表和公式库也只会在文档用到时才下载。

示例

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

Commit → Build → Deploy语言标记为 mermaid 的代码块会绘制成图表。如果存在语法错误，代码会保持可见，并在下方显示 Mermaid 的错误信息。

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

#getting-started · #api-v20-beta · #getting-started-1标题会获得与 GitHub 相同的 id：转为小写、空格替换为连字符、去掉标点符号，重复时在末尾加上数字。因此，像 [文本](#getting-started) 这样的链接在这里和在仓库中的效果完全一样。

Line one
Line two

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

在标准 Markdown 中，单个换行不会让段落换行；需要空一行，或在行尾加两个空格。GitHub 的评论和 issue 则会保留换行：如需这种效果，请启用“保留换行”。

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.以 [!NOTE]、[!TIP]、[!IMPORTANT]、[!WARNING] 或 [!CAUTION] 开头的引用会显示为彩色提示框，与 GitHub 一样。在不支持它们的平台上，会显示为普通引用。

使用场景

在将 README 或 CHANGELOG 推送到仓库之前，检查它的显示效果。
无需安装编辑器即可阅读下载的 .md 文件：点击按钮或直接拖放即可打开。
测试架构、流程或时序的 Mermaid 图表，并借助实时预览修正语法。
将文档转换为独立的 HTML 页面或 PDF，分享给不使用 Git 的人。
使用 LaTeX 记法编写包含数学公式的笔记或技术文档。
以完整格式查看 AI 助手返回的 Markdown 文本，包括表格和代码块。

常见问题

可以绘制哪些类型的 Mermaid 图表？

Mermaid 自带的所有类型：flowchart、sequenceDiagram、classDiagram、stateDiagram-v2、erDiagram、gantt、pie、journey、gitGraph、mindmap、timeline、quadrantChart、sankey、xychart、block、architecture 和 kanban 等。图表会根据网站主题使用浅色或深色配色，并以严格模式绘制：标签文本无法注入 HTML，也无法在点击时执行代码。

如何编写数学公式？

行内公式写在 $ 符号之间，如 $a^2 + b^2 = c^2$；独占一行的居中公式写在 $$ 之间，或放在语言为 math 的代码块中。语法为 KaTeX 支持的 LaTeX。要输入字面上的 $ 符号（例如价格），请在前面加反斜杠；不过，"$5 和 $10" 不会被当作公式，因为第二个 $ 前面有空格、后面是数字。

可以在 Markdown 中使用 HTML 吗？

可以，与 GitHub 一样：例如用 details 和 summary 创建可折叠区块、用 kbd 表示按键、sub 和 sup、带尺寸的 img 或带 align 的 p。显示之前会移除脚本、onclick 等事件属性、javascript: 链接以及 style 和 form 标签，因此第三方文档无法执行代码，也无法修改页面的其他部分。

如何转换为 PDF？

通过“导出”中的“打印或另存为 PDF”，会打开只包含文档、不含网站界面的打印对话框，在其中选择“另存为 PDF”即可。表格、代码块和图表会尽量避免跨页断开。如果需要用于发布的文件，“下载 .html”会生成一个内含样式的独立页面。

为什么使用相对路径的图片不显示？

因为查看器无法访问仓库中的其他文件夹：像 ./docs/logo.png 这样的路径只存在于你的磁盘或 GitHub 上。以 https:// 开头的完整地址图片可以正常显示。