示例

limu 支持的每种图表,由它的 svg 包在构建本站时渲染。

查看 Markdown
主题

每种图表在这里展示一两个示例,其余的在它自己的页面上。每个示例都能在 Playground 中打开。标为 Beta 的类型用 -beta 声明,因为 Mermaid 可能还会修改它们。示例的标题和图表沿用 limu 示例库的英文原文。

块图

按列手动摆放在网格上的块,用箭头相连。

A web service in three tiers在 Playground 中打开
Layers of a mobile app在 Playground 中打开

全部 5 个块图示例

C4

在 C4 模型的某一层上,一个软件系统的上下文、容器或组件。

A food delivery platform在 Playground 中打开

全部 4 个C4示例

类图

类及其字段和方法,以及它们之间的继承和使用关系。

An online store's orders在 Playground 中打开
Payment gateways在 Playground 中打开

全部 6 个类图示例

实体关系图

数据模型中的实体、它们的属性,以及实体之间的数量对应关系。

A blog's schema在 Playground 中打开
An online store在 Playground 中打开

全部 6 个实体关系图示例

事件建模

把系统随时间的变化排成一行界面、命令、事件和视图。

An online store's checkout在 Playground 中打开
Booking a meeting room, with its data在 Playground 中打开

全部 4 个事件建模示例

流程图

用方框表示流程的步骤,用箭头表示每一步通向哪里。

Checking out an order在 Playground 中打开
From pull request to production在 Playground 中打开

全部 7 个流程图示例

甘特图

把项目的任务画成沿日历排列的条形,标出日期和依赖。

Mobile app 3.0 launch在 Playground 中打开
Postgres 17 upgrade在 Playground 中打开

全部 5 个甘特图示例

Git 图

仓库各分支上的提交,以及分支在哪里分叉、在哪里合并。

A release with Git flow在 Playground 中打开
Trunk-based development在 Playground 中打开

全部 6 个Git 图示例

看板

按列排列卡片的看板,每列对应工作的一个阶段。

Sprint board for a payments team在 Playground 中打开
Support queue on a Monday在 Playground 中打开

全部 3 个看板示例

思维导图

一个中心主题,从中分出若干话题,话题下再分出子话题。

Planning a product launch在 Playground 中打开
Learning Kubernetes在 Playground 中打开

全部 5 个思维导图示例

数据包图

数据包或报头的各个字段,宽度与所占位数一致。

IPv4 header在 Playground 中打开

全部 4 个数据包图示例

饼图

把整体分成若干扇区,扇区大小与占比一致。

Where the build minutes go在 Playground 中打开

全部 3 个饼图示例

象限图

在分成四个象限的正方形里,按两条坐标轴放置的点。

Backlog by effort and impact在 Playground 中打开

全部 3 个象限图示例

需求图

需求、满足或验证需求的元素,以及它们之间的依赖。

Paying at checkout在 Playground 中打开
Resetting a password在 Playground 中打开

全部 3 个需求图示例

桑基图

在节点之间流动的数量,每条流带的宽度与流量一致。

Cloud bill by team and service在 Playground 中打开
What became of trial signups在 Playground 中打开

全部 4 个桑基图示例

时序图

并排的参与者,以及它们按发送顺序互相发送的消息。

Signing in with OAuth在 Playground 中打开
Paying for an order在 Playground 中打开

全部 7 个时序图示例

状态图

系统可能处于的状态,以及让它从一个状态转到另一个状态的事件。

A subscription's billing在 Playground 中打开
A pull request在 Playground 中打开

全部 6 个状态图示例

时间线

沿一条线按顺序排列、按时期分组的事件。

Checkout API outage在 Playground 中打开
Our road to continuous delivery在 Playground 中打开

全部 3 个时间线示例

用户旅程

用户完成一项任务的各个步骤,按每一步的感受打分。

Shipping a first deploy在 Playground 中打开

全部 3 个用户旅程示例

XY 图

画在横轴和纵轴上的柱形和折线。

Monthly active users在 Playground 中打开
p95 latency by region在 Playground 中打开

全部 4 个XY 图示例

Agent 流程图Beta

AI agent 的任务、工具和决策,以及它们如何互相交接工作。

A code review agent在 Playground 中打开
Support tickets handed between agents在 Playground 中打开

全部 5 个Agent 流程图示例

架构图Beta

按运行位置分组的服务和资源,以及它们之间的连接。

A web app in the cloud在 Playground 中打开
A seaweed farm's telemetry在 Playground 中打开

全部 4 个架构图示例

CynefinBeta

按 Cynefin 框架的各个域归类的情境,从清晰到混乱。

Sorting a platform team's backlog在 Playground 中打开

全部 3 个Cynefin示例

石川图Beta

一个问题的原因,按类别排在鱼骨上。

Slow checkout page在 Playground 中打开

全部 3 个石川图示例

雷达图Beta

画在从同一中心向外辐射的坐标轴上的几组数值。

Skills across two teams在 Playground 中打开
Choosing a database在 Playground 中打开

全部 3 个雷达图示例

铁路图Beta

把语法规则画成轨道,合法的输入从起点沿轨道走到终点。

A JSON number在 Playground 中打开
A small expression grammar在 Playground 中打开

全部 5 个铁路图示例

泳道图Beta

按泳道排布的流程,每条泳道对应执行步骤的一个人或团队。

Incident response across teams在 Playground 中打开
From pull request to production在 Playground 中打开

全部 5 个泳道图示例

树视图Beta

按树形缩进的层级结构,如项目的文件夹和文件。

A Go web service在 Playground 中打开
A monorepo, drawn with box characters在 Playground 中打开

全部 4 个树视图示例

矩形树图Beta

用嵌套矩形表示的层级数值,每个矩形的大小与数值一致。

A month of cloud costs在 Playground 中打开
What is in the JavaScript bundle在 Playground 中打开

全部 3 个矩形树图示例

用例图Beta

系统之外的参与者,以及他们参与的用例。

A public library's lending system在 Playground 中打开
A ride-hailing app在 Playground 中打开

全部 5 个用例图示例

韦恩图Beta

用相互重叠的圆表示集合,重叠处是它们的共同部分。

Where platform engineering sits在 Playground 中打开
Where the checkout code runs在 Playground 中打开

全部 3 个韦恩图示例

Wardley 地图Beta

价值链的各个组件,按可见程度和演进程度放置。

A video streaming service在 Playground 中打开
A seaweed farm's value chain在 Playground 中打开

全部 5 个Wardley 地图示例