EY-Office ブログ

以前書いたブログ ソフトウェア設計ツールの寿命について考えてみたの問題が解決したかも知れません。

このブログで書いたのは「私はシステムの設計時にはER図やUML（の一部）を書きますがツールの選択で悩みます」

• 開発時
  • その時点ではプロプライエタリ（有償）だったとしても、手に馴染む良いツールを使いたい
• メンテナンス・フェーズ（この期間は長いです）
  • 使用頻度は下がるので良いツールでなくてもよい
  • 最悪な場合、プロプライエタリなソフトは開発が終了してしまう場合もある
  • オープンソースなツール、またはPowerPointのような超メジャーなツールに乗り換えるか？
  • しかし、プロプライエタリなツールのデータは非公開なものが多く、ツールの乗り換えは手間

Bing Image Creatorが生成した画像をGemini 2.5 Flash Imageで編集した画像を使っています

余談ですがBing Image Creatorで可愛い画像を作ってもらい、細かい点の修正を日本語で指示できるGemini 2.5 Flash Imageで行うのは快適ですね。😄

draw.io

皆さまはdraw.ioを使っていますか？

draw.ioは無料で利用できるブラウザベースの図表作成ツールです。フローチャート、UML、ER図、組織図、ネットワーク図など、さまざまな種類の図表やダイアグラムを直感的な操作で作成できます（AI要約）。

• 私もときどき使っていますが、使い勝手は専用ツールよりは劣りますが汎用の図形ツールとしては良いと思います
• 英国JGraph Ltdが開発元ですが、完全なオープンソース(Apache 2.0)です → draw.ioのGittHub
• データ形式も公開されているようです → Manually edit the XML source of your draw.io diagram

PDF to draw.io

AIに色々と聞いていたら Claude Codeはdraw.ioのデータを作成できるらしい事を知りました。と言うことはPDFを読み込みdraw.ioを出力できる可能性があります。

以下の画像はUMLツールasthで作成したER図のPDFから作った画像です（現在も動いているシステムなのでぼかしが入っています）。

Claude Codeで変換

Claude Codeに以下のようのプロンプトを与えてみまました。

ERD.pdfファイルにかかれたER図をdraw.ioで書き直して出来たXMLファイルに変換してERD.drawio ファイルに書いてください

以下は実行ログの一部です。PDFをたんなる図ではなくER図として認識している事が判ります。

╭───────────────────────────────────────────────────╮ 
│ ✻ Welcome to Claude Code!                         │ 
│                                                   │ 
│   /help for help, /status for your current setup  │ 
│                                                   │ 
╰───────────────────────────────────────────────────╯ 
 
 Tips for getting started: 
 
  Run /init to create a CLAUDE.md file with instructions for Claude 
  Use Claude to help with file analysis, editing, bash commands and git 
  Be as specific as you would with another engineer for the best results 
  ✔ Run /terminal-setup to set up terminal integration 
 
> ERD.pdfファイルにかかれたER図をdraw.ioで書き直して出来たXMLファイルに変換してERD.drawio ファイルに書いてください 
 
⏺ I'll help you convert the ER diagram from the ERD.pdf file into a draw.io XML format and save it as ERD.drawio. Let me start by 
  reading the PDF file to understand the ER diagram structure. 
 
⏺ Read(ERD.pdf) 
  ⎿  Read PDF (116.6KB) 
 
⏺ PDFから以下のエンティティと関係を確認しました： 
 
  主要エンティティ: 
  - 大分類 (id, 名称, ・・・
  - 中分類 (id, 名称, ・・・
  - 小分類 (id, 名称, ・・・
  - 商品 (id, 商品コード,  ・・・
  - 在庫 (id, コード枝番,  ・・・
  - お客様 (id, 名前,  ・・・
  - 注文 (id, 注文日時,  ・・・
  - 注文詳細 (id, 数量,  ・・・
 
  他にも、セット商品、セット詳細、ポイント履歴、・・・ のエンティティがあります。 
 
⏺ Write(ERD.drawio) 
  ⎿  Wrote 218 lines to ERD.drawio                                                                                                
     <mxfile host="app.diagrams.net" modified="2023-01-07T00:00:00.000Z" agent="5.0" version="20.8.16" etag="drawio-generated"  
     type="device"> 
       <diagram name="ER図" id="er-diagram"> 
         <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" 
     pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0"> 
           <root> 
             <mxCell id="0" /> 
             <mxCell id="1" parent="0" /> 
             <!-- 大分類 --> 
             <mxCell id="daiCategory" value="大分類&lt;br&gt;---&lt;br&gt;id (PK)&lt;br&gt;名称&lt;br&gt;表示順&lt;br&gt;css" 
     style="whiteSpace=wrap;html=1;align=left;verticalAlign=top;fontSize=12;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" 
     parent="1"> 
               <mxGeometry x="40" y="40" width="120" height="100" as="geometry" /> 
     … +208 lines (ctrl+o to expand) 
 
⏺ ERD.pdfのER図をdraw.io形式のXMLファイルに変換し、ERD.drawioファイルとして保存しました。 
 
  変換内容： 
  - 15個の主要エンティティ（大分類、中分類、小分類、商品、在庫、お客様、注文、注文詳細 ・・・
  - 各エンティティの属性とPK/FK関係 
  - エンティティ間のリレーションシップ（1:N、N:M） 
  - 色分けによる視覚的なグループ化 
 
  draw.ioで開いて編集・表示できます。 
 
> /exit  
  ⎿  Goodbye! 
 
 
Total cost:            $0.2323 
Total duration (API):  1m 39s 
Total duration (wall): 19m 33s 
Total code changes:    218 lines added, 0 lines removed 
Usage by model: 
    claude-3-5-haiku:  137 input, 27 output, 0 cache read, 0 cache write ($0.0002) 
       claude-sonnet:  22 input, 7.9k output, 117.0k cache read, 21.1k cache write ($0.2321) 

Claude Codeの変換結果

ドキドキしながら生成されたERD.drawioをdraw.ioでオープンしてみました。以下の画像（これもぼかしています）のようなデータができていました！ 思っていたよりずっと良い出来で顔がニヤニヤしてしまいました。😄

手作業で修正

最初のER図PDFの画像に合わせて修正してみました。

修正点は：

• 配置の調整
  • テーブルで1つの図形になっていますしリレーションシップも正しく接続されてるので楽でした
• リレーションシップをIDEF1X記法のカーディナリティ記号に変更
  • IDEF1X記法で書いてとプロンプトで指定したら出来たのかも
• テーブルの色（グループ分け）を修正
  • なぜか色が間違っていました
• 注記の追加
  • 注記は無視されました。これは、正しくER図が認識されているとも言えます

修正時間は50分程度でした、久々にdraw.ioを使ったので修正に手間取ったりしたので満足できる時間です。

まとめ

AIの力でソフトウェア設計ツールの寿命について考えてみたの問題が解決できたのに驚きました。Claude Codeでの変換は完全ではありませんでしたが、AIは日々進化しているので新しいAIモデルが出ればさらに変換精度は上がるはずです。
プロプライエタリなツールの採用もその時点で良いのもでであれば、これからは永続性は考えずに採用できますね。

他の設計図(UMLのユースケース図、コンポーネント図)も変換してもらいましたが、ER図とおなじくらいの変換ができていました。😄