跳到正文
Mernyx
打开菜单

Mermaid 架构图速查表

服务、它们所属的分组,以及它们之间的边。

这个页面上的每一张图都由Mernyx——macOS 上的原生 Mermaid 编辑器绘制。不是浏览器里跑的 Mermaid.js,而是 App 画布用的同一个渲染器。

服务

圆括号选图标,方括号选标签,id 则是其它行指向的目标。

architecture-beta
  service web(server)[Web app]
  service db(database)[Database]
  service cache(disk)[Cache]
三个服务框:一个带服务器图标的 Web 应用,一个带数据库图标的 Database,还有一个带磁盘图标的 Cache。放大图表

分组

分组是装着服务的框。in 关键字把服务放进去。

architecture-beta
  group api(cloud)[API]
  service web(server)[Web] in api
  service db(database)[DB] in api
一个标着 API 的分组,里面装着 Web 和 DB 两个服务。放大图表

边

冒号前的字母说明边从哪一侧出发,冒号后的字母说明它到哪一侧抵达。

architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  service c(server)[Service C]
  a:R --> L:b
  a:B --> T:c
三个服务框。服务 A 连到右侧的服务 B,也连到上方的服务 C,每根箭头都从对应的一侧出发。放大图表

交汇点

交汇点是好几条边汇合的一个点。它画的时候没有自己的框。

architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  junction hub
  a:R -- L:hub
  hub:R -- L:b
两个服务框通过中间一个没有标签的点连在一起。放大图表

在 Mernyx 里画出来

打开一个 .mmd 文件,在画布上挪一个节点,源码跟着走。macOS 原生,不经过浏览器。

图表预览