D2 语法基础

D2 是一种现代的、基于文本的工具，用于创建清晰、易读的图表。它代表“声明式绘图”。在 VPasCode 中，D2 允许软件开发人员和解决方案架构师将简单的代码文本转换为干净的视觉模型，而无需手动绘制形状。

提示： D2 语法设计为简单易读。形状、连接、标签和组都可以使用基本的文本行编写，无需复杂的设置。

1. 基本形状与连接

要创建形状，只需输入其名称。要连接形状，请使用箭头（-> 表示单向，<-> 表示双向）。

# 简单连接
用户 -> Web 服务器：HTTP 请求
Web 服务器 -> 数据库：获取数据
数据库 -> Web 服务器：返回结果
Web 服务器 <-> 缓存：读写同步

D2 simple connection diagram showing request and response flows between User, Web Server, Database, and Cache - Text to diagram editor - VPasCode

默认情况下，形状显示为标准方框。您可以轻松地通过使用 shape 属性来更改形状的图标类型或设置自定义标签。

# 定义形状类型
客户端：{
  shape: person
}

云服务：{
  shape: cloud
}

主数据库：{
  shape: cylinder
  label: "主数据库（PostgreSQL）"
}

客户端 -> 云服务 -> 主数据库

D2 custom shapes showing person, cloud, and database cylinder icons linked in sequence - Text to diagram editor - VPasCode

D2 原生支持使用 class 形状进行面向对象的结构设计。

客户账户：{
  shape: class

  accountId: 字符串
  emailAddress: 字符串

  isActive(): 布尔值
}

D2 class diagram displaying CustomerAccount properties and isActive method - Text to diagram editor - VPasCode

D2 使用标准的大括号（”{}）可以轻松地将项目分组到容器中。您还可以使用点表示法在不同组之间连接元素。

# 使用容器进行分组
前端应用：{
  React UI -> 状态管理器
}

后端基础设施：{
  API 网关 -> 认证微服务
  API 网关 -> 订单微服务
}

# 跨组连接
前端应用.状态管理器 -> 后端基础设施.API 网关：REST 调用

D2 nested containers grouping Frontend Application and Backend Infrastructure modules - Text to diagram editor - VPasCode

自定义背景颜色、描边颜色和字体样式可以直接在块内使用 style 关键字进行设置。

服务 A：{
  样式：{
    填充："#e0e7ff"
    描边："#4338ca"
    圆角：8
  }
}

服务 B：{
  样式：{
    填充："#fef3c7"
    描边："#d97706"
  }
}

服务 A -> 服务 B：发送消息

D2 styled blocks showing custom background colors and border styles for Service A and Service B - Text to diagram editor - VPasCode