Skip to content

用 Excalidraw 画图 ​

本页说明如何安装可选的 Excalidraw 插件、让 Pi 画图、手动编辑,以及把图导出成文件或图片。

Excalidraw 是官方插件,不随应用内置,也不会自动安装。启用之后,Pi 就能把架构图、流程图和概念草图画进对话里,编辑 按钮会打开真正的 Excalidraw 编辑器,而不是一张压扁的图片。编辑器在你的浏览器里本地运行,不需要 Excalidraw 账号。

1. 安装并启用插件 ​

  1. 在侧栏点击 插件。

  2. 在 官方插件 下找到 Excalidraw(官方)(状态显示 未安装 · 未启用),点击 下载。

    Excalidraw 尚未安装时的“插件”页面

  3. 等状态变成 已安装 · 未启用 并带上版本号。这需要能访问 npm;在一台全新的机器上大约花了 20 秒。

  4. 打开这一行右侧的开关,状态会变成 已安装 · 已启用。

启用需要所有会话都处于空闲。开关显示的是服务确认过的状态,而不是你刚才点的结果。点击这一行可以看到详情:包名(@chengzhiyi/pi-excalidraw)、已安装的版本、检查更新 和 卸载。Excalidraw 不需要其他配置。

2. 让 Pi 画图 ​

像平常一样在对话里描述你要什么,不需要指定工具名:

text
画一张图,说明浏览器、本地服务、Pi 和模型服务是怎么连起来的。

图会出现在回复里,是一张标着 create view 的卡片,上面有 查看参数(可以查看 Pi 发出的内容),图上还有一个 编辑 按钮。

直接生成在对话里的图,带一个“编辑”按钮

你可以继续在对话里提修改要求(“在 Pi 和提供方之间加一层缓存”“改成从左到右布局”)。新图不需要任何确认步骤。

如果你让 Pi 修改一张你手动改过的图,它的修改会作为一个候选方案出现,你可以用 应用修改 接受,或用 保留原图 拒绝,这样 Pi 的改动就不会悄悄覆盖你的编辑。如果在候选方案出现之后你又手动改了图,旧的候选方案会被丢弃,而不是盖在你的修改上。

3. 手动编辑 ​

点击 编辑。原生的 Excalidraw 画布会在右侧边栏里打开,带着它平常的工具栏:选择、矩形、菱形、椭圆、箭头、线条、手绘、文字、橡皮擦和更多形状。你可以移动形状、修改文字、换颜色,也可以使用原生的撤销和重做。

从对话里打开的原生 Excalidraw 编辑器

右侧边栏的开始页上还有一个 Excalidraw 入口,它会打开一块空白画布,不需要任何模型也能用。

4. 保存和导出 ​

画布左下角的菜单有:

Excalidraw 菜单

菜单项作用
打开载入一个 .excalidraw 文件。这会替换当前画布,所以请先保存。
保存到...通过浏览器保存一个可编辑的 .excalidraw 文件,文件会落在你的下载文件夹。
导出图片...导出 PNG 或 SVG,或复制到剪贴板。可以选 1×、2×、3× 缩放,选背景、深色模式,以及是否嵌入场景,嵌入后这张图片还能重新作为图稿打开。
Find on canvas、Command palette、帮助Excalidraw 自带的标准工具(部分菜单项保持英文原样)。
重置画布清空画布。

重要的图请保存成文件

想让图和代码一起纳入版本管理,请把下载下来的 .excalidraw 文件挪进你的项目。在本指南核对时使用的插件版本(0.1.3)里,编辑器没有提供直接保存到工作区文件夹的功能。浏览器端的备份和服务自己保存的图稿状态用于恢复,不是用来归档的。

限制与须知 ​

  • 不支持图片、链接、实时协作,也不支持不经过浏览器导出 PNG。
  • 图稿属于创建它的那个会话。停用或卸载插件时,会先保存并关闭打开的编辑器,保存失败就会停下来。已保存的图稿和插件数据会保留,重新安装后会恢复。
  • 更新插件时会等待打开的编辑器关闭。如果你选择立即更新,编辑器的原生撤销历史会被重置,pi-webapp 会先提醒你。
  • 如果停止服务时还有编辑器视图处于打开且未保存的状态,pi-webapp stop 可能会被拒绝。见排错。
  • 在 Excalidraw 成为插件之前由旧版 pi-webapp 创建的图,会在你安装插件时迁移。它们的原始文件保留在 pi-web/diagrams/(文件与目录)。

下一页:模型与提供方。

这些页面描述本仓库的源码。请在 Pi 设置 → 通用设置 中查看你正在运行的版本。