LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kongo-jun

Claude 3.5 Sonnetを使ってmermaidの図をパワポ・エクセルにVBA出力（オブジェクトで出力）

Last updated at Posted at 2024-08-29

記事の概要

大前提として、何事もLLMを中心に作業を行うのに、LLMが読み込めない情報を多く保持しているPowerPointとExcelは、使わないに越したことはないと考えている。

図を使うのであれば、mermaid記法の図をLLMに作成してもらうのが、生産性が高い。図の修正もLLMに依頼できる。

代替え案として、mermaid2drawioも紹介している。

ただ、それでも頑なにPowerPointとExcelから卒業できない方向けに、図などを自動生成するための手順を紹介する。

注意事項

LLMはやはり出力が安定しなかったり、性能にも限界があるので、以下の前提は踏まえてください。

・図の複雑さなどで精度は変わることをご了承ください。
・自動生成と言いつつ、インプットはmermaid記法のテキストです。
・自動生成と言いつつ、思い通りにならないときはある。

また、利用するLLMについては、現状はClaude 3.5 sonnetのみが利用可能で、GPT-4oなどの他のLLMではLLMの能力が足りず、想定通りのアウトプットが出力されない。

動画でも解説してます。

PowerPoint

環境構築

PowerPointのタブに「開発」タブが表示されていない場合は、「開発」タブを追加する。

image.png

「ファイル　＞　その他」を選択する。

powerpointの開発タブ１.png

「オプション」を選択する。

powerpointの開発タブ２.png

「リボンのユーザー設定」を選択する。

powerpointの開発タブ３.png

「リボンのユーザー設定」から「開発」にチェックをつけて、「OK」を押下する。

powerpointの開発タブ４.png

「開発」タブが追加されている。

powerpointの開発タブ５.png

VBAの作成

現在は、Claude 3.5 sonnetのみがLLMのスペックとしては足りているため、Claudeにログインする。

以下のようなプロンプトを入力し、VBAの作成を依頼する。

powerpointのLLM１.png

以下のmermaid記法で作成された図をpowerpointのオブジェクトを使った図として出力するための、VBAを作成してください。

