D2.js 级
D2.js是一款围绕D2的JavaScript包装机,即现代图脚本语言. 它可以通过WebAssembly在浏览器和节点环境中直接运行D2.
关于使用的例子,见 https://play.d2lang.com (英语),由d2.js提供动力,并且是 开源。 。 。 .
特征
- 🌐 通用 - 在浏览器和节点环境中工作
- 🚀 现代 - 采用无害环境管理模块,采用CJS倒置
- 🔄 异态 - 到处都是相同的API
- ⚡ 快点 - 由WebAssembly提供近乎本土性能的动力
- 📦 轻巧 - 围绕核心D2引擎的最小包装器
安装
# 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 构建的版本.
譬如说,
yarn add @d2lang/d2@nightly
使用量
D2.js使用网络工人调用一个WASM文件.
基本用途
// 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();
配置渲染选项(参见 编译选项 用于所有可用选项:
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);
进口
为了支持 进口,可以将其内容的 D2 文件路径的映射传递给编译器.
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
全体 渲染选项 属性之外:
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: 客户端处于暗模式时要使用的主题IDcenter: 将 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: 可选 编译选项 传递到编译器
CompileResponse
diagram数字 :Diagram: 已编译的 D2 图renderOptions数字 :RenderOptions: 组合选项与图中的配置合并fsgraph
发展
D2.js 开发需要根中的 Go 版本 go.mod, Bun 版本
内 package.json,和节点.js 24与npm. 集成测试使用节点到
检查通用JS和无害环境管理应用程序中已安装npm软件包.
可选:对于最佳WASM文件大小,也安装二进制:
# macOS
brew install binaryen
# Ubuntu/Debian
sudo apt-get install binaryen
从源头建楼
git clone https://github.com/d2lang/d2.git
cd d2/d2js/js
./make.sh all
如果您更改了主 D2 源代码, 您应该重生 WASM 文件 :
./make.sh build
运行 Dev 服务器
您可以通过运行 dev 服务器浏览示例 :
./make.sh dev
访问 http://localhost:3000 以查看示例页.
测试
./make.sh test
出版
TODO稳定发布.
夜间建筑由CI通过运行实现自动化:
PUBLISH=1 ./make.sh build
捐款
欢迎捐款!
许可证
该项目根据"Mozilla公共许可证2.0版"获得许可.