【draw.io】エンジニアの「雑なMermaid」を、綺麗な図解に変換する【アップデート版】 - Qiita

「絵を描くのが得意じゃないけど、分かりやすい図を作りたい！」というエンジニアの悩みを解決してくれる、draw.io（ダイアグラムズ・ドット・アイ・オー）の便利な使い方を紹介する記事がありました。特に、テキストで簡単に図を作成できる「Mermaid（マーメイド）」という記法を、AIを使ってきれいな図に変換するテクニックが紹介されています。以前にも似たような記事があったようですが、今回はアップデート版として、さらに使いやすくなった点がポイントのようです。

皆さんも、仕事でシステム構成図やフロー図を描く機会ってありますよね？頭の中では「こんな図ができたら分かりやすいな」と思っていても、いざ描こうとすると、アイコンの配置や線の引き方でつまずいてしまったり、思ったようなきれいな図にならなかったり…。

そこで、最近はAIに図を作らせるという方法も出てきていますが、AIが生成した図って、後から修正するのが意外と大変なんです。画像として保存されると、一部だけを直すのが難しかったりしますよね。また、AWSのようなクラウドサービスの構成図を描くとき、AIが自動で配置してくれるアイコンの形が崩れてしまったり、体裁がバラバラになってしまうという悩みもあるようです。

この記事では、そんな悩みを解決するために、まず「Mermaid」という、テキストで図の構造を記述できる記法を使います。このMermaid、実はMarkdown（マークダウン）という、文章を書きやすくするための記法でも使えるので、普段からWebで文章を書いている人なら、なんとなくイメージが湧くかもしれません。Mermaidで「こういう図を作りたい」という指示をテキストで書けば、自動的に図の形にしてくれるんです。

さらにすごいのは、そのMermaidで書いたテキストから、draw.io上で「きれいな図」に変換できるという点です。AIが生成した画像ではなく、draw.io上で編集できる形式になるので、後からアイコンの位置を変えたり、線の色を変えたりといった細かい修正が自由自在にできるようになります。これは、複雑なシステム構成図などを描くエンジニアにとっては、作業効率が格段に上がる、まさに「救世主」のような機能と言えるでしょう。特に、AWSなどの構成図をきれいに描きたいというニーズに応えてくれるのは嬉しいポイントですね。このアップデートにより、エンジニアは「図の見た目を整える」という面倒な作業から解放され、本来集中すべき「システムの設計」そのものに、より多くの時間を割けるようになるはずです。