Mermaid 图表渲染器
指导
Mermaid 图表渲染器
粘贴 mermaid.js 语法，立即看到一个实时、互动的图表，可以复制或下载。支持流程图、序列图、甘特图、饼图、类图、ER图、状态图、旅程图等——所有图表均在浏览器中客户端渲染，无需服务器、账号或安装。
Mermaid 适用于“图表作为代码”：你的图表与项目其他部分一起以纯文本形式存在，但人类需要渲染器才能看到图表。此工具填补了这一空白——只需粘贴任意 mermaid 片段，切换主题，并将结果导出为 SVG 或 PNG。
如何使用
- 将您的 mermaid 代码粘贴到编辑器中——或点击 流程图, 序列号, 甘特图, 饼图， 或者 班级 加载示例。
- 选择一个 主题 (默认、深色、森林、中性、基础) 和一个 背景 (透明、白色、浅灰、深色) 以匹配您的演示文稿或文档。
- 边编辑边实时查看图表更新。如果语法错误，您将在预览下方看到精确的 mermaid 错误信息。
- 当看起来正确时，点击 Download SVG 获取完美缩放的矢量图， 下载 PNG 获取位图截图，或 复制 获取 SVG 源码以嵌入。
特征
- 实时预览 —— 编辑时图表重新渲染，通过防抖优化，确保大图表运行流畅。
- 支持所有主要的 mermaid 类型 —— 流程图、序列图、甘特图、饼图、类图、ER图、状态图、旅程图，以及 mermaid v11 支持的任何其他语法。
- 5 个内置主题 —— 默认、深色、森林、中性、基础，以及可配置的预览背景（透明、白色、浅色或深色）。
- SVG 和 PNG 导出 —— 可下载清晰的矢量 SVG 或 2 倍缩放的 PNG，无需离开页面。
- 可复制的 SVG 源码 —— 获取原始标记，可粘贴到 README、文档或网页中。
- 内联错误报告 —— mermaid 语法错误会清晰显示，以便您几秒钟内修复。
- 隐私优先 —— 所有内容都在浏览器中运行。您的图表不会上传到我们的服务器。
常问问题
-
什么是 mermaid.js？
Mermaid 是一个开源的 JavaScript 库，可将纯文本图表定义转换为 SVG 图表。它被创建出来，以便工程师、技术作家和产品团队可以将图表与代码一同纳入版本控制，而不是在单独的设计工具中维护二进制文件。Mermaid 内置支持多种图表类型，从简单的流程图到实体关系图和甘特图。
-
为什么使用“图表作为代码”而不是绘图工具？
以文本形式编写的图表存在于您的仓库中，能够在拉取请求中清晰地对比差异，并在底层思想变化时即时更新。它们可搜索、可脚本化，且不会像维基中的截图那样与代码库脱节。视觉绘图工具适合一次性幻灯片，但对于动态文档，基于文本的格式能更好地与团队协同。
-
导出图表时 SVG 和 PNG 有何区别？
SVG 是矢量格式——它以数学方式存储形状和文本，因此在任何尺寸下都保持清晰，且对于普通图表文件体积很小。PNG 是位图格式，以固定像素网格存储，因此在不支持 SVG 的工具中（如旧版演示文稿、部分聊天应用、仅图片平台）是一个安全选择。对于文档、网页和现代演示工具，SVG 几乎总是更好的选择。
-
Mermaid 主题如何影响渲染？
Mermaid 主题是一组应用于渲染图表的默认颜色和字体规则。默认主题明亮，适用于浅色背景，深色主题在深色界面中反转颜色，森林主题使用绿色调，中性主题为灰度，基础主题是简洁的基准，可通过主题变量进行覆盖。切换主题仅改变图表的外观，底层图表结构保持不变。
-
渲染是在本地进行还是在服务器上进行？
渲染完全在您的浏览器中使用 Mermaid 的 JavaScript 引擎完成。没有任何内容被上传、发送到服务器或存储在远程。这确保了机密架构图的隐私性，也意味着即使在慢网或离线网络中，工具仍能正常工作。
