把Mermaid图表变成Excalidraw白板快速上手lavish-axi可编辑图表演示指南【免费下载链接】lavish-axiHTML is the new markdown. Lavish is the new editor for your HTML artifacts.项目地址: https://gitcode.com/gh_mirrors/la/lavish-axilavish-axi是本地优先的 HTML 协作编辑器它最大的亮点之一把Mermaid 图表直接变成Excalidraw 可编辑白板。你只需在 AI 生成的 HTML 里放上 Mermaid 源码lavish-axi 就会在浏览器里把它渲染成可以拖拽、涂鸦、改字的白板还能把编辑结果一键发回给 AI 智能体修改源码——不用在文字里描述第二行的箭头指错了直接画出来即可。为什么需要白板化的Mermaid图表普通 Mermaid 图渲染出来就是一张静态 SVG好看但改不了。想调整一个节点位置只能回头改代码再等渲染。而 lavish-axi 的白板模式让审阅变成手指说话点一下图表静态流程图就变成了 Excalidraw 手绘风格白板直接拖节点、改文字、画箭头所有改动本地自动保存Queue feedback一键把编辑摘要 场景文件 PNG 预览打包发给 AIAI 更新的是Mermaid 源码始终是权威来源下一轮刷新又是新的可编辑图三步快速上手Excalidraw可编辑白板第 1 步让智能体写 Mermaid 图。在会话里明确说我要一个可编辑白板智能体会按 diagram playbook 的指引把图写成.mermaid容器里的 Mermaid 源码。注意白板是可选开启的默认插图仍是手绘 SVG只有你点名要白板时才用 Mermaid见 playbooks.js。第 2 步打开 Lavish 审阅页。运行lavish-axi 你的html文件浏览器中.mermaid容器里渲染出的每一张Mermaid 图都会变成嵌入式 Excalidraw 白板。首次点击画布即解锁编辑用右上角Fullscreen按钮可以全屏编辑整块视口。第 3 步编辑并反馈。拖拽、标注、重命名节点都直接上手白板场景自动保存在本地。改完后点Queue feedback再点Send to Agent反馈就带着场景路径和 PNG 预览进入对话面板了。细节很关键文字不会被裁切一个容易踩的坑是字体测量白板转换发生在 Excalidraw 手绘字体加载之前用后备字体量出来的文字宽度偏窄加载真字体后首尾字母会被裁掉。lavish-axi 的修复是等字体就绪后再重排 Mermaid 骨架并让旧保存场景首次打开时一次性修复文本尺寸。完整证据见 excalidraw-label-clipping/README.md核心逻辑在 whiteboard-core.js 的多行标签换行与容器自适应处理中。编辑如何回传Mermaid源码始终是权威这里的设计哲学很清晰见 VISION.md白板只是浏览器里的视图不会反向把涂鸦翻译成 Mermaid。白板的编辑以有界摘要 本地.excalidraw场景路径 PNG 预览路径的形式发给智能体智能体据此更新 HTML 里的 Mermaid 源码文件永远是自己维护若 AI 重新生成了源码未修改过的白板会静默重新转换成新图你改过的白板重开时可二选一——丢弃编辑用新版或继续用已保存的场景服务端从 HTML 文件恢复各图源码的逻辑在 mermaid-source.js节点点击锚定的实现让点某个节点提意见能精确定位在 mermaid-node.js。哪些图表类型支持编辑图表类型白板行为流程图 / 时序图 / 类图 / ER图 / 状态图转成可编辑图形可拖拽其他类型以图片形式呈现仍可自由涂鸦标注保存的文件不受任何影响这是新手最容易安心的点Lavish 只改浏览器视图。导出或直接用浏览器打开 HTML 文件看到的仍是普通静态 Mermaid 渲染与未安装任何工具时一模一样另外lavish-axi design会给出主题感知的 Mermaid 初始化片段见 design-reference.js 与 design-reference.js让图表自动跟随页面的深色/浅色主题切换主题时实时重渲染避免深色页面上挂着浅色图的违和感。适合谁用上手建议产品/技术方案评审把架构流程图给团队看之前先在白板上对齐结构教学讲解状态图、时序图边讲边拖比口述看第三个节点直观得多AI 协作闭环你画出来的修改意见就是 AI 下一次迭代的精确指令整套审阅 → 画改 → 回传循环全部发生在本地核心反馈链路无云端依赖。想动手试试安装 skills/lavish 技能后直接对智能体说一句把这个计划画成可编辑白板就够了。【免费下载链接】lavish-axiHTML is the new markdown. Lavish is the new editor for your HTML artifacts.项目地址: https://gitcode.com/gh_mirrors/la/lavish-axi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考