这周我们为 AI 零代码应用生成平台引入一个全新的技术架构 —— AI 智能体工作流，通过 LangGraph4j框架重构代码生成逻辑，并补充搜集图片素材、代码质量检查等过程，让生成的网站更真实可靠。

一、需求分析

        目前生成的网站内的图片都是随机占位图片，实际上可以根据网站类型补充素材图片，让生成的网站更真实。如果想快速实现这个需求，其实只需要提供给 AI 图片搜索工具就好，交给框架和 AI 来决定什么时候调用工具，自动执行。但是，对于可标准化的工作流程（搜集图片是在生成网站前的固定步骤），不要交给 AI 来自主判断，这样可以减少随机性和误差，而且还可以自主对流程进行新增、编排和优化。因此，我们决定基于工作流来实现。

二、工作流方案选型

        对比低代码平台（Dify、Coze、阿里云低代码）与自研流程引擎，最终选择LangGraph4j，理由如下：

        LangGraph4j 作为一个专门为 Java 生态设计的工作流框架，和 LangChain4j 兼容性很好，能
够无缝融入我们现有的技术栈，可以直接复用项目中已有的 Service、配置和工具类，不需要从 0 进行开发。同时，它还提供了丰富的高级特性，比如条件边、循环执行、并发处理等，让我们能够构建出智能化的工作流程。并且编程框架可维护性可扩展性高，随着业务的发展，我们的工作流可能会变得越来越复杂，编程框架能够更好地支持这种迭代。

（补充）熟悉langgraph4j

https://langgraph4j.github.io/langgraph4j/features/

三、工作流开发步骤

工作流开发的核心是：节点 + 边 + 状态 + 其他特性
具体步骤：
1. 定义工作流结构（所有工作节点先只是临时输出、也无需记录状态）
2. 定义状态
3. 定义工作节点，先通过假数据模拟状态流转
4. 开发真实的工作节点
5. 工作流中使用节点，提供完整的工作流服务

根据我们的需求梳理出工作流程：
1. 输入原始 Prompt
2. 获取图片素材 Agent：通过工具调用从不同的渠道获取图片
3. 内容图片：pexels 网页搜索
4. 插画图片：undraw 抓取
5. 画架构图：文本绘图 + 上传到 COS
6. Logo 等设计图片：AI 生成或者 MCP
7. 提示词增强：关联图片内容到原始提示词
8. 智能路由 Agent：选用哪种模式生成网站？
9. 原生 HTML
10. 原生多文件
11. Vue 工程
12. 网站生成 Agent：利用搜集到的图片，根据上一步确认的生成模式来生成网站
13. 项目构建器：文件保存 / 打包构建

依赖引入：

<!-- LangGraph4j -->
<dependency>
    <groupId>org.bsc.langgraph4j</groupId>
    <artifactId>langgraph4j-core</artifactId>
    <version>1.6.0-rc2</version>
</dependency>

有了详细的工作流程描述后，可以利用 AI，根据 LangGraph4j 的官方文档和示例，快速生成基础的工作流结构代码，比如下列提示词：

帮我生成 LangGraph4j 工作流的代码
工作流的流程描述
// ... 补充具体的流程
1. 输入原始 Prompt
2. 获取图片素材 Agent：通过工具调用从不同的渠道获取图片
3. 内容图片：pexels 网页搜索
4. 插画图片：undraw 抓取
5. 画架构图：文本绘图 + 上传到 COS
6. Logo 等设计图片：AI 生成或者 MCP
7. 提示词增强：关联图片内容到原始提示词
8. 智能路由 Agent：选用哪种模式生成网站？
9. 原生 HTML
10. 原生多文件
11. Vue 工程
12. 网站生成 Agent：利用搜集到的图片，根据上一步确认的生成模式来生成网站
13. 项目构建器：文件保存 / 打包构建
要求
先生成基础的工作流结构代码，每个工作节点中只输出一句信息就够了，不用真正实现具体的业务逻辑。
参考信息
官方文档: @https://langgraph4j.github.io/langgraph4j/core/low_level/
示例工作流实现: @https://github.com/langgraph4j/Langgraph4j-examples/blob/main/langchain4j/adaptive-rag/src/main/java/dev/langchain4j/adaptiverag/AdaptiveRag.java

得到简化版的工作流结构代码如下，存放到 langgraph4j 包下：

@Slf4j
public class SimpleWorkflowApp {
    // 创建通用节点：仅打印日志
    static AsyncNodeAction<MessageState, String> node(String message) {
        return node_async(state -> {
            log.info("执行节点：{}", message);
            return Map.of();
        });
    }

    public static void main(String[] args) throws GraphStateException {
        // 1. 创建状态图
        StateGraph<MessageState> workflow = new StateGraph<>(MessageState::new);

        // 2. 添加节点
        workflow.addNode("image_collector", node("获取图片素材"))
                .addNode("prompt_enhancer", node("提示词增强"))
                .addNode("router", node("智能路由选择"))
                .addNode("code_generator", node("网站代码生成"))
                .addNode("project_builder", node("项目构建"));

        // 3. 连接边（顺序流程）
        workflow.addEdge(START, "image_collector")
                .addEdge("image_collector", "prompt_enhancer")
                .addEdge("prompt_enhancer", "router")
                .addEdge("router", "code_generator")
                .addEdge("code_generator", "project_builder")
                .addEdge("project_builder", END);

        // 4. 编译工作流
        CompiledGraph<MessageState> compiled = workflow.compile();

        // 5. 可视化输出（Mermaid）
        GraphRepresentation graph = workflow.getGraphRepresentation(GraphRepresentation.Type.MERMAID);
        log.info("工作流图：\n{}", graph.content());

        // 6. 执行流程
        log.info("开始执行工作流");
        int stepCounter = 1;
        for (NodeOutput<MessageState> step : compiled.stream(Map.of())) {
            log.info("--- 第{}步完成 ---", stepCounter++);
        }
        log.info("工作流执行完成！");
    }
}

上述代码的几个关键：
1. 使用了 LangGraph4j 内置的 MessageState 消息列表作为状态
2. 直接提供了一个创建节点的方法，每个工作节点都只是打印个日志，便于快速验证工作流结构
3. 通过可视化能力打印出工作流图的结构
执行工作流程序，可以看到输出的工作流图结构（Mermaid 语法），以及每一步工作流的节点执行和状态信息：

四、收获

通过本次基于 LangGraph4j 的工作流开发实践，我完成了从需求分析、方案选型与核心模块，收获颇丰：
1.深化了对 AI 工作流架构的理解：跳出了传统 Service 硬编码的思维定式，掌握了状态驱动的工作流设计范式，理解了节点、边、状态、分支控制等核心概念如何支撑复杂 AI 流程的编排与扩展，为后续构建可复用、可监控的业务流程打下了坚实基础。
2.掌握了 LangGraph4j 的工程化落地方法：从依赖引入、状态模型定义，到节点开发、流程编译与可视化，完成了 SimpleWorkflowApp 的完整实现。通过极简原型验证了技术栈的可行性，学会了以 “先骨架后血肉” 的节奏推进开发，降低了技术选型与架构设计的风险。