企业官网建设流程全解析

PenEcho终极指南：开源AI无限画布如何把手写涂鸦变成专业图表

【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penecho

PenEcho 是一款开源的AI 无限画布工具：你在画布上随手写下的笔记、方程和涂鸦，可以由内置 Agent 或任何支持 MCP 的 AI 客户端（Codex、Claude Code 等）直接转化为专业架构图、时序图、工作流和可交互的小部件，就出现在你的笔迹旁边。本文是面向新手和普通用户的完整指南，带你在 10 分钟内跑通安装、配置 AI、生成图表的全流程。

什么是 PenEcho：AI 无限画布的核心能力 ✍️

PenEcho 把"聊天框里的 AI"带到了一个真正的画布上。它的三大核心能力：

整个系统的设计思路是"数据在你手里"：画布运行在本地（桌面应用或浏览器），AI 连接走你自己的 API 或 CLI，两条 MCP 连接通道都是可选的，细节可参考 docs/architecture.md 与这张架构总览图：

快速安装：3 种方式 5 分钟上手 🚀

方式一：桌面应用（推荐新手）

从官方 Releases 下载 macOS / Windows 安装包，双击打开即会自动弹出图形化配置页：选择 API、Kimi、Codex CLI 或 Claude CLI，点击"测试并启动"即可。无需安装 Node.js，API 密钥会以加密形式保存在本地。打包细节见 docs/packaging/desktop.md。

方式二：npm 一行命令

需要 Node.js 22.19+，然后：

npm install -g penecho penecho # 自动打开 http://localhost:3888

方式三：浏览器直接用

在 penecho.ai 登录即可使用云端模型与云画布，无需安装任何东西。

首次启动时，在设置 → AI 与连接中选择一种模型来源：你自己的 API Key、已登录的 Codex / Claude Code / Kimi CLI，或 PenEcho 托管模型。三种来源的取舍可以参考 docs/configuration.md。

手写涂鸦如何变成专业图表 📐

这是 PenEcho 最打动人的地方。整个流程只有三步：

1. 随意涂画：手写"K8s 集群有控制面、节点池、Redis 高可用"，画几个方框即可；
2. 开口提问：对画布说一句"把这段笔记整理成专业架构图"，停笔后 Auto AI 会自动响应；
3. 查看成品：Agent 自动完成布局与连线，生成可缩放、可导出的架构图，你还能在图上继续手写批注，下一轮对话它都会读到你。

下面三张图都是真实生成效果：

架构 diagram——自动分层布局，嵌套边界清晰：

时序 diagram——参与者、消息、条件分支与并行片段一次画清：

图表布局与渲染全部在本地浏览器执行，性能与隐私都很友好，实现原理可看 docs/architecture-local-renderer.md 与 docs/sequence-local-renderer.md。

接入你已有的 AI 助手：MCP 一键配置 🔌

不想切换工具？PenEcho 自带 MCP 服务，让你在 Codex、Claude Code、Kimi、Cursor 等客户端里继续对话，让画布成为"结果的落点"：

1. 在 PenEcho 中打开设置 → MCP 服务，为当前画布开启 MCP；
2. 使用Auto configure自动配置受支持的客户端，或复制生成的配置提示词到客户端中；
3. 直接说："把我们讨论过的架构画到我的 PenEcho 画布上。"

安全说明：Agent 只能看到你手动开启的画布；本地 MCP 数据始终留在你自己的电脑上，Cloud MCP 则是独立的登录连接，用于云画布。完整步骤见 docs/mcp-setup.md，MCP 服务源码位于 src/server/mcp/。

Echoes 社区：发现并复用他人的 AI 画布 🌍

PenEcho Cloud 内置Echoes广场：浏览别人分享的画布与小部件（带标签、作者与版本历史），一键"Echo" 导入继续创作，或收藏到自己的工作台。这就像"图表界的 GitHub"，新手可以直接站在优秀案例上学习。

每个 Craft 详情页都会展示完整版本演进（谁、什么时候、加了什么），保证来源可追溯：

关键文件与延伸阅读

• 项目总览：README.md
• 配置与连接指南：docs/configuration.md
• MCP 配置手册：docs/mcp-setup.md
• 云端连接：docs/mcp-cloud-transport.js 对应测试 与 src/server/cloud-mcp-bridge.js
• 内置 Agent 运行时：src/server/canvas-agent/
• 画布客户端：src/client/app/
• 更新日志：CHANGELOG.md

写在最后

PenEcho 把"聊天框 AI"升级成了一块能画、能问、能跑的开源 AI 无限画布：手写涂鸦只是起点，专业图表、可交互小部件和可分享的社区 Echo 才是终点。如果你受够了在聊天窗口里复制粘贴代码，不妨按上面的步骤花 5 分钟装一个，画第一笔——剩下的交给 AI。✨

【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penecho