DiagramPreview
稳定渲染器GFMMermaid 代码块复制 HTML

Markdown Preview

预览技术 Markdown，并直接渲染文档中的 Mermaid fenced code block。

示例
渲染文档就绪
你的 Markdown 预览会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

HTML 沙箱预览

在禁用脚本的沙箱中预览 HTML 组件、邮件片段和落地页区块。

打开
CSS 渐变预览

预览 CSS linear、radial、conic 和 repeating 渐变，并提取色标。

打开
Base64 图片预览

预览 Base64 图片字符串和 data URL，并分析 MIME 类型和体积。

打开

使用方法

  1. 1把 Markdown 粘贴到编辑器。
  2. 2需要图表时加入 Mermaid fenced block。
  3. 3复制 HTML 或导出渲染结果。

常见场景

README 预览技术文档AI 生成 Markdown 复核

相关工具

HTML 沙箱预览

在禁用脚本的沙箱中预览 HTML 组件、邮件片段和落地页区块。

CSS 渐变预览

预览 CSS linear、radial、conic 和 repeating 渐变，并提取色标。

Base64 图片预览

预览 Base64 图片字符串和 data URL，并分析 MIME 类型和体积。

常见问题

Markdown 里的 Mermaid 可以渲染吗？

可以，标记为 mermaid 的 fenced code block 会转换成 SVG 图表。

可以复制生成的 HTML 吗？

可以，预览渲染后使用工具栏的复制操作。

Markdown Preview 面向图文混排的技术内容，让作者在发布到仓库或文档站前检查标题、列表、代码块和 Mermaid 图表。

预览支持 GitHub 风格 Markdown，并将 Mermaid fenced block 渲染成 SVG，非常适合 README、架构决策记录和产品规格。

当你需要把渲染内容移动到其它写作或评审流程中时，可以使用复制和导出操作。

Demo：预览带 Mermaid 的 Markdown 文档

Markdown 预览在图表、标题、列表、发布说明一起渲染时更有价值，可以在推送到 GitHub、GitLab 或内部 wiki 前发现坏掉的代码围栏。

  • Mermaid 使用带语言标记的 fenced code block。
  • 图表源码应贴近解释它的段落。
  • 表格和代码围栏要一起检查，一个未闭合围栏会影响后续内容。
# Checkout Flow

```mermaid
sequenceDiagram
  Browser->>API: POST /checkout
  API->>Payment: authorize
  Payment-->>API: approved
```

发布清单：避免 Markdown 渲染差异

不同平台的 Markdown 引擎会有差异。浏览器预览能先发现结构问题，但最终表现仍取决于发布平台。

  • 检查标题层级，不要从 h1 跳到 h4。
  • 确认代码围栏在下一节之前关闭。
  • 确认图片 URL 和 Mermaid 语法被目标平台支持。
## Incident Summary

- Impact: checkout latency
- Fix: cache inventory lookup
- Follow-up: add p95 alert

Markdown Preview 检查清单

当你需要在文档、PR、故障复盘或交接材料发布前检查源码内容时，可以使用 Markdown Preview。预览 Markdown，并渲染 Mermaid fenced code block。

导出前建议检查标签是否可读、关系是否和源码一致、示例是否包含敏感信息，以及修改输入后预览是否仍然成立。

限制与排查

如果预览失败，先把输入缩小到最小完整示例，确认格式语法，再逐段加回内容。很多失败来自不完整文件、缩进错误、缺少图表头，或复制了依赖隐藏上下文的片段。

请把预览结果当作 review 界面，而不是生产事实来源。生成的图表、转换文件、看板和规则示例在进入正式文档或运维流程前仍需要人工确认。

可测试的示例输入

  • 文档: # API Notes Use this document to describe a workflow. - Fast preview - Diagram support - Export actions ```ts const ready = true; ```
  • Mermaid 代码块: # Checkout flow ```mermaid sequenceDiagram participant Buyer participant Store Buyer->>Store: Place order Store-->>Buyer: Confirmation ``` The diagram is rendered inside the Markdo...
  • 发布说明: # Release notes ## Added - Mermaid preview - PlantUML preview - Markdown preview ## Fixed - Cleaner export toolbar

工具完成度

稳定渲染器

稳定工具

这个工具已有专用渲染或预览界面，支持常用导出，适合浏览器内反复预览、修改和发布前检查。

分级不是质量打分，而是告诉用户当前工具更适合稳定导出、深度调试、快速解析，还是 AI 辅助生成。