```mermaid
graph TB;
    subgraph local
        Dify
        Weaviate
        venv
    end

    subgraph groq[Groq Cloud]
        llama3[llama 3]
    end

    subgraph Dify[Dify Docker]
        q[質問]
        vector[ベクトル検索]
        RAG[RAG]
        output[回答]
    end

    subgraph Weaviate[Weaviate Docker]
        vectorDB
    end

    subgraph venv
        flask
    end

    q --> vector
    vector --> RAG
    RAG --> output

    vector --> |HTTPリクエスト|flask
    flask --> |ベクトル検索|vectorDB
    vectorDB --> flask
    flask --> vector

    RAG --> |テキスト生成|llama3
    llama3 --> RAG

ちなみに、上記のプロンプトに含まれているmermaid記法の図は以下です。

こんな感じで、LLMがVBAを出力する。

powerpointのLLM２.png

VBAの実行

VBAを実行するため、「開発」タブを選択し、「Visual Basic」を選択する。

powerpointのVBA１.png

以下の画面が表示される。

powerpointのVBA２.png

「挿入　＞　標準モジュール」を選択する。

powerpointのVBA３.png

以下のウィンドウが表示される。

powerpointのVBA４.png

LLMが作成したVBAを貼り付ける。

powerpointのVBA５.png

「実行　＞　Sub/ユーザーフォームの実行」を選択し、VBAを実行する。

powerpointのVBA６.png

このVBAを実行してみる。（LLMの出力なので、プロンプトのたびに出力は異なる。）

Sub CreateMermaidDiagram()
    Dim ppt As Presentation
    Dim sld As Slide
    Dim shp As Shape
    Dim i As Integer
    Dim startX As Single, startY As Single
    Dim width As Single, height As Single
    
    ' 新しいプレゼンテーションとスライドを作成
    Set ppt = Application.Presentations.Add
    Set sld = ppt.Slides.Add(1, ppLayoutBlank)
    
    ' 基本的な図形のサイズと位置を設定
    startX = 100
    startY = 50
    width = 100
    height = 50
    
    ' サブグラフ "local" を作成
    CreateSubgraph sld, "local", startX, startY, 350, 200
    
    ' "local" 内の要素を作成
    CreateShape sld, "Dify", startX + 20, startY + 30, width, height
    CreateShape sld, "Weaviate", startX + 20, startY + 90, width, height
    CreateShape sld, "venv", startX + 20, startY + 150, width, height
    
    ' サブグラフ "Groq Cloud" を作成
    CreateSubgraph sld, "Groq Cloud", startX + 400, startY, 150, 100
    CreateShape sld, "llama 3", startX + 425, startY + 40, width, height
    
    ' サブグラフ "Dify Docker" を作成
    CreateSubgraph sld, "Dify Docker", startX, startY + 220, 350, 200
    CreateShape sld, "質問", startX + 20, startY + 250, width, height
    CreateShape sld, "ベクトル検索", startX + 20, startY + 310, width, height
    CreateShape sld, "RAG", startX + 140, startY + 310, width, height
    CreateShape sld, "回答", startX + 260, startY + 310, width, height
    
    ' サブグラフ "Weaviate Docker" を作成
    CreateSubgraph sld, "Weaviate Docker", startX + 400, startY + 220, 150, 100
    CreateShape sld, "vectorDB", startX + 425, startY + 260, width, height
    
    ' サブグラフ "venv" を作成
    CreateSubgraph sld, "venv", startX + 400, startY + 340, 150, 100
    CreateShape sld, "flask", startX + 425, startY + 380, width, height
    
    ' 矢印を追加
    AddArrow sld, startX + 70, startY + 285, startX + 70, startY + 310
    AddArrow sld, startX + 120, startY + 335, startX + 140, startY + 335
    AddArrow sld, startX + 240, startY + 335, startX + 260, startY + 335
    AddArrow sld, startX + 120, startY + 335, startX + 400, startY + 400, "HTTPリクエスト"
    AddArrow sld, startX + 475, startY + 380, startX + 475, startY + 310, "ベクトル検索"
    AddArrow sld, startX + 475, startY + 310, startX + 475, startY + 380
    AddArrow sld, startX + 400, startY + 400, startX + 120, startY + 335
    AddArrow sld, startX + 190, startY + 310, startX + 450, startY + 90, "テキスト生成"
    AddArrow sld, startX + 450, startY + 90, startX + 190, startY + 310
End Sub

Sub CreateSubgraph(sld As Slide, name As String, left As Single, top As Single, width As Single, height As Single)
    Dim shp As Shape
    Set shp = sld.Shapes.AddShape(msoShapeRectangle, left, top, width, height)
    With shp
        .Fill.Visible = msoFalse
        .Line.Visible = msoTrue
        .Line.ForeColor.RGB = RGB(0, 0, 0)
        .Line.Weight = 1.5
    End With
    
    Set shp = sld.Shapes.AddTextbox(msoTextOrientationHorizontal, left, top - 20, width, 20)
    shp.TextFrame.TextRange.Text = name
    shp.TextFrame.TextRange.ParagraphFormat.Alignment = ppAlignLeft
End Sub

Sub CreateShape(sld As Slide, name As String, left As Single, top As Single, width As Single, height As Single)
    Dim shp As Shape
    Set shp = sld.Shapes.AddShape(msoShapeRectangle, left, top, width, height)
    With shp
        .Fill.ForeColor.RGB = RGB(240, 240, 240)
        .Line.Visible = msoTrue
        .Line.ForeColor.RGB = RGB(0, 0, 0)
        .TextFrame.TextRange.Text = name
        .TextFrame.TextRange.ParagraphFormat.Alignment = ppAlignCenter
    End With
End Sub

Sub AddArrow(sld As Slide, startX As Single, startY As Single, endX As Single, endY As Single, Optional label As String = "")
    Dim shp As Shape
    Set shp = sld.Shapes.AddLine(startX, startY, endX, endY)
    With shp.Line
        .BeginArrowheadStyle = msoArrowheadNone
        .EndArrowheadStyle = msoArrowheadTriangle
        .ForeColor.RGB = RGB(0, 0, 0)
        .Weight = 1.5
    End With
    
    If label <> "" Then
        Dim txtBox As Shape
        Set txtBox = sld.Shapes.AddTextbox(msoTextOrientationHorizontal, (startX + endX) / 2 - 40, (startY + endY) / 2 - 10, 80, 20)
        txtBox.TextFrame.TextRange.Text = label
        txtBox.TextFrame.TextRange.ParagraphFormat.Alignment = ppAlignCenter
    End If
End Sub

一発目の出力はこんな感じ。（うまくいっている方）

image.png

一発で使えるVBAが出力されることはないので、パワハラプロンプトなどで、修正を依頼する。

プロンプト例１

あなたの回答は60点だ。改善した要素を述べた上で100点の回答をしなさい。
視覚的に分かりやすいようにしなさい。

image.png

プロンプト例２

背景色と文字色のバランスなど、見やすいように修正してください。

image.png

プロンプト例３

1枚目の画像の状態です。
2枚目の画像を参考にして、修正してください。

image.png

プロンプト例４

【プロンプトではないですが、初めから作りなおしましょう。】

最終的には、以下のVBAをLLMが出力。

Sub CreateImprovedMermaidDiagram()
    Dim ppt As Presentation
    Dim sld As Slide
    
    Set ppt = Application.Presentations.Add
    Set sld = ppt.Slides.Add(1, ppLayoutBlank)
    
    sld.Background.Fill.ForeColor.RGB = RGB(50, 50, 50) ' ダークグレーの背景

    CreateMainHierarchy sld
    CreateSubgraphs sld
    CreateElements sld
    AddArrows sld
End Sub

Sub CreateMainHierarchy(sld As Slide)
    CreateBox sld, "local", 50, 50, 550, 400, RGB(70, 70, 70), 16, RGB(200, 200, 200)
    CreateBox sld, "Groq Cloud", 620, 350, 150, 80, RGB(70, 70, 70), 16, RGB(200, 200, 200)
End Sub

Sub CreateSubgraphs(sld As Slide)
    CreateBox sld, "Dify Docker", 280, 100, 300, 330, RGB(80, 80, 80), 14, RGB(200, 200, 200)
    CreateBox sld, "Weaviate Docker", 60, 250, 200, 100, RGB(80, 80, 80), 14, RGB(200, 200, 200)
    CreateBox sld, "venv", 60, 100, 200, 100, RGB(80, 80, 80), 14, RGB(200, 200, 200)
End Sub

Sub CreateElements(sld As Slide)
    CreateBox sld, "flask", 110, 140, 100, 40, RGB(30, 30, 30), 12, RGB(255, 255, 255)
    CreateBox sld, "vectorDB", 110, 290, 100, 40, RGB(30, 30, 30), 12, RGB(255, 255, 255)
    CreateBox sld, "質問", 300, 140, 80, 30, RGB(30, 30, 30), 10, RGB(255, 255, 255)
    CreateBox sld, "ベクトル検索", 300, 190, 80, 30, RGB(30, 30, 30), 10, RGB(255, 255, 255)
    CreateBox sld, "RAG", 300, 250, 80, 30, RGB(30, 30, 30), 10, RGB(255, 255, 255)
    CreateBox sld, "回答", 300, 310, 80, 30, RGB(30, 30, 30), 10, RGB(255, 255, 255)
    CreateBox sld, "llama 3", 645, 380, 100, 40, RGB(30, 30, 30), 12, RGB(255, 255, 255)
End Sub

Sub CreateBox(sld As Slide, name As String, left As Single, top As Single, width As Single, height As Single, fillColor As Long, fontSize As Integer, textColor As Long)
    Dim shp As Shape
    Set shp = sld.Shapes.AddShape(msoShapeRectangle, left, top, width, height)
    With shp
        .Fill.ForeColor.RGB = fillColor
        .Line.Visible = msoTrue
        .Line.ForeColor.RGB = RGB(100, 100, 100)
        .TextFrame.TextRange.Text = name
        .TextFrame.TextRange.ParagraphFormat.Alignment = ppAlignCenter
        .TextFrame.TextRange.Font.Color.RGB = textColor
        .TextFrame.TextRange.Font.Size = fontSize
        .TextFrame.TextRange.Font.Name = "Arial"
    End With
End Sub

Sub AddArrows(sld As Slide)
    AddArrow sld, 340, 170, 340, 190 ' 質問 -> ベクトル検索
    AddArrow sld, 340, 220, 340, 250 ' ベクトル検索 -> RAG
    AddArrow sld, 340, 280, 340, 310 ' RAG -> 回答
    AddArrow sld, 300, 205, 210, 160, "HTTPリクエスト" ' ベクトル検索 -> flask
    AddArrow sld, 160, 180, 160, 290, "ベクトル検索" ' flask -> vectorDB
    AddArrow sld, 160, 290, 160, 180 ' vectorDB -> flask
    AddArrow sld, 210, 160, 300, 205 ' flask -> ベクトル検索
    AddArrow sld, 380, 265, 645, 400, "テキスト生成" ' RAG -> llama 3
    AddArrow sld, 645, 400, 380, 265 ' llama 3 -> RAG
End Sub

Sub AddArrow(sld As Slide, startX As Single, startY As Single, endX As Single, endY As Single, Optional label As String = "")
    Dim shp As Shape
    Set shp = sld.Shapes.AddLine(startX, startY, endX, endY)
    With shp.Line
        .BeginArrowheadStyle = msoArrowheadNone
        .EndArrowheadStyle = msoArrowheadTriangle
        .ForeColor.RGB = RGB(200, 200, 200)
        .Weight = 1.5
    End With
    
    If label <> "" Then
        Dim txtBox As Shape
        Set txtBox = sld.Shapes.AddTextbox(msoTextOrientationHorizontal, (startX + endX) / 2 - 40, (startY + endY) / 2 - 10, 80, 20)
        With txtBox.TextFrame.TextRange
            .Text = label
            .ParagraphFormat.Alignment = ppAlignCenter
            .Font.Size = 8
            .Font.Color.RGB = RGB(200, 200, 200)
            .Font.Name = "Arial"
        End With
    End If
End Sub

そのまま使えるわけではないが、元のmermaidの図とかなり近い図を、VBAを使って出力することができている。

image.png

エラー発生時

VBAを実行して、エラーが出た場合は、罰金プロンプトでエラーシューティングをする。

エラーが出ています。次にエラーを出したら罰金です。修正してください。

image.png

Excel

環境構築

Excelのタブに「開発」タブが表示されていない場合は、「開発」タブを追加する。

image.png

「ファイル　＞　その他」を選択する。

image.png

「オプション」を選択する。

image.png

「リボンのユーザー設定」を選択する。

image.png

VBAの作成

PowerPointの時と同様に、以下のようなプロンプトを入力し、VBAの作成を依頼する。

image.png

画像は以下のmermaid記法で作成された図です。この図をExcelのオブジェクトを使った図として出力するための、VBAを作成してください。
コードはコピペできるように全て出力してください。
エラーを出したら罰金です。
----------
```mermaid
graph TB;
    subgraph local
        Dify
        Weaviate
        venv
    end

    subgraph groq[Groq Cloud]
        llama3[llama 3]
    end

    subgraph Dify[Dify Docker]
        q[質問]
        vector[ベクトル検索]
        RAG[RAG]
        output[回答]
    end

    subgraph Weaviate[Weaviate Docker]
        vectorDB
    end

    subgraph venv
        flask
    end

    q --> vector
    vector --> RAG
    RAG --> output

    vector --> |HTTPリクエスト|flask
    flask --> |ベクトル検索|vectorDB
    vectorDB --> flask
    flask --> vector

    RAG --> |テキスト生成|llama3
    llama3 --> RAG

