还在手绘drawio？用Cursor让你的画图效率起飞

作者: AlwinXie 原始链接: 原始链接 👤 作者: AlwinXie 🌐 来源: 微信公众号

效果呈现

避免标题党，上来先给大家展示最终能产出的架构图效果。不但画面精美，流程清晰，重要的是分钟级别内即可完成（如果用传统的手绘方式，没个小时级别完不成）：

01

背景

大家常用的生成流程图的方式更多选用的是Mermaid图，因为AI对它的理解程度较高，生成的准确性也高，而且不仅能给人阅读，还能给AI阅读，在指导AI方面有很好的作用，但其缺点是样式较为单一和固化。

在特殊的重要的汇报场景中，我们需要更精美的更定制化的图来展示价值。这时我们一般选用drawio来完成，其优势是样式高度定制化，缺点是需要费大量时间做布局调整，线条美化等。

如果有个工具可以帮我们解决费时间的问题，那将是大大滴好。本文将分享如何利用Cursor快速生成想要的精美的drawio架构图。

02

Mermaid图

在讲drawio前，先看看Mermaid图的效果。在实战中，可以利用cursor直接生成，@上我们的核心代码，让Cursor根据代码为我们生成时序图，效果如下：

Mermaid时序图的解析效果（完全由cursor生成，一行没改。准确性较高，基本与代码逻辑一致）：

Mermaid图的效果还是不错的，特别是时序图，很清晰，很准确。

接下来我们将利用这份Mermaid，指导AI生出drawio的架构图。这么做主要是省去了给AI描述我们系统是干嘛的这一步。如果没有这个时序图，要指导AI画出相应的架构，估计需要很多次的交互才行，而有了这个图，仅需一步即可画出准确的架构。

03

Cursor生成drawio图的准备工作

在开工前，我们先把工具搞齐。除了cursor外，还需要装一个Cursor中的drawio插件。这里选用了热度最高的 Draw.io Integration 。安装了这个插件后，Cursor生成好的drawio图，我们就可以直接在Cursor中查看和编辑了，十分方便。

工具齐备之后，我们还需要准备些参考资料，目的是为了让Cursor的生成效果准确，符合我们的预期。

主要有以下2份资料：

• 要生成的目标风格的drawio图文件。一般会给一个参考图让Cursor来生成，否则出来的效果就是开盲盒了。
• 指导Cursor画图的Cursor Rules，一个mdc文件。

1、目标参考图，最好是有drawio的源文件，本文的示例图(.drawio格式)如下 ：（对比最终的效果图可以看出，风格还是相当一致的）

备注：如果目标的参考图没有drawio的格式，比如我们想参考别人的好看的图。这时可以把参考图@给Cursor，让它分析别人的图的风格配色线条布局等，然后生成一份md格式的指导文件，之后再根据这个文件改成Cursor Rules的mdc规范，也是可以起到一定作用的，但是还原度肯定是没有drawio格式的高的。需要配合人工调整和cursor交互来调优。

2、指导Cursor画图的mdc，示例drawio-rules.mdc如下 ：

实际的内容可以根据不同的图做微调，这里是根据目标图形做的一个规则。但版本管理的部分是通用的，而且比较重要：

主要的目的有2个：

• 每次生成和修改drawio图之后都创建新的副本，不要覆盖原始的版本。 因为虽然在Cursor中通过插件可以管理drawio文件，但是不像代码一样方便，覆盖了就是全局覆盖，不好局部回退。因此每次创建一个新的副本drawio文件来修改是最佳实践。
• 除了创建副本外，会对每次的修改做日志记录，写到changelog.md中。方便人类阅读和识别，效果形如：

04

Cursor生成drawio图的落地及调优

作案家伙都准备好之后，就可以开干了。

核心的提示词：@drawio-rules.mdc @参考图 @Mermaid时序图 根据时序图的逻辑和参考图的风格，帮我生成drawio图。

得到v1.0的版本：

看起来整体效果已经是不错的，只是存在一些小问题：1、线条有重叠；2、部分线条覆盖了关键元素的文字。

接下来又利用Cursor及rules的配合，进行了几次交互，最终得到了v1.3的版本如下：

可以看出，大的架构没有问题，风格也是对的，就是线条重叠的问题不好解决。这里有待大家去探索优化，具体的思路可以规定线条的起止位置，间隔或者坐标信息等，但最终效果需要时间去调优，最终可以沉淀到mdc中指导后续的画图。

最终是通过Cursor配合参考图及mdc生成大致的框架，配合人工的少量调整，完成了最终的效果，v1.4版本：

并且让Cursor生成了对应的changelog：

总结

• 高效绘图体验：Cursor 让绘制 Draw.io 架构图变得快速而简单，节省大量画图时间。
• Mermaid 图的辅助： 利用 Mermaid 图生成清晰的时序图，准确地指导 AI 绘制架构图。
• 工具齐备的重要性：安装必要的插件和准备参考资料，是确保生成效果准确的关键。
• 标准化流程：通过规范创建副本的迭代方式和版本日志管理，保持图表的可维护性和可追溯性。
• 交互与调优：在Cursor生成图后进行适当的调优，可以进一步提升图形质量。同时也暴露了AI不是万能的，关键时刻还得靠人类，但能帮助我们提升不少的效率。