Mermaid C4 图速查表

架构视图，三个缩放层级。

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

系统上下文视图

C4Context 是最宽的视图：周围的人和系统。Rel 把其中两个连起来，动词写在中间。

C4Context
  title System context for the banking app
  Person(customerA, "Banking customer", "A customer of the bank.")
  System(SystemAA, "Internet banking", "Allows customers to see accounts and pay bills.")
  Rel(customerA, SystemAA, "Uses", "HTTPS")

一张系统上下文图，一个人物 Banking customer 和一个系统 Internet banking，由一根标着 Uses 和 HTTPS 的箭头相连。

把系统打开看

C4Container 是再放大一级。System_Boundary 是容器所在的框。

C4Container
  title Container diagram for the banking app
  Person(customerA, "Banking customer")
  System_Boundary(b1, "Internet banking") {
    System(SystemA, "Banking system", "Handles accounts and payments.")
    SystemDb(SystemD, "Database", "Stores accounts and payments.")
  }
  Rel(customerA, SystemA, "Uses", "HTTPS")
  Rel(SystemA, SystemD, "Reads and writes")

一张容器图，有一个叫 Internet banking 的边界，里面装着 Banking system 和 Database 两个框，另外边界外有一个客户。

一个企业边界

Enterprise_Boundary 把人和系统归到同一个组织下面。

C4Context
  title Enterprise boundary
  Enterprise_Boundary(b0, "Bank") {
    Person(customerA, "Customer")
    System(SystemAA, "Internet banking")
  }
  Rel(customerA, SystemAA, "Uses")

一个叫 Bank 的企业边界，里面装着一个客户和一个网上银行系统，两者由一根 Uses 箭头相连。

在 Mernyx 里画出来

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

购买 Mernyx Pro — $19 免费下载