# @d2lang/d2 中文文档

规范地址：https://npmcn.com/package/%40d2lang/d2/

版本：0\.1\.34
npm 元数据更新时间：2026-09-07T22:42:32.731Z
中文译文更新时间：2026-11-11T07:55:42.567Z
软件包许可：MPL-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40d2lang/d2
原文对照：https://npmcn.com/package/%40d2lang/d2/?lang=original
项目主页：https://github.com/d2lang/d2/tree/master/d2js/js#readme
源码仓库：https://github.com/d2lang/d2

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：95.9 MB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-08-07T16:45:09.176Z
- 最新版本发布：2026-09-07T22:42:32.400Z
- 近 30 天下载量：73799（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 2 个）

## 中文简介

D2.js是一款环绕WASM构建的D2,即现代文字到图表语言的包装.

## 安装

```sh
npm install @d2lang/d2
```

也可以使用：`pnpm add @d2lang/d2`、`yarn add @d2lang/d2`、`bun add @d2lang/d2`

## README

# D2.js 级

[![npm version](https://badge.fury.io/js/%40d2lang%2Fd2.svg)](https://www.npmjs.com/package/@d2lang/d2) [![License: MPL-2.0](https://img.shields.io/badge/License-MPL_2.0-brightgreen.svg)](https://mozilla.org/MPL/2.0/)

D2.js是一款围绕D2的JavaScript包装机,即现代图脚本语言. 它可以通过WebAssembly在浏览器和节点环境中直接运行D2.

关于使用的例子,见 [https://play.d2lang.com (英语)](https://play.d2lang.com/),由d2.js提供动力,并且是 [开源](https://github.com/d2lang/d2-playground)。 。 。 .

## 特征

-   🌐 **通用** - 在浏览器和节点环境中工作
-   🚀 **现代** - 采用无害环境管理模块,采用CJS倒置
-   🔄 **异态** - 到处都是相同的API
-   ⚡ **快点** - 由WebAssembly提供近乎本土性能的动力
-   📦 **轻巧** - 围绕核心D2引擎的最小包装器

## 安装

```bash
# npm
npm install @d2lang/d2

# yarn
yarn add @d2lang/d2

# pnpm
pnpm add @d2lang/d2

# bun
bun add @d2lang/d2
```

`@terrastruct/d2` 作为兼容软件包仍然可用,并收到相同的 在命名空间转换中释放。 新设施应使用 `@d2lang/d2`。 。 。 .

### 夜来

使用 `@nightly` 标记以获取由主分支上的每日 CI 构建的版本.

譬如说,

```bash
yarn add @d2lang/d2@nightly
```

## 使用量

D2.js使用网络工人调用一个WASM文件.

### 基本用途

```javascript
// Same for Node or browser
import { D2 } from '@d2lang/d2';
// Or using a CDN
// import { D2 } from 'https://esm.sh/@d2lang/d2';

const d2 = new D2();

const result = await d2.compile('x -> y');
const svg = await d2.render(result.diagram, result.renderOptions);
await d2.dispose();
```

配置渲染选项(参见 [编译选项](https://npmcn.com/package/%40d2lang/d2/#readme-compileoptions) 用于所有可用选项:

```javascript
import { D2 } from '@d2lang/d2';

const d2 = new D2();

const result = await d2.compile('x -> y', {
    sketch: true,
});
const svg = await d2.render(result.diagram, result.renderOptions);
```

### 进口

为了支持 [进口](https://d2lang.com/tour/imports),可以将其内容的 D2 文件路径的映射传递给编译器.

```javascript
import { D2 } from '@d2lang/d2';

const d2 = new D2();

const fs = {
  "project.d2": "a: @import",
  "import.d2": "x: {shape: circle}",
}

const result = await d2.compile({
    fs,
    inputPath: "project.d2",
    options: {
        sketch: true
    }
});
const svg = await d2.render(result.diagram, result.renderOptions);
```

## API 参考

### `new D2()`

创建新的 D2 实例.

### `compile(input: string | CompileRequest, options?: CompileOptions): Promise<CompileResponse>`

将 D2 标记编为中间代表. 直接通过选项作为 第二个论点,例如 `d2.compile('x -> y', { layout: 'tala' })`对象 输入, `input.options` 具有可选性质,在 二者都指定相同的选项.

### `render(diagram: Diagram, options?: RenderOptions): Promise<string>`

向 SVG 绘制一个编译图 .

### `dispose(): Promise<void>`

终止该工人支持这一D2案例,并拒绝任何未决手术。 打电话 当实例不再需要时, 节点进程可以退出和浏览器工作 释放资源。 通话 `dispose()` 不止一次是安全的.

### `CompileOptions`

全体 [渲染选项](https://npmcn.com/package/%40d2lang/d2/#readme-renderoptions) 属性之外:

-   `layout`: 要使用的布局引擎( E)`'dagre' | 'elk' | 'tala'`\[默认 : `'dagre'`\[ . \]
-   `fontRegular` 一个包含.ttf文件的字节数组用于正则字体. 如果没有提供,则使用Source Sans Pro Regular.
-   `fontItalic` 一个包含.ttf文件的字节数组用于斜体字体. 如果没有提供,则使用Sans Pro斜体.
-   `fontBold` 一个包含.ttf文件的字节数组,用于粗体字体. 如果没有提供,则使用Source Sans Pro Bold.
-   `fontSemibold` 包含.ttf文件的字节数组用于半粗体字体. 如果没有提供,则使用Source Sans Pro Semibold.

### `RenderOptions`

-   `sketch`: 启用草图模式\[默认:虚假\]
-   `themeID`: 要使用的主题 ID \[默认: 0\]
-   `darkThemeID`: 客户端处于暗模式时要使用的主题ID
-   `center`: 将 SVG 在包含的视图框中居中 \[默认: 假\]
-   `pad`: 像素在已渲染的图上添加 \[默认: 100\]
-   `scale`: 缩放输出。 例如:0.5到将默认大小减半. 默认会让 SVG 适合筛选 。 设置为 1 个关闭的 SVG 配置到屏幕 .
-   `forceAppendix`: 为工具提示和链接添加附录\[默认:虚假\]
-   `target`: 拟制作的目标板。 如果目标结束为“_',它将随其所有情景、步骤和层次而产生。 否则,只能提供目标板. 举个例子. `target: 'layers.x.*'` 与所有的孩子一起制造"x"层. 过_" 使所有情景、步骤和层层化。 默认情况下,只有根板被渲染出. 多板输出目前仅用于动画 SVG 等 `animateInterval` 当瞄准多个板时,必须设定为大于0的值.
-   `animateInterval`:如果给出,多个板被打包成1 SVG,在间隔(以毫秒为单位)通过每个板来过渡.
-   `salt`: 添加盐值以确保输出使用独特的ID. 这在生成多个相同的图表以包含在同一 HTML doc 中时是有用的,这样重复的ID就不会导致无效的 HTML 。 盐值是一个字符串,将在输出时附加到ID上.
-   `noXMLTag`: Omit XML 标签 `(<?xml ...?>)` 从输出 SVG 文件。 在生成 SVG 直接嵌入 HTML 时有用 .

### `CompileRequest`

-   `fs`: D2 文件路径的映射
-   `inputPath`: 条目D2文件的路径\[默认:索引\]
-   `options`: 可选 [编译选项](https://npmcn.com/package/%40d2lang/d2/#readme-compileoptions) 传递到编译器

### `CompileResponse`

-   `diagram`数字 : `Diagram`: 已编译的 D2 图
-   `renderOptions`数字 : `RenderOptions`: 组合选项与图中的配置合并
-   `fs`
-   `graph`

## 发展

D2.js 开发需要根中的 Go 版本 `go.mod`, Bun 版本 内 `package.json`,和节点.js 24与npm. 集成测试使用节点到 检查通用JS和无害环境管理应用程序中已安装npm软件包.

可选:对于最佳WASM文件大小,也安装二进制:

```bash
# macOS
brew install binaryen

# Ubuntu/Debian
sudo apt-get install binaryen
```

### 从源头建楼

```bash
git clone https://github.com/d2lang/d2.git
cd d2/d2js/js
./make.sh all
```

如果您更改了主 D2 源代码, 您应该重生 WASM 文件 :

```bash
./make.sh build
```

### 运行 Dev 服务器

您可以通过运行 dev 服务器浏览示例 :

```bash
./make.sh dev
```

访问 `http://localhost:3000` 以查看示例页.

### 测试

```bash
./make.sh test
```

### 出版

TODO稳定发布.

夜间建筑由CI通过运行实现自动化:

```bash
PUBLISH=1 ./make.sh build
```

## 捐款

欢迎捐款!

## 许可证

该项目根据"Mozilla公共许可证2.0版"获得许可.

## 常见问题

### @d2lang/d2 是什么？

D2\.js是一款环绕WASM构建的D2,即现代文字到图表语言的包装\.

### 如何安装 @d2lang/d2？

在项目目录运行 npm install @d2lang/d2，或使用 pnpm add / yarn add / bun add。

### @d2lang/d2 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @d2lang/d2 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @d2lang/d2 可以商用吗？

@d2lang/d2 使用 MPL-2\.0 许可。弱 Copyleft：可以商用，也可以和闭源代码一起使用；但如果分发时修改了 MPL 授权的文件，这些文件的修改需以 MPL 开源。以上为概括，不构成法律意见，请以许可原文为准。

### @d2lang/d2 的下载量有多少？

根据 npm 官方下载统计，@d2lang/d2 在 2026/10/11 – 2026/11/09 这 30 天内被下载 73,799 次，日均约 2,460 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @d2lang/d2 还在维护吗？

最新版本 0\.1\.34 发布于 2026/09/08（2 个月前）；至今共发布 2 个版本，其中过去 12 个月发布了 2 个；首次发布于 2026/08/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。