mermaid-ascii vs Mermaid官方渲染终端ASCII绘图与浏览器方案终极对比【免费下载链接】mermaid-asciiRender Mermaid graphs inside your terminal项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-asciiMermaid 是主流开源绘图语言官方方案需要在浏览器中渲染成 SVG 图片而mermaid-ascii把同样的 Mermaid 代码直接转换成终端 ASCII 绘图一个 Go 编写的命令行工具支持流程图、时序图、ER 图三大类型无需浏览器、无需联网在终端里即可画出图。这篇文章带你做一次终端 ASCII 绘图与浏览器渲染方案的终极对比帮你 30 秒选出最合适的绘图方式 什么是 mermaid-asciimermaid-ascii 是一个用 Go 语言实现的开源命令行工具定位一句话把 Mermaid 代码渲染成纯文本 ASCII 图。它的工作流程是详见 README.md解析将 Mermaid 源码解析为节点和边等基础组件流程图解析见 pkg/graph/parse.go布局映射到一个网格坐标系上计算箭头走向避免连线穿过节点绘制把网格转成字符画直接打印到终端入口逻辑非常简洁main.go 只有几行核心执行在 cmd/root.go读取文件或 stdin自动检测图表类型调用 pkg/render/render.go 渲染输出。与 Mermaid 官方方案最大的区别官方渲染依赖浏览器或 Node.js 运行时输出 SVG 矢量图mermaid-ascii 输出的是纯文本字符画——可以复制、可以 diff、可以进 Git、可以跑在 CI 日志里。快速上手mermaid-ascii 三种安装方法方法一直接下载二进制最快从项目 Releases 下载对应平台的压缩包解压后即可运行$ ./mermaid-ascii --help方法二源码构建$ git clone https://gitcode.com/GitHub_Trending/me/mermaid-ascii $ cd mermaid-ascii $ go build也可以用 Nix项目自带 flake.nixnix build即可。方法三Docker$ docker build -t mermaid-ascii . $ echo graph LR; A--B | docker run -i mermaid-ascii -f -项目还提供了 Makefilemake build / install / test和 Dockerfile方便二次开发。安装完成后第一条命令就能感受到差异$ cat test.mermaid graph LR A -- B C B -- C D D -- C $ mermaid-ascii --file test.mermaid ┌───┐ ┌───┐ ┌───┐ │ │ │ │ │ │ │ A ├────►│ B ├────►│ D │ │ │ │ │ │ │ └─┬─┘ └─┬─┘ └─┬─┘ │ │ │ │ ▼ │ │ ┌───┐ │ │ │ │ │ └──────►│ C │◄──────┘ │ │ └───┘不需要浏览器不需要截图图就在终端里 ️核心对比终端ASCII绘图 vs 浏览器渲染对比维度mermaid-ascii终端 ASCIIMermaid 官方渲染浏览器输出格式纯文本字符画Unicode / 纯 ASCII 双模式SVG 矢量图运行环境任意终端无需浏览器和 Node.js浏览器或 Node.js 运行时离线可用✅ 完全离线单文件二进制编辑器插件/CDN 场景可能依赖网络可复制性✅ 文本可复制、可 diff、可进 CI 日志❌ SVG 需要额外转换颜色依赖终端支持classDef着色完整支持主题与自定义样式图表类型流程图、时序图、ER 图全部 20 类型甘特、类图、饼图等交互无静态文本缩放、悬停、点击链接大宽图适配需手动调节间距参数-x/-y自适应缩放中文字符✅ 支持 CJK 宽度对齐测试覆盖见 pkg/sequence/charset.go✅ 原生支持集成成本一条管道命令cat x.mmd \| mermaid-ascii需要编辑器插件或前端集成一句话总结要发出去给别人看的精美图选浏览器方案要在工作流里用的图选终端 ASCII 方案。三大图表类型的实际体验差异mermaid-ascii 完整支持三类图源码分别位于 pkg/graph/流程图、pkg/sequence/时序图、pkg/er/ER 图。1️⃣ 流程图graph方向、标签、多箭头都支持graph LR/graph TD两种方向带标签的边、A B合并语法、虚线/粗线等边类型均可渲染$ mermaid-ascii -f test.mermaid ┌───┐ ┌───┐ ┌───┐ │ │ │ │ │ │ │ A ├────►│ B ├─example►│ D │ │ │ │ │ │ │ └─┬─┘ └─┬─┘ └─┬─┘ │ │ │ │ ▼ │ │ ┌───┐ │ │ │ │ │ └──────►│ C │◄──────────┘ │ │ └───┘布局可调-x 8拉大水平间距、-p 3增加框内留白窄终端和大屏幕都能适配。2️⃣ 时序图sequenceDiagram消息流一目了然参与者声明、别名、自消息、loop/opt/alt等分组块全部支持渲染成带生命线和时间序的字符画sequenceDiagram Alice-Bob: Hello Bob! Bob--Alice: Hi Alice!┌───────┐ ┌─────┐ │ Alice │ │ Bob │ └───┬───┘ └──┬──┘ │ │ │ Hello Bob! │ ├───────────►│ │ │ │ Hi Alice! │ │◄┈┈┈┈┈┈┈┈┈┈┈┤ │ │实线箭头表示同步消息虚线箭头表示回复——这和浏览器 SVG 里的视觉语义完全一致只是载体变成了字符。3️⃣ ER 图erDiagram数据库设计者的宝藏实体渲染成带属性表格的数据表关系用**鸦爪连线crows-foot**表示每条关系标签独占一行走线互不碰撞。主键PK、外键、基数符号||--o{等都完整支持详见 pkg/er/layout.go┌─────────────────────────────┐ ┌────────────────────────────┐ │ CUSTOMER │ │ ORDER │ ├────────┬───────────────┬────┤ ├───────────────┬───────┬────┤ │ string │ name │ PK │ │ int │ id │ PK │ │ string │ email │ │ │ decimal(10,2) │ total │ │ └────────┴──────┬────────┴────┘ └───────────────┴───────┴────┘ └||───────────────places────────────────o{┘在代码评审里贴这样的 ER 图进终端或 PR 评论区比截图一张 SVG 方便得多。进阶技巧彩色输出与纯ASCII模式如果你的终端支持真彩色mermaid-ascii 能通过classDef语法给节点着色。下面这张图就是彩色渲染的真实效果——红色test1指向绿色test2再指向蓝色test3如果你的环境老终端、某些 CI 系统、纯文本邮件只认标准 ASCII加上--ascii参数即可切换为、|、v等基础字符保证 100% 兼容$ cat test.mermaid | mermaid-ascii --ascii --- --- --- | | | | | | | A |----| B |----| D | | | | | | | --- --- ---还有一个调试彩蛋--coords会叠加显示网格坐标方便理解布局算法详见 README.md 的 How it works 章节。彩蛋mermaid-ascii 自带 Web 可视化界面mermaid-ascii 不只是命令行工具还内置了一个 HTTP 服务实现见 cmd/web.go$ mermaid-ascii web --port 3001 # 访问 http://localhost:3001网页左侧粘贴 Mermaid 代码右侧实时预览 ASCII 输出还能拖动滑块调整xPadding/yPadding间距、勾选扩展字符集服务端带结果缓存。相当于浏览器里生成 ASCII体验介于纯 CLI 和官方渲染之间。如何选择30秒选型指南✅选 mermaid-ascii如果你常年在终端 / SSH / 跳板机上工作不想切浏览器需要把架构图、ER 图直接贴进 Git 提交信息、CI 日志、纯文本邮件想要可 diff、可版本管理的文本化图表只画流程图、时序图、ER 图这三种高频图✅选 Mermaid 官方渲染如果你需要甘特图、类图、饼图等 20 图表类型需要精美主题、SVG 缩放、交互式悬停图表面向演示和发布对视觉精度要求高依赖subgraph嵌套、非矩形节点等 mermaid-ascii 尚未覆盖的特性见 README.md 的 TODO 列表两者并不互斥同一份 .mmd 源码浏览器出 SVG 用于发布mermaid-ascii 出文本用于工作流是不少团队的标准搭配。常见问题 FAQQ1mermaid-ascii 和官方渲染的图长得不一样布局算法不同mermaid-ascii 使用自己的网格布局引擎网格路径规划见 pkg/graph/draw.go节点排布和浏览器 dagre 引擎会有差异但拓扑关系和语义标签、方向、箭头类型完全一致。Q2中文会错位吗不会。渲染基于等宽字符宽度计算对 CJK 宽字符、表情、组合字符都有专门处理测试用例覆盖在 cmd/testdata/含cjk_entities.txt、mixed_width_cjk.txt等。Q3大流程图太宽撑爆终端怎么办用-x水平间距、-y垂直间距、-p边框留白三个参数压缩布局或改用graph TD纵向方向项目也在 TODO 中计划支持限制最大渲染宽度。写在最后Mermaid 官方渲染解决了图长什么样mermaid-ascii 解决了图在终端里怎么活。如果你的工作流离不开命令行装一个 mermaid-ascii让架构图、时序图、ER 图从此和ls一样随手可用 【免费下载链接】mermaid-asciiRender Mermaid graphs inside your terminal项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-ascii创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考