Still Drawing drawio Manually? Boost Your Diagramming Efficiency with Cursor

Author: AlwinXie
Original Link: Original Link
👤 Author: AlwinXie
🌐 Source: WeChat Official Account

---

Results Preview

To avoid clickbait, let’s first show you the final architecture diagram we can produce. Not only is it visually elegant and logically clear, but it can also be completed in minutes (whereas traditional manual drawing would take hours):

01

Background

Most people prefer using Mermaid diagrams for generating flowcharts because AI understands them well, ensuring high accuracy. They are not only readable by humans but also by AI, making them highly effective for guiding AI. However, their drawback is their relatively monotonous and rigid styling.

For special and important presentation scenarios, we often need more refined and customized diagrams to showcase value. In such cases, we typically use drawio, which offers highly customizable styling but requires significant time for layout adjustments and line beautification.

If there were a tool to help us save time, it would be a game-changer. This article shares how to use Cursor to quickly generate the desired elegant drawio architecture diagrams.

02

Mermaid Diagrams

Before diving into drawio, let’s look at the results of Mermaid diagrams. In practice, you can use Cursor to generate them directly. By referencing our core code, we can ask Cursor to generate a sequence diagram based on the code, with results as follows:

The parsed Mermaid sequence diagram (fully generated by Cursor without any modifications. The accuracy is high, aligning well with the code logic):

The Mermaid diagram works well, especially for sequence diagrams, which are clear and accurate.

Next, we’ll use this Mermaid diagram to guide the AI in generating a drawio architecture diagram. This approach saves us the step of describing the system to the AI. Without this sequence diagram, guiding the AI to produce the corresponding architecture would likely require multiple interactions. With the diagram, however, we can generate an accurate architecture in just one step.

03

Preparing Cursor to Generate drawio Diagrams

Before starting, let’s gather the necessary tools. Besides Cursor, we need to install a drawio plugin for Cursor. Here, we chose the highly popular Draw.io Integration. After installing this plugin, we can view and edit drawio diagrams directly in Cursor, which is very convenient.

With the tools ready, we also need to prepare some reference materials to ensure Cursor generates accurate results that meet our expectations.

Key materials include:

1. Target-style drawio diagram files: Typically, we provide a reference diagram for Cursor to follow; otherwise, the results would be unpredictable.

2. Cursor Rules for guiding the drawing process: An MDC file.

3. Target reference diagram: Ideally, it should be a drawio source file. The example diagram in this article (.drawio format) is as follows (comparing it with the final result shows a high consistency in style):

Note: If the target reference diagram isn’t in drawio format (e.g., if we want to reference someone else’s visually appealing diagram), we can @ the reference diagram to Cursor and ask it to analyze the style, colors, lines, and layout. It can then generate an MD guide file, which can be adapted into the Cursor Rules MDC format. While this approach can be somewhat effective, the fidelity won’t match that of a drawio file and may require manual adjustments and iterative tuning with Cursor.

2. Cursor Rules MDC file: Example drawio-rules.mdc is as follows:

The actual content can be fine-tuned based on different diagrams. Here, the rules are tailored to the target diagram. However, the version management section is universal and particularly important:

The primary goals are twofold:

1. Create a new copy after each generation or modification of the drawio diagram: Avoid overwriting the original version. Unlike code, managing drawio files in Cursor isn’t as flexible—overwriting is global, making partial rollbacks difficult. Thus, creating a new copy for each modification is the best practice.
2. Log each modification in a changelog.md file: This makes it easier for humans to track changes. The result looks like this:

04

Implementing and Optimizing drawio Diagram Generation with Cursor

With all the tools prepared, it’s time to get to work.

Core prompt:
@drawio-rules.mdc @reference-diagram @Mermaid-sequence-diagram Generate a drawio diagram based on the sequence diagram logic and the reference diagram style.

The resulting v1.0 version:

The overall effect is already good, with only minor issues:

1. Overlapping lines.
2. Some lines covering key element labels.

After several iterations with Cursor and the rules, we arrived at the v1.3 version:

The architecture is correct, and the style matches, but the overlapping lines remain unresolved. This is an area for further exploration. Potential solutions include specifying line start/end positions, spacing, or coordinates, but fine-tuning the results requires time and can be documented in the MDC for future use.

Ultimately, by combining Cursor with the reference diagram and MDC to generate the framework and making minor manual adjustments, we achieved the final v1.4 version:

We also had Cursor generate the corresponding changelog:

Summary

• Efficient Diagramming Experience: Cursor makes drawing drawio architecture diagrams quick and easy, saving significant time.
• Mermaid Diagram Assistance: Use Mermaid diagrams to generate clear sequence diagrams, accurately guiding AI in drawing architecture diagrams.
• Importance of Tools: Installing the right plugins and preparing reference materials are key to ensuring accurate results.
• Standardized Process: By standardizing iterative copy creation and version log management, diagrams remain maintainable and traceable.
• Interaction and Optimization: Fine-tuning after Cursor generation further improves diagram quality. This also highlights that AI isn’t omnipotent—human intervention is still crucial, but it significantly boosts efficiency.