まだ手描きで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にシステムの機能を説明する手間が省けます。このシーケンス図がなければ、対応するアーキテクチャを描くために多くのやり取りが必要ですが、この図があれば、わずか1ステップで正確なアーキテクチャを描くことができます。

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を生成させました：

まとめ

![画像](https://mmbiz.qpic.cn/mmbiz_svg/icXtjp9jsR5Q1fL9cqibfRyhl4Y9IBwUvb0leVsk6icg5q2gkxnM8bFSZibOMIZ