Mermaid 图表编辑器
免费在线 Mermaid 图表编辑器。用文本语法快速创建流程图、时序图、甘特图、饼图等 9 种图表，实时渲染、缩放预览，一键导出 SVG 或 PNG，完全在浏览器本地运行。
Mermaid 是什么？
Mermaid 是一种开源的图表描述语言，类似 Markdown，用纯文本描述节点和连线，渲染器会自动把文本绘制成图表，广泛用于文档、Wiki 和代码仓库。
支持哪些图表类型？
编辑器内置流程图、时序图、类图、状态图、ER 图、甘特图、饼图、思维导图和时间线 9 种示例。Mermaid 11 还支持更多类型，可以手动输入语法创建。
怎么创建图表？
从下拉框选择示例，或在左侧编辑器直接编写 Mermaid 代码。停止输入约 350 毫秒后预览自动重新渲染；语法有误时会出现红色面板显示具体错误，旧图表保持不变。
我的图表代码会被发送到别处吗？
不会。所有渲染都在浏览器本地用 JavaScript 完成，图表代码不会离开你的设备。
如何导出图表？
「下载 SVG」得到可无损缩放的矢量文件；「下载 PNG」输出 2 倍分辨率位图，还可勾选透明背景；「复制代码」把 Mermaid 源码复制到剪贴板。
为什么 PNG 导出有时会失败？
部分 Mermaid 功能通过 foreignObject 渲染，浏览器可能拒绝把它光栅化到画布上。此时 PNG 导出会提示错误，但 SVG 下载不受影响，始终可用。
缩放是怎么工作的？
预览支持 0.5x 到 2x 缩放：+/- 按钮每次步进 10%，「适配」自动把图表缩放到预览区大小，「100%」恢复原始尺寸。
可以在自己的文档里使用 Mermaid 吗？
可以。GitHub、GitLab 以及许多文档工具原生支持 Mermaid 代码块——把代码放进 mermaid 围栏代码块，页面就会自动渲染成图表。
编辑器支持深色模式吗？
支持。图表会跟随平台主题：界面切换到深色模式时，图表自动用 Mermaid 的 dark 主题重新渲染。
有什么让图表更易读的技巧？
节点文字尽量简短；根据内容选择方向（TD 从上到下、LR 从左到右）；很大的图拆成多个子图；每种图类型先用内置示例做模板再修改。
如何使用Mermaid 图表编辑器
Mermaid 用纯文本语法画图，一段缩进清晰的代码就能生成流程图、时序图、甘特图等。本编辑器在你输入的同时实时渲染，全部计算都在浏览器本地完成。
- 先从“示例”下拉框挑一个起点——内置流程图、时序图、类图、状态图、ER 图、甘特图、饼图、思维导图、时间线 9 种示例，选中即把对应代码载入编辑器。
- 在左侧代码面板里修改 Mermaid 代码，右侧预览会在停止输入约三分之一秒后自动重新渲染；出现语法错误时红色面板会给出提示，同时保留最后一次渲染成功的图，方便对照修改。
- 用加号和减号按钮在 50%–200% 之间缩放，按“适配”让图表自动铺满预览区，按“100%”恢复原始大小。
- 需要透明底图时勾选“透明背景”，再按“下载 SVG”或“下载 PNG”——PNG 以两倍分辨率导出，嵌入文档放大后依然清晰。
- 按“复制代码”把 Mermaid 源码放进剪贴板，方便粘贴到文档、Wiki 或代码仓库。
图渲染不出来时，优先注释掉最近改动的几行来定位问题——错误信息会指出出错的行，预览区也会一直保留上一个可用版本，直到语法恢复正确。
相关工具
- 代码转图片 将代码片段转换为精美的可分享图片，支持语法高亮、自定义主题和窗口装饰。100%隐私保护，完全在浏览器本地运行。
- Markdown 预览器 免费在线 Markdown 编辑器，支持实时预览。编写、渲染和导出 Markdown，完整支持 GFM 表格、代码块和任务列表。
- SVG 查看器 在线预览、编辑和优化 SVG 文件。支持实时预览、代码编辑和优化工具。
- JSON树形查看器 将JSON数据可视化为可折叠的交互式树形结构。支持搜索键名和值、悬停查看JSONPath、懒加载处理大文件，以及拖拽加载.json文件。
- 文件哈希校验 本地计算校验MD5、SHA-1、SHA-256、SHA-512文件哈希值
- Chmod 计算器 免费在线chmod计算器，通过复选框可视化Linux文件权限并计算chmod值。即时转换数字(755, 644)和符号(rwxr-xr-x)表示法，支持setuid、setgid、sticky bit等特殊权限。
- ASCII码表 完整的ASCII字符编码参考表，包含十进制、十六进制、八进制、二进制编码、HTML实体和字符描述。支持即时搜索和筛选。
- Hex文件查看器 以十六进制转储格式查看文件内容，支持搜索、偏移导航和虚拟滚动