前置知识
- 如果有用过 https://excalidraw.com 来画手绘风格的架构图流程图的应该知道excalidraw是什么，这里就不多介绍了用法了。其实本身它的免费版也提供文本至图表，但每天只有10次，但没得换模型且效果很一般
- 工具的下载安装请看：【硬核开源mcp-chrome】一个chrome插件，能让任意chatbot接管你的chrome浏览器
- 不同模型、不同的prompt、不同的问法，甚至同个模型同个prompt效果都可能不一样，具体要自己去pua一下大模型了，喜欢折腾的佬可以根据我下面的流程自己玩一下，效果见仁见智了哈（我这里只是分享我自己的玩法，如果效果不好请轻喷）
- 我自己测试用的模型是claude-3-7-sonnet，具体的生成速度和效果要看你自己的模型给不给力
具体使用案例
ps：视频已做加速处理，防止各位看官没耐心看完
- 看到别人画的一张图觉得不错，于是先让模型分析列出绘制步骤，然后让它控制excalidraw帮我复刻出来（ps：不可能100%复刻，只能神似，生成完之后自己再稍微改改也能用）
- 先总结当前网页的内容，然后让它控制excalidraw画图帮助理解
- 画一个神经网络结构示意图
- 系统架构设计：url短链服务
详细使用步骤
如何达到我上面视频类似的效果？以DeepChat为例，其他chatbot的客户端类似
-
确保chatbot已经连接上了
chrome-mcp -
把这个prompt：mcp-chrome/prompt/excalidraw-prompt.md at master · hangwin/mcp-chrome · GitHub 复制到你的chatbot
以DeepChat为例如下图所示
-
对话的时候结合
chrome-mcp+ 对应的prompt使用即可组合出一个画图Agent
原理
自动控制excalidraw画图的原理实际上是利用chrome-mcp提供的脚本注入和通信工具，大模型先通过mcp server向网页注入一段内容脚本，内容脚本会监听后台脚本的事件，而大模型则可以以事件的方式再通过mcp server给内容脚本发送指令，从而达到控制它画图的效果
这段内容脚本我已经稍微压缩过然后一起放进这个prompt了mcp-chrome/prompt/excalidraw-prompt.md at master · hangwin/mcp-chrome · GitHub ，避免每次都重新生成，感兴趣的佬可以自行修改，也可以直接使用
最后
利用上面的原理，还有其他的玩法，比如修改页面的样式，效果如下：
感兴趣的大佬们可以根据自己的需求，参考我仓库里的prompt自行修改使用
觉得有帮助的佬给我的开源项目点个star吧 
，能刷帖，能点赞 
