Animated Diagrams

Animated Diagramsは、システムを視覚的に説明したいが、そのために図表ツールと格闘したくない人向けの、ブラウザで動くスタジオだ。空のキャンバスで接続線をドラッグする代わりに、システムを平易な英語で説明すると、AIが図形を選び矢印を引く。出てくるのはスクリーンショットではない。手で編集し、色を変え、配線をやり直せる、生きた図表要素の集合だ。

うたい文句はシンプルだ。ほとんどのAIツールは静止画像を返す。それはいつも同じ見た目で、そのツールがたまたま使うモデルに縛られる。Animated Diagramsはこの二つを切り離す。AI図表ジェネレーターとして、モデルを製品そのものではなくプラグインのように扱う。OpenAI、Claude、OpenRouter、あるいはローカルモデルの自分のAIキーを持ち込めば、どれを選んでもスタジオは同じ作業の流れを保つ。つまり作った図表が、一社の料金や障害に縛られて止まることはない。

先に知っておきたい最大の制限は、無料プランではAI図表が月5枚までという上限だ。手動の編集は無制限なので、すでに生成したものは作業し続けられるが、新しくAIで生成するたびにこの上限を消費する。試しながら指示を使い切ると、すぐ壁にぶつかる。

はじめかた

1. animatediagram.comで無料アカウントに登録する。Creators Packにカードは要らない。
2. スタジオを開き、OpenAI、Claude、OpenRouterのAIキー、または自分で動かすローカルモデルを接続する。
3. 「LLMの仕組み」や「マイクロサービスアーキテクチャ」のように主題か短い説明を打ち込み、AIに図形を並べさせる。
4. 図形をドラッグし、色を変え、配線をやり直して結果を整える。またはAIにキャンバス上の内容を変えさせる。
5. PNG、編集可能なファイル、動くGIFとして書き出し、共有したりドキュメントに載せたりする。