企业官网建设流程全解析

如何用PenEcho生成专业架构图、时序图与工作流图：自动布局到导出SVG的完整指南

【免费下载链接】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 共享画布工具，你可以用手写笔迹、文字和涂鸦描述系统结构，它就能自动生成专业架构图、时序图和工作流图——自动完成布局、换行与连线，并一键导出 SVG 或 PNG。本文将带你从零上手，到把图导出给团队直接使用。

一、PenEcho 是什么：一张会思考的画布

PenEcho 的核心是"在聊天框之外思考"：你在无边画布上手写、画框、写公式，内置 Agent（或任何支持 MCP 的 AI 客户端）会理解你的意图，把草图变成结构化、可编辑、可导出的专业图表。

整体连接方式非常清晰——浏览器或桌面应用连接你本地的 AI 模型，外部 Agent 则通过可选的 Local MCP / Cloud MCP 接入画布：

💡 两种 MCP 连接都是可选的，只用内置 Agent 也能生成全部三种专业图表。架构细节见 docs/architecture.md。

二、快速安装步骤：3 种方式任选其一

首次启动时选择 6 位访问码，然后在Settings → AI & connections中配置模型：可以使用自己的 API Key、已登录的 Codex / Claude Code / Kimi CLI，或直接选用 PenEcho 托管模型。配置说明详见 docs/configuration.md。

三、三种专业图表：各自擅长什么

PenEcho 的 Professional Diagrams 能力覆盖三类图，全部支持自动布局——你只提供语义（节点、连线、参与者、消息），坐标、正交路由和文字换行都由本地渲染器完成。

1️⃣ 架构图：展示系统结构与责任边界

架构图适合表达服务划分、信任边界和数据流。渲染器会自动按域着色、分组框嵌套、连线绕行，并生成图例与详情卡：

只需向 AI 描述："帮我画一个 Kubernetes 生产集群架构图，包含 Pod 调度、镜像拉取和 Ingress 流量路径"，即可得到类似上图的成品。字段规则（节点类型、分组、连线 kind 等）见 src/server/canvas-agent/visual-rules/architecture.md，本地渲染实现位于 src/architecture/。

2️⃣ 时序图：讲清一次请求的生命周期

时序图表达"谁在什么顺序给谁发什么消息"。参与者从左到右自动排布，消息按时间编号，返回消息用虚线、异步消息用空心箭头，还支持 alt / opt / loop / par 片段框：

上图中"消费者处理异常 → 转入死信队列重试"的 opt 片段就是典型用法。时序图的语义输入与本地渲染机制详解见 docs/sequence-local-renderer.md，规则定义在 src/server/canvas-agent/visual-rules/sequence.md。

3️⃣ 工作流图：描述"接下来会发生什么"

工作流图面向流程：开始/结束用胶囊、判断用菱形、并行分支用 fork/join、重试回路用虚线。判断节点必须标注条件，重试边必须写明触发原因——这些约束保证生成的图可读且不产生歧义：

上图中"并行准备 → 三条分支 → 全部完成"的汇合结构就是由 fork/join 语义自动排版的。实现与流程约束见 docs/workflow-local-renderer.md 和 src/server/canvas-agent/visual-rules/workflow.md。

一句话区分：系统结构用架构图，消息顺序用时序图，流程步骤用工作流图。

四、自动布局为什么省心：你只写"是什么"，不管"放哪里"

传统画图工具（以及大多数 Mermaid 方案）要求你自己控制布局质量；PenEcho 的分工是：

• AI 负责语义：节点、连线、参与者、消息、分支条件——不生成任何坐标、SVG 或 CSS；
• 本地渲染器负责呈现：在浏览器内完成布局、文字测量换行、正交连线路由和重排，窗口变宽变窄时自动重新排版（workflow 图甚至在本地 Blob Worker 中运行 ELK 布局引擎）。

所以即使窗口很窄，图也不会被压变形——文字保持原大小，主图内部横向滚动。这个设计让"AI 生成 → 你标注 → 再次生成"的迭代循环非常快：直接在图上画圈写批注，下一轮 AI 就能读到你的反馈并修改。

五、最快配置方法：让外部 AI Agent 也在画布上画图

如果你平时在 Codex、Claude Code、Kimi 或 Cursor 里工作，可以让它们直接把图画到你的 PenEcho 画布上，对话不用换地方：

1. 在 PenEcho 中打开Settings → MCP service，开启当前画布；
2. 点击Auto configure（支持的客户端自动写入），或复制生成的配置提示词到客户端；
3. 直接说："把我们讨论过的架构画到 PenEcho 画布上。"

下面这张时序图本身就是一次 MCP 画图请求的真实过程：客户端读取规则 → 服务端校验语义 JSON → 浏览器本地渲染：

完整接入步骤与兼容性说明见 docs/mcp-setup.md。

六、导出 SVG / PNG：给设计稿和文档直接能用

每张专业图表 Widget 右上角都有SVG / PNG按钮：

• SVG：矢量无损，适合放进幻灯片、技术文档再二次编辑；
• PNG：最高 2 倍分辨率（受 4096px 与 1200 万像素预算约束），适合聊天群分享；
• 导出内容只包含主图本身，不含标题栏和详情卡，版面干净。

配合整画布的无损 PNG 导出（自动裁剪到已确认内容），一张画布就能同时交付"手稿 + 成图"两种形态。

七、新手避坑清单 ⚠️

• 别把函数、文件、配置项都塞进架构图：渲染器建议主视图不超过 20 个实体节点，细节放进节点详情；
• 时序图不要臆造耗时：垂直距离只代表阅读顺序，不代表真实耗时；
• 判断必须有两条以上带条件的出路：工作流图会拒绝"无标签的模糊分支"；
• 复杂系统拆多张图：与其挤爆一张图，不如按"部署视角 + 请求视角"分两张，可读性更高。

写在最后

从手写到专业图表，PenEcho 把"画图"这件事拆成了最舒服的三步：描述语义 → 自动布局 → 一键导出。架构图、时序图、工作流图三类图共享同一套画布和迭代方式，配合 MCP 还能让你现有的 AI Agent 直接参与创作。装上 PenEcho，下一张要画的系统图，直接交给它试试。

• 官方文档：docs/architecture.md、docs/configuration.md
• 图表规则源码：src/server/canvas-agent/visual-rules/
• 本地渲染实现：src/architecture/、src/sequence/、src/workflow/

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