mermaid-ascii笔记渲染详解note over、left of、right of三种定位【免费下载链接】mermaid-asciiRender Mermaid graphs inside your terminal项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-asciimermaid-ascii 是一个把 Mermaid 时序图渲染成终端文本图的命令行工具本文详解时序图注记note的三种定位关键字note over、note left of、note right of的语法、渲染效果与自动布局规则帮助你在终端里写出不会错位、不会被截断的注释框。如何安装运行 mermaid-asciimermaid-ascii 支持流程图、时序图和 ER 图渲染结果可以直接粘贴到纯文本聊天或文档中。三种安装方式任选其一# 方式一从源码构建 git clone https://gitcode.com/GitHub_Trending/me/mermaid-ascii cd mermaid-ascii go build ./mermaid-ascii --help方式二使用 Nixnix build后执行./result/bin/mermaid-ascii --help方式三使用 Dockerdocker build -t mermaid-ascii .渲染一张时序图只需一条命令mermaid-ascii -f sequence.mermaid也支持从标准输入读取cat sequence.mermaid | mermaid-ascii。更多用法见 README.md。note 三种定位关键字一览 note 用于在时序图上添加注释框三种定位方式对比如下关键字语法注释框位置适用场景overNote over A[,B]: 文本横跨参与者的生命线居中显示解释一步操作、跨多参与者的说明left ofNote left of A: 文本A 生命线左侧偏移 2 列左侧空白区的备注right ofNote right of A: 文本A 生命线右侧偏移 2 列右侧空白区的备注三个细节让书写更省心关键字不区分大小写note over、NOTE OVER均可测试见 case_test.goNote over A:nowrap: hi中的wrap:/nowrap:前缀会被解析器自动剥离不会污染正文冒号后的内容即注释文本支持特殊字符和中文解析入口在 parser.go 的noteRegex定位类型枚举在 parser.go。Note over 用法横跨单条与多条生命线最简单的场景在参与者 B 的生命线上加一条说明终端输出效果┌───┐ ┌───┐ │ A │ │ B │ └─┬─┘ └─┬─┘ │ │ │ request │ ├────────►│ │ │ │ ┌────────────┐ │ │ processing │ │ └────────────┘ │ │ │ response│ │◄┈┈┈┈┈┈┈┈┤ │ │可以看到注释框盖住了它横跨的生命线而框外的生命线依然连续不断。完整输入输出样例见 note_over_single.txt。自动扩宽规则当多个参与者参与时Note over A,C: ...框会横跨从第一个到最后一个参与者的全部生命线如果文本比跨度更长框会左右对称扩宽并保持居中位置计算逻辑在 renderer.go 的noteBoxColumns中。跨三个参与者的例子渲染后注释框横跨 A、B、C 三条生命线效果见 note_over_span.txt。Note left of / right of 用法生命线两侧的边注当注释不想压在生命线上、只想挂在旁边时用left of或right of。下面这个样例同时展示了带空格的参与者名、over 跨框和 right of 侧框终端输出┌──────────┐ ┌──────────┐ │ cron job │ │ data svc │ └─────┬────┘ └─────┬────┘ │ │ │ sync │ ├───────────────►│ │ │ ┌─────────────────────┐ │ nightly - at 02:00 │ └─────────────────────┘ │ │ │ │ ┌─────┐ │ │ │ ack │ │ │ └─────┘ │ │ack框出现在 data svc 生命线右侧、距生命线 2 列处完整样例见 note_over_spaced_names.txt。⚠️边界情况如果给最左侧的参与者写Note left of注释框会伸到画布第 0 列之外。渲染器会自动把整张图右移、预留左侧边距gutter保证注释框完整可见、生命线和参与者框不被覆盖实现见 renderer.go 的noteLeftGutter回归测试见 notes_test.go。note 与 loop 等块配合边框自动避让note 可以写在loop、opt、alt等片段块内部。关键行为是块边框会自动扩展以容纳注释框框线永远不会切过注释文字。渲染后 loop 边框明显比生命线跨度更宽把注释框完整包在里面效果见 note_in_loop.txt。即使注释框嵌套在多层片段块内如loop套opt每一层外框都会逐层外扩、互不重叠相关测试见 notes_test.go。书写 note 文本的 3 个实用细节br/换行mermaid 允许用br/换行但终端输出是单行模式换行会被折叠成空格注释框始终是一行文本实现见 renderer.go前缀剥离Note over A:wrap: hi与Note over A:nowrap: hi中的前缀都会被解析器去掉正文只剩hi宽度自适应中文、emoji 等多字节字符按显示宽度计算框宽 文本宽度 4 列左右边框与内边距不会出现文字溢出note 相关源码与示例文件文件作用pkg/sequence/parser.gonoteRegex解析三种定位关键字识别定位与文本pkg/sequence/renderer.gonoteBoxColumns计算框坐标renderNote绘制注释框pkg/sequence/notes_test.go解析、左缘边距、块内避让等回归测试cmd/testdata/sequence/note_over_single.txtnote over 单参与者黄金样例输入期望输出cmd/testdata/sequence/note_in_loop.txtnote 位于 loop 块内的黄金样例小结Note over A[,B]横跨生命线、自动居中文本过长时对称扩宽Note left of A/Note right of A挂在生命线左右两侧 2 列处最左侧的 left of 会自动留白注释框进入 loop 等块后块边框自动外扩避让放心写在嵌套结构里掌握这三种定位你就能在 mermaid-ascii 终端时序图中精确控制每条注释的位置了。【免费下载链接】mermaid-asciiRender Mermaid graphs inside your terminal项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-ascii创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考