企业官网建设流程全解析

如何用mermaid-ascii画左右布局流程图？graph LR语法完全讲解

【免费下载链接】mermaid-asciiRender Mermaid graphs inside your terminal项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-ascii

mermaid-ascii 是一个用 Go 编写的命令行工具，能把 Mermaid 代码直接渲染成终端里的 ASCII 流程图。对于需要左右布局流程图的场景，只需用graph LR声明方向，节点就会自动从左到右排开——无需浏览器、无需图片，复制粘贴即可分享。本文带你快速掌握 graph LR 的完整语法与实用渲染参数。

一、graph LR 一行切换左右布局

Mermaid 的流程图声明行支持两种写法，效果相同：

graph LR A --> B

flowchart LR A --> B

运行 mermaid-ascii 后输出如下（来自官方示例）：

+---+ +---+ | | | | | A |---->| B | | | | | +---+ +---+

方向字段的解析逻辑在 pkg/graph/parse.go 中，规则很清晰：

⚠️ 新手最常踩的坑：以为RL会从右往左画，实际上 mermaid-ascii 中它等价于LR。想要左右布局，写graph LR就对了。

二、graph LR 支持的箭头与边类型

在左右布局中，-->是最常用的实线箭头，此外还支持 5 种边类型（见 README.md 的示例）：

• -->实线箭头（默认）
• -.->虚线箭头
• ==>粗箭头
• ---无箭头连线
• --o圆头、--x叉头

双向箭头也完全支持，如A <-->|sync| B，渲染结果参考测试样例 bidirectional_labeled_lr.txt：

+---+ +---+ | | | | | A |<-sync->| B | | | | | +---+ +---+

三、graph LR 常用语法技巧

1. 标签边：用|标签|给连线加文字说明

graph LR A -->|登录成功| B

2. 一行多箭头：链式写法非常简洁，一行就能画出 A→B→C 的路径

graph LR A --> B --> C

3. 合并语法&：从同一个节点分叉到多个目标

graph LR A --> B & C B --> C & D D --> C

渲染后是经典的"多入单出"布局，箭头会自动绕行避免穿过节点：

┌───┐ ┌───┐ ┌───┐ │ │ │ │ │ │ │ A ├────►│ B ├────►│ D │ │ │ │ │ │ │ └─┬─┘ └─┬─┘ └─┬─┘ │ │ │ │ ▼ │ │ ┌───┐ │ └──────►│ C │◄──────┘ └───┘

4. 彩色节点：通过classDef+:::给节点着色，终端支持颜色时输出带色框节点。

四、调整左右布局的间距参数

graph LR下节点横向排布，如果名字较长导致拥挤，可用全局参数微调（定义见 cmd/root.go）：

比如拉宽左右布局的横向间距：

mermaid-ascii -f test.mermaid -x 8

其他实用开关：

• --ascii：纯 ASCII 字符输出（+---+替代┌───┐），兼容性最好
• --coords：在图上叠加网格坐标，方便理解布局算法（布局原理见 pkg/graph/direction.go）
• -c / --verbose：调试信息

五、三种使用方式：文件、管道与 Web 界面

1. 渲染文件（最常用）：

mermaid-ascii -f flow.mermaid

2. 管道标准输入，适合和其他工具串联：

echo 'graph LR A-->B-->C' | mermaid-ascii

3. 交互式 Web 界面，边写边看效果：

mermaid-ascii web --port 3001 # 然后访问 http://localhost:3001

没有环境也能用 Docker：docker build -t mermaid-ascii .后docker run -i mermaid-ascii -f -，详见 Dockerfile。想自己编译的话，git clone https://gitcode.com/GitHub_Trending/me/mermaid-ascii后执行go build即可（仓库结构：入口 main.go，CLI 在 cmd/，图引擎在 pkg/graph/）。

六、小结：graph LR 使用清单

1. 声明graph LR（或flowchart LR）即可得到左右布局流程图
2. RL/BT会被接受但按LR/TD绘制，别指望反转效果
3. 支持标签边、&合并、链式箭头和 5 种边类型
4. 拥挤时用-x加宽水平间距，终端兼容性差时加--ascii
5. 复杂图建议开web子命令交互调试，最终粘贴到终端一键出图

掌握以上语法，你就能在终端里画出清晰、可复制、可分享的左右布局 ASCII 流程图了。

【免费下载链接】mermaid-asciiRender Mermaid graphs inside your terminal项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-ascii