3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

image.png

はじめに

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

環境準備

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

チャットフローの作成

1. Difyのダッシュボードから「チャットフロー」を選択

ワークフローの名前を「ドキュメント可視化ツール」と設定

image.png

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

image.png

3. テキスト抽出ツールをフローに追加

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

image.png

4. LLMによるCSV変換

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

image.png

image.png

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

image.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

7. アプリの公開と実行

image.png

image.png

8. テスト実行

Excelファイルをアップロード

image.png

image.png

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

image.png

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

image.png

まとめ

このツールの特徴:

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

次のステップ提案

  • データ分析の追加(平均値/相関分析)
  • ダッシュボードのUIカスタマイズ

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

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?