【意外と使える】Claudeで資料用の図を一瞬で作る

## 読み飛ばしてください

おはようございます、しなもんです。

プレゼンや文書、教育資料など、様々な場面で説明用の図は重要ですよね。
Qiitaの記事を書く上でも、図があると非常に助かります。

そんな図ですが、draw.ioやFigmaは事前知識が必要だったり、
多少デザインの知識を必要とするので、すぐに描きたい時に書けない人もいるのではないでしょうか？

そこでこの記事では、**生成AIの一つであるClaudeで図を生成**してみます。

## 何故Claude

GPTやStable Diffusion等の他のモデルと異なり、Claudeは理論的な図の生成に長けているため、
svgなどの図を生成することができます。

```:user
ブランチの仕組みや流れを説明するために使う図をsvgとして生成してください。
```

```:claude
GitHubのブランチの仕組みと流れを説明する図をSVGとして生成いたします。(以下略)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/e15b92de-372b-2f32-be5e-c95cac63d5e7.png)

これは`Artifacts`という機能で、会話をしながらファイルを共同制作することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/e7a46c8e-cb04-6d99-79ea-3b396e2a8e2a.png)

https://qiita.com/CinnamonSea2073/items/19efaf979419854d1515

2024年7月現在、ある程度は無料で使えます。

## 作れる図とプロンプト表

### フローチャート

```:user
次のプロセスをフローチャートで表現してください：

1. 開始
2. 注文を受け取る
3. 在庫確認
4. 在庫があるか？ (Yes/No)
Yes の場合：出荷準備
No の場合：発注
5. 顧客に連絡
6. 終了
```

```mermaid
graph TD
    A[開始] --> B[注文を受け取る]
    B --> C[在庫確認]
    C --> D{在庫があるか？}
    D -->|Yes| E[出荷準備]
    D -->|No| F[発注]
    E --> G[顧客に連絡]
    F --> G
    G --> H[終了]
```

### マインドマップ

```:user
『デジタルマーケティング』をテーマにしたマインドマップを作成してください。主要な枝として『SEO』、『ソーシャルメディア』、『コンテンツマーケティング』、『メール配信』を含めてください。
```

```mermaid　
mindmap
  root((デジタルマーケティング))
    SEO
      オンページSEO
        コンテンツ最適化
        メタタグ
        URL構造
      オフページSEO
        バックリンク
        ソーシャルシグナル
      技術的SEO
        サイト速度
        モバイル対応
        構造化データ
    ソーシャルメディア
      プラットフォーム
        Facebook
        Twitter
        Instagram
        LinkedIn
      コンテンツ戦略
        エンゲージメント
        ハッシュタグ
      広告
        ターゲティング
        リターゲティング
    コンテンツマーケティング
      ブログ
      動画
      インフォグラフィック
      eBook
      ポッドキャスト
      戦略
        キーワードリサーチ
        コンテンツカレンダー
    メール配信
      リスト構築
      セグメンテーション
      自動化
      パーソナライゼーション
      A/Bテスト
      メトリクス分析
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/d57d8fcc-504e-33f7-604e-6fb1eb7e00b0.png)

### 組織図

```:user
次の役職を含む小規模企業の組織図を作成してください：

CEO
営業部長（営業担当2名）
技術部長（エンジニア3名）
財務部長（経理担当1名）
```

```mermaid
graph TD
    CEO[CEO]
    Sales[営業部長]
    Tech[技術部長]
    Finance[財務部長]
    SalesRep1[営業担当1]
    SalesRep2[営業担当2]
    Eng1[エンジニア1]
    Eng2[エンジニア2]
    Eng3[エンジニア3]
    Accountant[経理担当]

    CEO --> Sales
    CEO --> Tech
    CEO --> Finance
    Sales --> SalesRep1
    Sales --> SalesRep2
    Tech --> Eng1
    Tech --> Eng2
    Tech --> Eng3
    Finance --> Accountant
```

### ER図

```:user
オンライン書店のデータベース設計のER図を作成してください。『ユーザー』、『書籍』、『注文』、『著者』のエンティティを含め、それぞれの関係を示してください。
```

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    USER {
        int user_id
        string username
        string email
        string password
    }
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        int order_id
        int user_id
        date order_date
        float total_amount
    }
    ORDER_ITEM }o--|| BOOK : includes
    ORDER_ITEM {
        int order_item_id
        int order_id
        int book_id
        int quantity
    }
    BOOK ||--o{ BOOK_AUTHOR : written_by
    BOOK {
        int book_id
        string title
        string isbn
        float price
    }
    AUTHOR ||--o{ BOOK_AUTHOR : writes
    AUTHOR {
        int author_id
        string name
        date birth_date
    }
    BOOK_AUTHOR {
        int book_id
        int author_id
    }
```

### シーケンス図

```:user
ユーザーがECサイトで商品を購入する際のシーケンス図を作成してください。『ユーザー』、『Webサーバー』、『データベース』、『決済システム』の間のやり取りを含めてください。
```

```mermaid
sequenceDiagram
    actor User as ユーザー
    participant Web as Webサーバー
    participant DB as データベース
    participant Payment as 決済システム

    User->>Web: 商品選択
    Web->>DB: 商品情報リクエスト
    DB-->>Web: 商品情報レスポンス
    Web-->>User: 商品情報表示

    User->>Web: カートに追加
    Web->>DB: カート情報更新
    DB-->>Web: 更新完了

    User->>Web: 購入手続き開始
    Web->>DB: ユーザー情報取得
    DB-->>Web: ユーザー情報レスポンス
    Web-->>User: 注文確認画面表示

    User->>Web: 注文確定
    Web->>Payment: 決済処理リクエスト
    Payment-->>Web: 決済処理結果
    Web->>DB: 注文情報保存
    DB-->>Web: 保存完了
    Web-->>User: 注文完了画面表示
```

### ガントチャート

```:user
Webサイトリニューアルプロジェクトのガントチャートを作成してください。以下のタスクを含めてください：

要件定義（1週間）
デザイン（2週間）
フロントエンド開発（3週間）
バックエンド開発（3週間）
テスト（1週間）
リリース（1日）
```

```mermaid
gantt
    title Webサイトリニューアルプロジェクト
    dateFormat  YYYY-MM-DD
    section プロジェクトフェーズ
    要件定義           :a1, 2024-07-16, 1w
    デザイン           :a2, after a1, 2w
    フロントエンド開発  :a3, after a2, 3w
    バックエンド開発    :a4, after a2, 3w
    テスト             :a5, after a3 a4, 1w
    リリース           :milestone, after a5, 1d
```

## さいごに
Claudeはいいぞ。