還在手繪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描述系統功能的步驟。若無此時序圖，需多次交互才能畫出對應架構；有了此圖，僅需一步即可生成準確架構。

03

Cursor生成drawio圖的準備工作

開工前，先準備工具。除Cursor外，還需安裝Cursor中的drawio插件。此處選用熱度最高的 Draw.io Integration。安裝後，可直接在Cursor中查看和編輯生成的drawio圖，十分方便。

工具齊備後，還需準備參考資料，以確保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文件，但不如代碼方便，覆蓋後即全局覆蓋，難以局部回退。因此每次創建新副本修改是最佳實踐。
• 除創建副本外，會將每次修改記錄到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並非萬能，關鍵時刻仍需人類介入，但能顯著提升效率。