@ai- matrx/ 图表
AI Matrx 图表引擎: 保存 3.2.0(麻省理工学院) 纯函数。一个光谱进入;一个经过验证的、铺设的、自成一体的图表在节点出现 或者在浏览器中,没有节点内置,没有文件系统和网络.
npm install @ai-matrx/diagrams
import { validate, layout, render } from "@ai-matrx/diagrams";
const spec = { meta: { title: "Checkout", subtitle: "Order to paid" }, /* ... */ };
const checked = validate("workflow", spec, { quality: "showcase" });
// { ok, diagnostics: [{ code, severity, message, subject, evidence, supportedFixes }], composition, checks }
const geometry = layout("workflow", spec); // { receipt } (Archify's --layout-json contract)
const picture = render("workflow", spec, { theme: "dark" }); // { svg, html, receipt }
十个类型: architecture, (中文(简体) ), workflow, (中文(简体) ), sequence, (中文(简体) ), dataflow, (中文(简体) ), lifecycle, (中文(简体) ), erd, (中文(简体) ), class, (中文(简体) ), tree, (中文(简体) ),
timeline, (中文(简体) ), waterfall。每个函数 从不丢入不良输入: 计程错误,布局拒绝
而未知类型又以 Diagnostics,每个人说什么是错的,在哪里,与数字,和
支持哪些修正.
render().html 是 Archify 的完整独立浏览器页面(约800 KB,包括字体),并且是
字节- 与“ 保存 CLI” 所写内容相同( 软件包的等同测试为全部 25 捆绑)
(见e/cn.4/sub.2/2003/l.31). render().svg 仅是图;它从该图的 CSS 变量中取出颜色
周围页面.
嵌入应用程序
render(type, spec, { theme, mode: "embed", legend? }) 返回您自己内部托管的图片
UI:没有标题,主题切换,导出菜单,工具栏,护照弹出,节点索引或卡片. svg 实值
自我主题(主题符号、类和字体内含,所有范围都扩大到 svg.mxd)并总是显示WALE
图片:从不裁剪,从不卷起. bindEmbed 与两个轴上的容器相匹配(a)
内容高的主机以被封顶的高度获得全宽并添加了缩放(Ctrl/Cmd+wheel或citch,),
拖到锅上, zoomIn编号 :zoomOut编号 :resetZoom 手柄上,或 controls: true 用于内置按钮).
data-mxd-min-width 作为衡量尺度的可识别底座. html 是一个iframe 的小文档
srcdoc 并绘制自己的缩放按钮。 点击或激活节点发射 diagram:node
(单位:千美元)detail: {id, label, type}; svg 上的自定义Event, 外加设定时给父方的邮件),所以
你的UI决定要展示什么。 当你挂载 svg 自己弦,打电话 bindEmbed(svgElement) 一次
这是在文件中.
节点状态在图片上,从不移动它: handle.setNodeState({status, current, tone}) (或
nodeState 绑定选项)绘制出每个节点的状态(idle|pending|running|done|warning|failed|skipped数字 :
平面图 平面图 平面图; running 旋转,除非读者喜欢减少运动,"你是一个
这里的节点(一个破碎的环和 aria-current="step",与 select页:1
节点( e)cyan|green|violet|amber|rose|orange|slate) (中文(简体) ). 每个颜色都是图片中自己的主题符号之一.
handle.legend() 仅列出绘制的内容,并实际使用颜色(DIAGRAM_NODE_STATUSES, (中文(简体) ),
DIAGRAM_NODE_TONES 名称集).
选择目标宽度
DESKTOP_READER_DIAGRAM_WIDTH 是引擎的桌面阅读器宽度,目前为930 CSS像素.
A 类 targetWidth 其下可以进行狭长的适应,必要时可以进行更广泛的回落.
在它上方,引擎绘制成书面的光谱。 一个主机重试一个宽度的被修改的图表
容器可以使用 DESKTOP_READER_DIAGRAM_WIDTH - 1 以保留窄放适应.
import { DESKTOP_READER_DIAGRAM_WIDTH, render } from "@ai-matrx/diagrams";
const picture = render("workflow", spec, { targetWidth: DESKTOP_READER_DIAGRAM_WIDTH - 1 });
度量成像
@ai-matrx/diagrams/measure 是一个纯 DOM 函数, 将已渲染的图变成数字
(单位:千美元)inspection.v1:文本大小,被剪接和被截断的文本,重叠,出界元素,交叉,
标签在行上,文本对比.
import { measure } from "@ai-matrx/diagrams/measure";
const inspection = measure(document.querySelector("svg")!);
对于无头抓取,注入与文本相同的功能,这样一个浏览器和一个无头页面返回 同样的JSON:
import { MEASURE_SCRIPT, SETTLE_EXPRESSION, measureExpression } from "@ai-matrx/diagrams/measure";
await page.setContent(render("workflow", spec).html!);
await page.evaluate(SETTLE_EXPRESSION); // fonts + the viewer's layout
const inspection = await page.evaluate(measureExpression("svg"));
这里有什么
无反应( 聊天和帆布渲染器位于 @ai-matrx/rich-content),不启动浏览器(该
刮刮器进行无头抓取,没有文件输出,没有git或寄存器-证据验证,没有
网络品牌抓取. 内建品牌标识解析; 拒绝使用裸露的 URL 或 文摘标注品牌
诊断。 见 NOTICE 从Archify那里得来的是什么 改变了什么 哪些第三方标记
由于许可证原因被撤销.
有一个很薄的CLI(ai-matrx-diagrams render|validate|layout它只用于对等测试
与原始档案CLI相对.