工作流可视化

LlamaIndex工作流可以在浏览器中可视化为交互式图表。这有助于您一目了然地理解事件流和处理程序连接。

何时使用可视化

调试事件与处理器之间的复杂路由
向团队成员和用户解释工作流程行为
构建交互式演示和文档页面

如何使用 withDrawing

withDrawing 中间件通过绘图能力装饰工作流，公开一个 draw 方法，该方法可在 HTML 容器中渲染工作流。

要安装可视化包，请运行：

npm install @llamaindex/workflow-viz

使用 withDrawing 包装您的工作流，并像往常一样编写处理器。确保在您的事件中添加 debugLabel，以便在图中将它们用作节点名称：

import { createWorkflow, workflowEvent } from "@llamaindex/workflow-core";
import { withDrawing } from "@llamaindex/workflow-viz";

// Define events (debug labels are used for node names in the graph)
const startEvent = workflowEvent<string>({ debugLabel: "start" });
const doneEvent = workflowEvent<string>({ debugLabel: "done" });

// Decorate your workflow to enable drawing
const workflow = withDrawing(createWorkflow());

workflow.handle([startEvent], (_ctx, start) => {
  return doneEvent.with(`Hello ${start.data}`);
});

查看使用 withDrawing 的分支工作流程完整示例，请访问 visualization 演示。

在浏览器中使用draw进行渲染

使用 withDrawing 装饰的工作流会获得一个 .draw(container, options) 方法，用于将图形渲染到页面。渲染底层使用 Sigma 并支持其设置。

import { workflow } from "./workflow";

const container = document.getElementById("app") as HTMLElement;

// Optional settings:
// - layout: "force" | "none" (defaults to "force")
// - Any Sigma renderer setting can be passed as well, e.g. `defaultEdgeColor`
workflow.draw(container, {
  layout: "force",
  defaultEdgeColor: "#999",
});

备注：

layout: "force" 自动应用力导向布局（默认）。将 layout: "none" 设置为禁用此功能。
您可以在选项对象中传递任何 Sigma 渲染器设置来自定义外观和交互。
draw 方法正在渲染由您注册的处理程序所定义的工作流。如果您在 draw 之后调用 handle，图表将不会自动更新。