VBAの実行

LLMが出力したVBAを実行する。
手順はPowerPointと同様。

Sub CreateDiagram()
    Dim ws As Worksheet
    Dim shp As Shape
    Dim left As Double, top As Double
    
    ' 新しいワークシートを追加
    Set ws = ThisWorkbook.Sheets.Add
    ws.name = "Diagram"
    
    ' 図の開始位置
    left = 50
    top = 50
    
    ' local グループ
    With ws.Shapes.AddShape(msoShapeRectangle, left, top, 400, 300)
        .Fill.Transparency = 0.9
        .Line.Visible = msoTrue
        With .TextFrame2.TextRange
            .text = "local"
            .ParagraphFormat.Alignment = msoAlignCenter
        End With
    End With
    
    ' Dify Docker グループ
    With ws.Shapes.AddShape(msoShapeRectangle, left + 20, top + 20, 200, 200)
        .Fill.Transparency = 0.9
        .Line.Visible = msoTrue
        With .TextFrame2.TextRange
            .text = "Dify Docker"
            .ParagraphFormat.Alignment = msoAlignCenter
        End With
    End With
    
    ' Weaviate Docker グループ
    With ws.Shapes.AddShape(msoShapeRectangle, left + 230, top + 20, 150, 100)
        .Fill.Transparency = 0.9
        .Line.Visible = msoTrue
        With .TextFrame2.TextRange
            .text = "Weaviate Docker"
            .ParagraphFormat.Alignment = msoAlignCenter
        End With
    End With
    
    ' venv グループ
    With ws.Shapes.AddShape(msoShapeRectangle, left + 230, top + 130, 150, 100)
        .Fill.Transparency = 0.9
        .Line.Visible = msoTrue
        With .TextFrame2.TextRange
            .text = "venv"
            .ParagraphFormat.Alignment = msoAlignCenter
        End With
    End With
    
    ' Groq Cloud グループ
    With ws.Shapes.AddShape(msoShapeRectangle, left + 420, top, 150, 100)
        .Fill.Transparency = 0.9
        .Line.Visible = msoTrue
        With .TextFrame2.TextRange
            .text = "Groq Cloud"
            .ParagraphFormat.Alignment = msoAlignCenter
        End With
    End With
    
    ' 各コンポーネントを追加
    AddComponent ws, "質問", left + 30, top + 50, 80, 40
    AddComponent ws, "ベクトル検索", left + 30, top + 100, 80, 40
    AddComponent ws, "RAG", left + 30, top + 150, 80, 40
    AddComponent ws, "回答", left + 30, top + 200, 80, 40
    AddComponent ws, "vectorDB", left + 265, top + 50, 80, 40
    AddComponent ws, "flask", left + 265, top + 160, 80, 40
    AddComponent ws, "llama 3", left + 455, top + 30, 80, 40
    
    ' 矢印を追加
    AddArrow ws, left + 70, top + 90, left + 70, top + 100
    AddArrow ws, left + 70, top + 140, left + 70, top + 150
    AddArrow ws, left + 70, top + 190, left + 70, top + 200
    AddArrow ws, left + 110, top + 120, left + 265, top + 180, "HTTPリクエスト"
    AddArrow ws, left + 345, top + 180, left + 500, top + 70, "テキスト生成"
    AddArrow ws, left + 500, top + 70, left + 110, top + 170
    AddArrow ws, left + 305, top + 160, left + 305, top + 90, "ベクトル検索"
    AddArrow ws, left + 305, top + 90, left + 305, top + 160
    AddArrow ws, left + 345, top + 180, left + 110, top + 120
