首页/新闻资讯/正文详情

把Mermaid图表变成Excalidraw白板:快速上手lavish-axi可编辑图表演示指南

发布时间:2026/9/25 12:04:23 来源:云帆数科 栏目:资讯中心
把Mermaid图表变成Excalidraw白板:快速上手lavish-axi可编辑图表演示指南
把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),仅供参考

相关推荐

STM32标准外设库深度解析:从RCC时钟到GPIO的完整调用链路
STM32标准外设库深度解析:从RCC时钟到GPIO的完整调用链路

1. 从一次点灯失败说起:标准外设库到底封装了什么很多人第一次接触 STM32 的时候,都是从点灯开始的。我也一样。当年拿着一块最小系统板,照着教程把标准外设库的工程模板拷过来,改了几行代码,编译下载,灯亮… · 2026/9/25 12:03:59

电控工程师简历突围:用开源项目构建可验证工程信号
电控工程师简历突围:用开源项目构建可验证工程信号

1. 为什么电控岗简历石沉大海?不是你不够好,是HR根本没看到“工程信号”秋招季刚过半,我连续帮6个电气/自动化/车辆工程背景的同学改过电控方向的简历。他们有个共同点:课程设计写了“基于STM32的智能小车”,毕设写了“… · 2026/9/25 12:03:59

CTF-Wiki 内核利用实战:利用 ldt_struct 在内核内存中直接搜索 initramfs 中的 flag
CTF-Wiki 内核利用实战:利用 ldt_struct 在内核内存中直接搜索 initramfs 中的 flag

文档网络安全教程 【免费下载链接】ctf-wiki Come and join us, we need you! 项目地址: https://gitcode.com/gh_mirrors/ct/ctf-wiki 点击查看 免费下载 在多数 CTF 内核(Kernel Pwn)题目中,initrd/initramfs 会作为根文件系统… · 2026/9/25 12:03:53

从客户管理到销售漏斗:DeskcommCRM设计与落地全解析
从客户管理到销售漏斗:DeskcommCRM设计与落地全解析

开头这些年我见过太多团队在CRM选型上走弯路:要么买了一套大而全的国际大牌,结果一线销售只会用它查客户电话;要么干脆用Excel撑着,等客户多了才发现线索和跟进记录全乱成一团。我们内部做DeskcommCRM的初衷,就是看不下… · 2026/9/25 14:57:24

江苏食品级螺杆泵正规厂商源头工厂企业全景分析:省心选择指南
江苏食品级螺杆泵正规厂商源头工厂企业全景分析:省心选择指南

江苏食品级螺杆泵正规厂商源头工厂省心选择指南 食品级螺杆泵是食品生产加工领域用于高粘度、含颗粒食品介质输送的核心卫生级泵类设备,浙江久江泵业作为专业的食品级螺杆泵生产制造源头工厂,可提供合规稳定、适配多元食品加工场景的卫生级泵类产品与全流… · 2026/9/25 14:57:17

从Excel到DeskcommCRM:销售团队三个月落地复盘与避坑指南
从Excel到DeskcommCRM:销售团队三个月落地复盘与避坑指南

客户把报价单转给另外两家供应商的那个下午,我就知道光靠微信群和Excel已经撑不住了。你也在做销售或者带销售团队的话,应该能体会那种感觉:客户问过的型号、改过的价格、电话里承诺的交期,全都散落在不同的聊天窗口和邮箱里&… · 2026/9/25 14:57:17

哈尔滨道里区福汇汽车贴膜:PPF改色膜应用场景与工艺解析
哈尔滨道里区福汇汽车贴膜:PPF改色膜应用场景与工艺解析

行业基础科普:PPF改色膜的基础认知PPF是Paint Protection Film的缩写,中文译为漆面保护膜,也就是大众常说的隐形车衣,而PPF改色膜就是兼具漆面防护与外观改色功能的特种漆面保护膜,和普通改色膜相比,它在材… · 2026/9/25 14:57:11

Cursor 推出 Origin 代码托管平台:TaoToken 统一 Key 接入与 Pull Request 工作流配置指南
Cursor 推出 Origin 代码托管平台:TaoToken 统一 Key 接入与 Pull Request 工作流配置指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 14:57:11

山东防护网制造厂家发展现状与正规源头商家选择指南
山东防护网制造厂家发展现状与正规源头商家选择指南

做建筑工程的朋友,不少人都在找靠谱的防护网品牌工厂、防护网优质品牌、防护网实力工厂,毕竟现在建筑行业高空施工的安全要求越来越高,安全防护网作为防坠防护的核心器材,直接关系到工地安监验收、施工安全和项目整体运营成本。随… · 2026/9/25 14:57:11

数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)
数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战
创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX
MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码