January 1, 2025vibcoding Team6 min read

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

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

#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. 导出多种格式

PNG 图片
SVG 矢量图
PDF 文档
Draw.io XML（可继续编辑）

使用代码示例

在 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();
}

最佳实践

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

立即体验

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

支持功能：

✅ 自然语言生成图表
✅ 多种图表类型
✅ 实时预览编辑
✅ 导出多种格式
✅ 历史版本管理

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

vibcoding Team

vibcoding Tech Team

Found this helpful? Share it!