End Sub

Sub AddComponent(ws As Worksheet, name As String, left As Double, top As Double, width As Double, height As Double)
    With ws.Shapes.AddShape(msoShapeRectangle, left, top, width, height)
        .Fill.ForeColor.RGB = RGB(200, 200, 200)
        .Line.Visible = msoTrue
        With .TextFrame2.TextRange
            .text = name
            .ParagraphFormat.Alignment = msoAlignCenter
        End With
    End With
End Sub

Sub AddArrow(ws As Worksheet, startX As Double, startY As Double, endX As Double, endY As Double, Optional text As String = "")
    With ws.Shapes.AddLine(startX, startY, endX, endY)
        .Line.EndArrowheadStyle = msoArrowheadTriangle
    End With
    If text <> "" Then
        With ws.Shapes.AddTextBox(msoTextOrientationHorizontal, (startX + endX) / 2 - 40, (startY + endY) / 2 - 10, 80, 20)
            .TextFrame2.TextRange.text = text
            .TextFrame2.TextRange.ParagraphFormat.Alignment = msoAlignCenter
            .Line.Visible = msoFalse
            .Fill.Visible = msoFalse
        End With
    End If
End Sub

以下のような図が出力される。

image.png

結論

mermaid記法を使いましょう。

1
0
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
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?