返回博客
vibcoding Team6 分钟阅读

AI Draw.io 智能图表生成：用自然语言画流程图

介绍如何使用 AI 自然语言描述自动生成 Draw.io 格式的流程图、架构图、ER 图等专业图表。

#AI#Draw.io#流程图#架构图#自动化
AI Draw.io 智能图表生成：用自然语言画流程图

AI Draw.io 智能图表生成：用自然语言画流程图

告别手动画图

作为开发者，我们经常需要画各种图：

  • 系统架构图
  • 数据流程图
  • ER 数据库关系图
  • API 调用时序图
  • 部署拓扑图

传统方式：打开 Draw.io → 拖拽形状 → 连接线条 → 调整布局 → 修改样式...

30 分钟过去了，图还没画完。

现在，用 AI，只需要描述你想要的图，几秒钟就能生成。

实际效果展示

示例 1：用户登录流程图

输入提示词:

画一个用户登录流程图：
1. 用户输入用户名密码
2. 前端验证格式
3. 发送到后端验证
4. 后端查询数据库
5. 验证成功返回 token
6. 验证失败返回错误信息

AI 自动生成的 Draw.io XML:

生成的流程图包含：

  • 开始/结束节点
  • 处理步骤矩形
  • 判断菱形
  • 正确的连接线和箭头
  • 自动布局

示例 2：微服务架构图

输入提示词:

画一个电商微服务架构图，包含：
- API 网关
- 用户服务
- 商品服务
- 订单服务
- 支付服务
- 消息队列
- Redis 缓存
- PostgreSQL 数据库

生成结果自动包含：

示例 3：ER 数据库关系图

输入提示词:

创建一个博客系统的 ER 图：
- 用户表：id, username, email, password, created_at
- 文章表：id, title, content, user_id, created_at
- 评论表：id, content, user_id, post_id, created_at
- 标签表：id, name
- 文章标签关联表：post_id, tag_id

技术实现

核心架构

用户输入
    ↓
AI 理解意图
    ↓
生成 Draw.io XML
    ↓
渲染预览
    ↓
编辑/导出

AI Prompt 设计

typescript
const systemPrompt = `
你是一个专业的图表生成助手。根据用户的描述，生成 Draw.io 格式的 XML。

规则：
1. 使用 mxGraphModel 格式
2. 自动计算节点位置，避免重叠
3. 使用适当的形状：
   - 流程步骤：圆角矩形
   - 判断：菱形
   - 开始/结束：椭圆
   - 数据库：圆柱体
4. 连接线使用 edgeStyle=orthogonalEdgeStyle
5. 添加适当的样式和颜色

输出格式：
\`\`\`xml
<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- 节点和边 -->
  </root>
</mxGraphModel>
\`\`\`
`;

Draw.io 集成

tsx
import { DrawIoEmbed } from 'react-drawio';

function DiagramEditor({ xml }: { xml: string }) {
  return (
    <DrawIoEmbed
      xml={xml}
      configuration={{
        ui: 'min',
        noExitBtn: true,
        saveAndExit: false,
      }}
      onExport={(data) => {
        // 处理导出
        console.log('Exported:', data);
      }}
    />
  );
}

支持的图表类型

类型 描述 示例提示词
流程图 业务/技术流程 "画一个订单处理流程"
架构图 系统架构 "画一个 AWS 云架构"
ER 图 数据库关系 "创建用户订单的 ER 图"
时序图 API 调用 "画登录的时序图"
组织架构 团队结构 "画公司组织架构"
思维导图 概念整理 "整理机器学习知识"

高级功能

1. 迭代修改

用户：在架构图中添加一个消息队列连接用户服务和订单服务

AI：好的，我添加了一个 RabbitMQ 节点，并建立了连接...

2. 样式自定义

用户：把所有服务节点改成蓝色，数据库改成绿色

AI：已更新配色方案...

3. 导出多种格式

使用代码示例

在 React 项目中集成

tsx
'use client';

import { useState } from 'react';
import { useChat } from 'ai/react';

export function AIDrawio() {
  const [xml, setXml] = useState('');
  
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/drawio/chat',
    onToolCall: async ({ toolCall }) => {
      if (toolCall.toolName === 'updateDiagram') {
        setXml(toolCall.args.xml);
      }
    },
  });

  return (
    <div className="flex h-screen">
      {/* 对话面板 */}
      <div className="w-1/3 border-r p-4">
        <div className="flex-1 overflow-y-auto">
          {messages.map((m) => (
            <div key={m.id} className="mb-4">
              <strong>{m.role}:</strong>
              <p>{m.content}</p>
            </div>
          ))}
        </div>
        <form onSubmit={handleSubmit}>
          <input
            value={input}
            onChange={handleInputChange}
            placeholder="描述你想要的图表..."
            className="w-full p-2 border rounded"
          />
        </form>
      </div>
      
      {/* Draw.io 编辑器 */}
      <div className="w-2/3">
        {xml ? (
          <DrawIoEmbed xml={xml} />
        ) : (
          <div className="flex h-full items-center justify-center text-gray-400">
            输入描述开始生成图表
          </div>
        )}
      </div>
    </div>
  );
}

API 路由

typescript
// app/api/drawio/chat/route.ts
import { streamText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    system: DIAGRAM_SYSTEM_PROMPT,
    messages,
    tools: {
      updateDiagram: tool({
        description: '更新或创建 Draw.io 图表',
        parameters: z.object({
          xml: z.string().describe('Draw.io XML 格式的图表'),
          description: z.string().describe('图表的简要描述'),
        }),
        execute: async ({ xml, description }) => {
          return { success: true, description };
        },
      }),
    },
  });

  return result.toDataStreamResponse();
}

最佳实践

  1. 描述清晰: 列出所有节点和它们之间的关系
  2. 迭代优化: 先生成基础版本，再逐步调整
  3. 导出备份: 生成满意后导出 XML 保存
  4. 手动微调: AI 生成后可在 Draw.io 中精细调整

立即体验

访问 CatLove Cloud 体验 AI Draw.io 智能图表生成功能。

支持功能：

告别繁琐的手动画图，让 AI 成为你的绘图助手！

v
vibcoding Team
vibcoding 技术团队
觉得有帮助？分享给朋友！