はじめに

最近、Eraserというツールが注目を集めています。Eraserは、自然言語プロンプトを使用して図やフローチャートを生成できるAIツールです。この記事では、Eraserの概要と、MermaidとChatGPTを組み合わせてEraserの機能を実現する方法について解説します。

Eraserについて

Eraserは、以下のような特徴を持つAIツールです：

自然言語プロンプト：テキスト入力だけで図表やフローチャートを生成。
多様な図表：クラウドアーキテクチャ図、データベース図、ワークフロー図などを作成可能。
共同編集：チームメンバーとリアルタイムで共同編集が可能。
無料プラン：基本的な機能を無料で利用可能。(無料版は利用制限はあります)

ユースケース

Eraserは、エンジニアの要件定義や設計で使用する図を作成する際に便利かなと考えています。

要件定義：プロジェクトの初期段階で、システムの全体像を視覚的に把握。
設計：データベースのER図やシーケンス図を簡単に作成。

使用例

使用プロンプト

    ## 要望
     画面遷移設計をしたい。
     画面遷移のフローを生成したい。
     日本語で生成してほしい。

    ## 環境
     iOSアプリ、androidアプリ

    ## アプリ内容
     メッセージングアプリ

追加プロンプト（上記プロンプト入力後に以下プロンプトを入力しました）

    友達追加の機能を追加して

生成結果

感想

使用例に記載した内容で簡単にプロトタイプは生成できるので、生成された図にプロンプトで指示するもしくは、手で修正する事で、図の作成を効率化できると思いました。しかし、APIの使用や10回以上のプロンプトによる生成は有料となってくるので、使うなら有料前提になってくる気がしました。

Mermaid+ChatGPTについて

Mermaidは、Markdownテキストでグラフを作成できるダイアグラムツールです。MermaidとChatGPTを組み合わせることでEraserと同じような事が出来ると考えています。

Mermaidの記法

Mermaidの記法は非常にシンプルです。以下は、基本的なフローチャートの例です：

flowchart LR
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great]
    B -->|No| D[Fix it]

Mermaid Live Editorの使い方

Mermaid Live Editorを使用すると、リアルタイムでMermaidの図を編集・プレビューできます。以下の手順で使用できます：

Mermaid Live Editorにアクセス
CodeパネルにMermaid記法を入力
Previewパネルでリアルタイムに図を確認
ActionsセクションからPNGやSVG形式でエクスポート可能

詳細な使い方は、Mermaid User Guideを参照してください。

ChatGPT+Mermaidを使用する手順

MermaidとChatGPTを使用してEraserと同等の機能を実現するための手順を記載します。

手順

ChatGPTにMermaid記法で図を出力するようプロンプトを入力（使用したサンプルは以下です）

## 要望
画面遷移設計をしたい。
画面遷移のフローを生成したい。
日本語で生成してほしい。
Mermaid Live Editor形式で出力してほしい。

## 環境
iOSアプリ、androidアプリ

## アプリ内容
メッセージングアプリ

1で出力されたコードをMermaid Live EditorのCodeに貼り付け
内容を確認しプロンプトを修正
Actionsセクションからエクスポート

生成結果

感想

Eraserと同等の機能は実現できたのではないかと思います。こちらはAPIがオンライン上で提供されていないので、API利用したい場合は、自サーバーで実現する必要性があります。ただ、お金がかからないメリットを加味するとこちらでも全然問題ないのではと思いました。

まとめ

Eraserは、非常に強力な図表生成ツールとなっていますが、MermaidとChatGPTを組み合わせることで、同等の機能が実現できました。この記事で紹介した方法を活用して、効率的に図表を作成し、プロジェクトの要件定義や設計をスムーズに進めるのに役立つと考えています。もし、Eraserに注目されている方がいらっしゃれば、Mermaid + ChatGPTも視野に入れてみてはいかがでしょうか？