如何使用 AI 画出 Excalidraw 流程图

背景

在日常工作中，我们经常需要画出流程图，但是手动画图不仅费时费力，而且容易出错。我之前尝试过使用 Mermaid，借助 ChatGPT/Claude 等画出流程图，效果不错。 最近，了解到 Excalidraw 这个工具，其流程图是通过 JSON 实现的，这不就和 Mermaid 一样么？

• 需求描述 -> Mermaid代码 -> Mermaid 在线渲染
• 需求描述 -> JSON 代码 -> Excalidraw 渲染

举例

Prompt

参考如下的规范，根据流程生成excalidraw的 json 文件：

# 流程需求
TA 心理学的咨询流程

# 规范

Excalidraw 的 JSON 文件用于保存画布场景，主要字段如下：

- `type`：字符串，表示 schema 类型（如 "excalidraw"）
- `version`：数字，schema 版本号
- `source`：字符串，Excalidraw 应用来源 URL
- `elements`：数组，画布上的所有元素对象
- `appState`：对象，应用的状态和配置
- `files`：对象，画布中图片元素的数据

# 示例

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com    ",
  "elements": [
    {
      "id": "pologsyG-tAraPgiN9xP9b",
      "type": "rectangle",
      "x": 928,
      "y": 319,
      "width": 134,
      "height": 90
      // ...其他元素属性
    }
    // ...其他元素
  ],
  "appState": {
    "gridSize": 20,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {
    "3cebd7720911620a3938ce77243696149da03861": {
      "mimeType": "image/png",
      "id": "3cebd7720911620a3938c.77243626149da03861",
      "dataURL": "data:image/png;base64,iVBORWOKGgoAAAANSUhEUgA=",
      "created": 1690295874454,
      "lastRetrieved": 1690295874454
    }
    // ...其他图片数据对象
  }
}

• 流程需求部分，可以替换为自己的需求
• schema 和举例说明，在一些能力不强的模型里，必须保留，在 Claude sonnet 4 里，可以不需要。

Qwen3 Coder

Kimi K2