@ eraserlabs/ 图表

导言

@eraserlabs/diagrams 是输油管的电池输入点 拥有所有不干净的东西 它驱动铬(通过 playwright-core),分级并注入字体,取取图标,并运送存货 Eraser 组件库,接线 @eraserlabs/resolve 财务报告和审定财务报表 @eraserlabs/render 变成一个将 JSON 图表转换成 PNG 、 测量 JSON 或 独立 HTML 的单调.

纯子活在下面:合同在 @eraserlabs/protocol中,验证和解析 @eraserlabs/resolve,页内测量和布局 @eraserlabs/render 财务报告和审定财务报表 @eraserlabs/layout。当您需要没有浏览器的管道时,直接使用这些;当您需要图片时,使用此软件包.

使用量

import { createRenderer } from '@eraserlabs/diagrams';

const renderer = await createRenderer({ chromiumPath: '/path/to/chromium' });

const result = await renderer.render({
  entities: [{ tag: 'Textbox', id: 't1', x: 40, y: 40, text: 'Hello' }],
  connections: [],
  outputs: { png: true, json: true },
});

if (result.ok) {
  await writeFile('diagram.png', result.png);
}

await renderer.close();

Chromium为呼叫者拥有:通过本地 chromiumPath,或一个 browser 呼叫器管理和远程浏览器的提供者(chromium.connectOverCDP(...)) (中文(简体) ). 提供商拥有其浏览器的旗帜——如果你使用 url 从本地主机或私人网络服务字体面孔, 启动 --disable-features=LocalNetworkAccessChecks,BlockInsecurePrivateNetworkRequests,因为没有源代码的渲染页面在其他方面有其字体被Chrimium的"本地网络访问检查"(该检查)无声地阻断 chromiumPath 路径为您应用这些旗帜。 其它一切默认为库存: Eraser 组件库、销售字体(Shantell Sans、Inter、JetBrains Mono——全部为SIL OFL 1.1,下) fonts/),和 Eraser 托管的图标目录(需要网络访问; 供应) iconLoader 用于离线或自定义图标.

设定 theme: 'dark' 打开 createRenderer 用于默认演示,或用于个人 renderer.render({ ...document, theme: 'dark' }) 请求。 选取控制了 stream-template 颜料,文本,代码,水彩和场景背景一起. JSON 输出保留了作者的颜色 。 HTML是自成一体的,其主题根和样式与PNG相同.

PNG 输出在光线模式下具有白背景 #171717 在黑暗模式下。 过 transparent: true 改为 createRenderer 以保持背景透明度; 作者填充仍可看见, HTML 输出不受影响.

renderer.validate 运行与 render 不接触浏览器。 渲染向导活在还原根: GETTING_STARTED.md 作者和 CUSTOMIZATION.md 用于带入您自己的组件库、调色板和字体.