DifyでドキュメントからCSVデータを抽出しEChartsで可視化するツール作成ガイド


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/eb0e70cc-05f8-4bf7-9dca-47ad211a044e.png)


## はじめに
この記事では、Difyプラットフォームを利用して、ドキュメントのテキスト抽出からCSV変換、さらにEChartsで可視化する一連のワークフローを作成する方法を解説します。Excelのドキュメントを自動で分析し、インタラクティブなダッシュボードを構築するプロセスをステップバイステップで説明します。



## 環境準備
Difyアカウント：アカウントを作成し、ワークスペースを準備
サンプルデータ：Excel形式の数値データを用意

## チャットフローの作成

### 1. Difyのダッシュボードから「チャットフロー」を選択
ワークフローの名前を「ドキュメント可視化ツール」と設定


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/6fb617f5-3cc0-4e9c-8db5-554af7b3b699.png)

### 2. 入力フィールドとして「ドキュメントアップロード」コンポーネントを追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/c6b85a10-f869-4473-9c32-53878323bb51.png)


### 3. テキスト抽出ツールをフローに追加
アップロードされたドキュメントからテキストを抽出する設定を行う
抽出結果をワークフロー内で次のステップに受け渡す


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/6ca72fe4-4b22-45fd-9a34-ecb04928b837.png)



### 4. LLMによるCSV変換

```
#役割
あなたはデータ整理の専門家です。データ形式の整理やフォーマット変換を担当します。
#データ
{{#1742042932212.text#}}
#タスク
データをCSV形式に変換して、CSV形式で出力してください。
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/cce5118e-e64c-446a-8645-0634123f8676.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/8d115ddf-0dee-4b8a-9856-f1c2da746b52.png)


### 5. PythonスクリプトでEChartsを生成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/e9e97bb0-ae44-4145-b1fc-d9bcbe90ce1b.png)

```
import csv
import json


def main(csv_string):
    lines = csv_string.strip().split('\n')
    reader = csv.reader(lines)
    data = [row for row in reader]

    # 数値を変換（ヘッダ行と最初の列を除く）
    for row in data[1:]:
        for i in range(1, len(row)):
            try:
                row[i] = float(row[i])
            except ValueError:
                pass

    cols = len(data[0])
    rows = len(data) - 1

    echarts_config = {
        "legend": {},
        "tooltip": {},
        "dataset": {
            "source": data
        },
        "xAxis": [
            {
                "type": "category",
                "gridIndex": 0,
                "data": data[0][1:]  # 列のラベル（最初の列を除く）
            },
            {
                "type": "category",
                "gridIndex": 1,
                "data": [row[0] for row in data[1:]]  # 行のラベル（2行目以降の最初の列）
            }
        ],
        "yAxis": [
            {"type": "value", "gridIndex": 0},
            {"type": "value", "gridIndex": 1}
        ],
        "grid": [
            {"bottom": "55%"},
            {"top": "55%"}
        ],
        "series": []
    }

    # 行方向のバーグラフシリーズ（各データ行ごとに1つのシリーズ）
    row_series = []
    for row in data[1:]:
        row_series.append({
            "type": "bar",
            "seriesLayoutBy": "row",
            "name": row[0],
            "xAxisIndex": 0,
            "yAxisIndex": 0
        })

    # 列方向のバーグラフシリーズ（各データ列ごとに1つのシリーズ/最初の列を除く）
    col_series = []
    for col_idx in range(1, cols):
        col_series.append({
            "type": "bar",
            "seriesLayoutBy": "column",
            "name": data[0][col_idx],
            "xAxisIndex": 1,
            "yAxisIndex": 1
        })

    echarts_config["series"] = row_series + col_series

    output = "\n```echarts\n" + json.dumps(echarts_config, indent=2, ensure_ascii=False) + "\n```"
    return {"output": output}

```






### 6. 抽出したテキストとEchartsを出力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/04d63f95-716c-45b5-bb5a-e44b999a1af8.png)

### 7. アプリの公開と実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/83bcb2d7-5492-4dc8-9a8b-1d3cfe21aacc.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/ab180632-a8ee-4064-bc51-b8a7523c9959.png)

### 8. テスト実行
Excelファイルをアップロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/0d153f3d-508d-493e-b689-3c3bf362efdf.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/161b70e8-1b50-46c2-9541-55589727ea14.png)

メッセージを送信すると自動的に可視化


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/faf0bb58-9b1a-4a29-98a1-44bf98179f04.png)

以下のようなダブルバーグラフが生成されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/eb0e70cc-05f8-4bf7-9dca-47ad211a044e.png)

## まとめ
このツールの特徴：

- ドキュメント形式の柔軟性（Excel/PDF/テキスト対応）
- LLMによる自動フォーマット変換
- 極端に短い開発期間（数時間で構築可能）

次のステップ提案
- データ分析の追加（平均値/相関分析）
- ダッシュボードのUIカスタマイズ

Difyの可視化機能を活用し、業務データの分析プロセスを効率化してみてください！
この記事の内容を参考に、データ駆動型の意思決定プロセスを構築してみてください。