記事の概要
LLMが広まり、LLMが取り扱える図の表現方法として、mermaid記法も広まった。
ただ、それに伴い、mermaid記法を人が修正するというのは、少し癖がある作業に感じている。
そこで、mermaid記法の図をdrawioの図に変換し、GUI操作で図を更新する手順を試す。
LLMは現状、Claude 3.5 Sonnet一択。
回数制限はあるが、無料で使えるので試してみてください。
PowerPoint/Excelについても似たような手順を紹介していますが、見なくていいです。
動画でも解説してます。
環境構築
■VSCodeインストール
■VSCode拡張機能インストール
VSCodeを起動し、以下のキャプチャの一番下のアイコンを押下する。
検索窓で「Draw.io Integration」を検索し、インストールする。
mermaid2drawio
プロンプト
Claudeで以下のようなプロンプトを実行する。
できるだけ、画像と一緒に入力した方が精度が上がります。
以下がプロンプトの全体像。
画像は以下のmermaid記法で作成された図です。この図をdrawioで出力するためのxmlを作成してください。
コードはコピペできるように全て出力してください。
エラーを出したら罰金です。
```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の出力
以下のような形式で出力される。
途中で途切れる場合は、「続きを出力」とかで続きを出力させると、２ページ目として出力される。
VScodeで確認
「.xml」拡張子のファイルに、LLMが出力したxmlを保存する。
その後、拡張子を「.drawio」に変更することで、drawioの図が表示される。
一応、出力されたxmlの全容。
<mxfile host="app.diagrams.net" modified="2023-08-28T12:00:00.000Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36" etag="123456789" version="14.9.8" type="device">
<diagram id="prtHgNgQTEPvFCAcTncT" name="Page-1">
<mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="2" value="local" style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" vertex="1" parent="1">
<mxGeometry x="40" y="40" width="480" height="360" as="geometry" />
</mxCell>
<mxCell id="3" value="Dify Docker" style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" vertex="1" parent="2">
<mxGeometry x="20" y="40" width="280" height="300" as="geometry" />
</mxCell>
<mxCell id="4" value="質問" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="3">
<mxGeometry x="20" y="40" width="100" height="40" as="geometry" />
</mxCell>
<mxCell id="5" value="ベクトル検索" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="3">
<mxGeometry x="20" y="120" width="100" height="40" as="geometry" />
</mxCell>
<mxCell id="6" value="RAG" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="3">
<mxGeometry x="20" y="200" width="100" height="40" as="geometry" />
</mxCell>
<mxCell id="7" value="回答" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="3">
<mxGeometry x="160" y="200" width="100" height="40" as="geometry" />
</mxCell>
<mxCell id="8" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="3" source="4" target="5">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="9" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="3" source="5" target="6">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="10" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="3" source="6" target="7">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="11" value="Weaviate Docker" style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" vertex="1" parent="2">
<mxGeometry x="320" y="40" width="140" height="100" as="geometry" />
</mxCell>
<mxCell id="12" value="vectorDB" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="11">
<mxGeometry x="20" y="40" width="100" height="40" as="geometry" />
</mxCell>
<mxCell id="13" value="venv" style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" vertex="1" parent="2">
<mxGeometry x="320" y="160" width="140" height="100" as="geometry" />
</mxCell>
<mxCell id="14" value="flask" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="13">
<mxGeometry x="20" y="40" width="100" height="40" as="geometry" />
</mxCell>
<mxCell id="15" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="2" source="5" target="14">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="300" y="180" />
<mxPoint x="300" y="220" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="16" value="HTTPリクエスト" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="15">
<mxGeometry x="0.2" y="2" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="17" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="2" source="14" target="12">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="18" value="ベクトル検索" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="17">
<mxGeometry x="-0.2" y="1" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="19" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;" edge="1" parent="2" source="14" target="5">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="280" y="220" />
<mxPoint x="280" y="190" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="20" value="Groq Cloud" style="swimlane;startSize=20;horizontal=1;containerType=tree;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","startArrow":"none","endArrow":"none"};" vertex="1" parent="1">
<mxGeometry x="560" y="40" width="140" height="100" as="geometry" />
</mxCell>
<mxCell id="21" value="llama 3" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="20">
<mxGeometry x="20" y="40" width="100" height="40" as="geometry" />
</mxCell>
<mxCell id="22" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="6" target="21">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="23" value="テキスト生成" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="22">
<mxGeometry x="-0.2" y="1" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="24" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;" edge="1" parent="1" source="21" target="6">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="540" y="110" />
<mxPoint x="540" y="310" />
</Array>
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
最終成果物としては、少し修正が必要な状態だが、１から作成するよりは、かなり工数が削減できる。
drawio2mermaid
プロンプト
こんな感じのプロンプトで、mermaid記法に戻してみる。
以下のような出力となった。
graph TB
subgraph local
subgraph "Dify Docker"
A[質問] --> B[ベクトル検索]
B --> C[RAG]
C --> D[回答]
end
subgraph "Weaviate Docker"
E[vectorDB]
end
subgraph venv
F[flask]
end
B -->|HTTPリクエスト| F
F -->|ベクトル検索| E
F --> B
end
subgraph "Groq Cloud"
G[llama 3]
end
C -->|テキスト生成| G
G --> C
mermaidを図として表示すると、以下の状態。
可逆性のある結果となった。
その他
以下も基本mermiadからxmlを一発で出力。
AWSの画像も出力可能
スケジュールも
ERDも
結果
正直、精度は取り扱う図にもよるが、例え修正が必要でも、１から作るよりは圧倒的に楽になることは想像できる。
図の複雑さにも左右されるが、mermaidとの可逆性があることも評価が高い。