可视化

📚 学习目标

学完这篇文章后，你将能够：

• 使用 mermaid.js 自动生成图的结构图
• 理解不同的可视化方式及其适用场景
• 利用 drawMermaid 方法调试复杂的图结构

前置知识

在开始学习之前，建议先阅读：

• 04-parallel-processing

你需要了解：

• 基本的 Flowchart 概念

1️⃣ 为什么需要可视化？

LangGraph 的图结构可能非常复杂，尤其是包含条件分支、子图和并行处理时。代码逻辑可能很难直观反映出实际的执行流。

可视化可以帮助我们：

1. 验证设计：确认图的连接是否符合预期。
2. 调试逻辑：检查条件分支是否指向了正确的节点。
3. 文档沟通：向团队展示 Agent 的架构。

2️⃣ 生成 Mermaid 图表

LangGraph 的 Graph 和 CompiledGraph (Runnable) 都提供了 getGraph() 方法，该方法返回一个 Graph 对象，其中包含 drawMermaid() 方法。

代码示例

import { StateGraph, START, END } from '@langchain/langgraph';

// ... 定义图 ...

const app = workflow.compile();

// 获取 Mermaid 源码
const mermaidChart = app.getGraph().drawMermaid();

console.log(mermaidChart);

输出预览

%% drawMermaid() 的输出示例（内容会随版本变化）
graph TD;
	__start__([<p>__start__</p>]):::first
	node_a(node_a)
	node_b(node_b)
	__end__([<p>__end__</p>]):::last
	__start__ --> node_a;
	node_a --> node_b;
	node_b --> __end__;

你将获得类似上面的 Mermaid 源码，可以将其粘贴到 Mermaid Live Editor 或直接在 Markdown 中渲染。

3️⃣ 自定义样式

drawMermaid 接受配置对象来自定义输出样式。

const chart = app.getGraph().drawMermaid({
  curveStyle: "basis", // 曲线样式: basis, linear, step
  firstNodeColor: "#ff0000",
  lastNodeColor: "#00ff00"
});

4️⃣ LangGraph Studio

除了静态的代码生成可视化，LangGraph 还拥有一个配套的 LangGraph Studio（目前主要作为云服务提供，或本地 Docker 运行），它提供了：

• 交互式图表：可点击节点查看状态。
• Replay：回放 Agent 的每一步操作。
• 状态编辑：手动修改状态进行测试 ("Time Travel")。

[!NOTE] 目前 LangGraph.js 对 Studio 的支持正在逐步完善中，建议关注官方更新。

💡 练习题

1. 操作题：为你之前写的 ReAct Agent 生成mermaid图，并观察 ShouldContinue 条件边的呈现方式。
2. 思考题：在拥有几十个节点的超大图中，完整的可视化可能过于杂乱。你认为应该如何通过子图来优化可视化效果？

📚 参考资源

官方文档

• LangGraph JS

✅ 总结

本章要点：

• app.getGraph().drawMermaid() 是最常用的可视化手段。
• 可视化是调试复杂 Agent 逻辑的有力工具。
• 结合 Mermaid Live Editor 可以快速分享架构设计。

下一步：如何管理这些图的运行时参数？继续学习：配置管理与 Configurable。