D2语法

D2是一个功能强大的图表脚本语言，它让系统架构图的创建和维护变得简单高效。通过文本描述图表，你可以专注于内容而非布局(类似markdown)，同时享受版本控制和团队协作带来的便利。

• 官网
• 在线体验
• 语法速查
• 语法详细
• 项目镜像
• 示例

1. 安装d2

• mac安装

brew install d2

• 验证安装

d2 -v

输出：0.7.0

安装成功

2. 使用

创建文件

text.d2

x -> y -> z

生成图表

d2 text.d2 text.svg

实时监控

D2支持实时监控文件变化并自动重新渲染：

d2 text.d2 text.svg --watch

输出格式支持

D2 支持多种输出格式，包括 SVG、PNG、PDF，PPTX，GIF 等。你可以根据需要选择合适的格式。

格式	后缀	描述
SVG	.svg	可缩放矢量图形，矢量图像格式，支持缩放而不失真
PNG	.png	便携式网络图形，位图图像格式，质量较高
PDF	.pdf	便携式文档格式，适合打印和分享
PPTX	.pptx	PowerPoint 幻灯片格式，支持动画和交互
GIF	.gif	动态图像格式，循环播放

3. 语法

D2 语法简单而强大，以下是一些基本示例：

3.1 节点定义

# 定义一个简单的节点，并设置形状为圆柱体
服务器: { shape: cylinder } 

# 定义另一个节点
客户端

3.2 连接关系

使用箭头 -> 来定义节点之间的连接关系，并可以为连接线添加标签。

# 客户端 节点 连接到 服务器 节点，连接线标签为 "查询"
客户端 -> 服务器: 查询

3.3 嵌套节点

D2 支持通过缩进来定义层级关系，使图表结构更清晰。

系统: {
  前端: {
    移动端
    网页端
  }
  后端: {
    API服务
    数据库
  }
  前端 -> 后端
}

3.4 属性定义

你可以为节点和连接添加属性，自定义它们的外观和行为

注意： 16禁止颜色需要加双引号，避开注释

用户: {
  shape: person  # 设置节点形状为"人"
  style.fill: "#ffcccc"  # 设置背景颜色
}

API服务器: {
  shape: rectangle  # 设置节点形状为矩形
  style.stroke: "#3366ff"  # 设置边框颜色
}

用户 -> API服务器: 请求 {
  style.stroke-dash: 3  # 设置为虚线
}

3.5 布局引擎

D2内置多种布局引擎，适用于不同类型的图表布局。默认使用 dagre 布局引擎，也可以通过指定 --layout 选项来选择其他布局引擎，如 elk、topo、dot 等。

可在文档头部，设置

• 层次布局（Dagre）

Dagre是默认的布局引擎，适用于大多数流程图和系统架构图：

vars: {
  d2-config: {
    layout-engine: dagre  # 指定布局引擎
  }
}

# 图表内容在下面写...

• 弹性布局（ELK）

vars: {
  d2-config: {
    layout-engine: elk  # 使用ELK引擎
    elk: {
      algorithm: layered  # 指定ELK算法
    }
  }
}

# 图表内容在下面写...

3.6 主题

D2提供多种内置主题，可以轻松改变图表的整体风格。

主题ID	描述
0	默认主题，平衡的配色方案，适合大多数场景
300	终端风格，黑白配色，适合代码文档
100	鲜明的蓝紫色调，适合演示场景
200	专业的灰色调，适合正式文档

vars: {
  d2-config: {
    theme-id: 300  # 使用"terminal"主题
  }
}

# 图表内容在下面写...