draw.ioのURL埋め込みのエンコード形式を、o1 pro modeで特定する。

draw.ioのURLパラメータに図形データを渡せるが、仕様をよんでもよくわからなかった。

真面目に読む気が無いとも言う。

＜結論＞

Draw.ioで使用されているエンコーディングプロセスを以下のようにまとめます：

1. XMLデータの前処理（Minify）

   • 改行文字（\r\n）の削除
   • タブ文字（\t）の削除
   • 複数の空白文字を1つに統合
   • タグ間の空白を削除（> < → ><）
   • 前後の空白をトリム

2. UTF-8エンコーディング

   • 文字列の各文字をUTF-8のコードポイントに変換
   • サロゲートペア（0xD800-0xDFFF）の特別処理
   • Uint8Arrayとしてバイト列を生成

3. Raw Deflate圧縮

   • 圧縮レベル: 9（最大圧縮）
   • ZLIBヘッダーなし（raw: true）
   • windowBits: -15（Raw Deflateモード）

4. Base64エンコーディング

   • 圧縮されたバイナリデータを標準的なBase64に変換
   • 文字セット: A-Z, a-z, 0-9, +, /
   • パディング文字: = （必要な場合）

このエンコードされたデータは、Draw.ioのURLで #R の後に配置され、ダイアグラムとして復元されます。

オンラインコンバーター
https://jgraph.github.io/drawio-tools/tools/convert.html

URL埋め込みの仕様
https://drawio-app.com/blog/extracting-the-xml-from-mxfiles/

draw.ioのURLパラメタ仕様
https://www.drawio.com/doc/faq/supported-url-parameters

実際は上記の説明と違い、<mxfile>ごとエンコードして構わない。
https://chatgpt.com/share/676274d8-157c-8007-b3a6-3a2bb10728ca

サンプル図形

https://viewer.diagrams.net/index.html?tags=%7B%7D&lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=souzoku.drawio#R%3Cmxfile%3E%3Cdiagram%20name%3D%22%E7%9B%B8%E7%B6%9A%E9%96%A2%E4%BF%82%E5%9B%B3%22%20id%3D%22inheritance-diagram%22%3E7Vhbb5swFP41fmQCzPUREtI9rN2kaNreKgouWDU4cpzbfv2OiUmA0JVUrfqwRpFqvnM%2Fn88pLcKzan8j0lV5y3PCkG3me4TnyLYtz3fgh0IOR8THwREoBM210hlY0j9Eg6ZGNzQn656i5JxJuuqDGa9rkskelgrBd321R876UVdpQS6AZZayS%2FQXzWWpUcsLz4KvhBalDh3Y%2FlFQpa2yrmRdpjnfdSCcIDwTnMvjqdrPCFPNa%2FtytFs8Iz0lJkgtpxj4mRlv739vbr%2FffXu6%2F1ku9t6dob1sU7bRBetk5aHtgOCbOifKiYlwvCupJMtVminpDjgHrJQVgycLjo%2BUsRlnXDS2eNF8AF9LwZ9IR2I2H2XBa7lIK8rUBbldQuwbLkuagShltKgBZeQRKowvC26zJ0KSfQfSDbghvCJSHEBFSwPNxaH%2FuDszazsaKzukWi2Hqb5NxcnzueFw0D2%2Fov%2F2SP89pqrN6RaORVN44qLYUt%2FER6GDYlMhkYOiCCUhCjAKktYMsuhaXjqzQtc0TAu%2Bk01s03auNEGJh8J5kzLkG6FopjON50oUBygAnUCVEvuqmmCm1JRyjCKMEqjJRIHb%2BJmhKLAMy7gm%2FLE%2FvooaBk2jXBUAfI2LICG7CQ%2FIvNVJOpmdrDwUhE32bnOY24ZtnFh7EMOshrkOpgsuruyPUH9Ual6TwVxpaDAdaggo7K1IwxXNcxVkdGL7M%2F2PEXyDmQv7MxeOzJw9NnPme80c%2Fr92njNYepb34VvPmbb1YNnFaiDhEMMaiK4a%2F%2BHChAGPGsRVA65u4eSF6btvu%2F1Cr13hCYoXnR0zFGEDq9s6OSosNFfv0wgO%2BHMrPT8Vg7Vk%2BR%2B%2Bl9yX9xKp80i91J773aGo375XbZ9nG0vy3mvyZVs7bXNHutZigrBU0m3%2F5XqskzrCD04hkxNr2B6whsMvbt%2FJmm9ERrRd93V44MoxX3QlU1EQeeGqIfdU%2Buv59j75fonvCSS9lm97%2BNvtndn2P9m%2Blu0LiiZzHbwX1%2FB4%2Fov9qH7%2BvwdO%2FgI%3D%3C%2Fdiagram%3E%3C%2Fmxfile%3E#%7B%22pageId%22%3A%22inheritance-diagram%22%7D

<mxfile>{なにかのエンコードされた文字列}</mxfile>

パット見でbase64とurlエンコードされてるけど、他がわからんので、下の文字列をo1 pro先生に聞いてみた。

7Vhbb5swFP41fmQCzPUREtI9rN2kaNreKgouWDU4cpzbfv2OiUmA0JVUrfqwRpFqvnM/n88pLcKzan8j0lV5y3PCkG3me4TnyLYtz3fgh0IOR8THwREoBM210hlY0j9Eg6ZGNzQn656i5JxJuuqDGa9rkskelgrBd321R876UVdpQS6AZZayS/QXzWWpUcsLz4KvhBalDh3Y/lFQpa2yrmRdpjnfdSCcIDwTnMvjqdrPCFPNa/tytFs8Iz0lJkgtpxj4mRlv739vbr/ffXu6/1ku9t6dob1sU7bRBetk5aHtgOCbOifKiYlwvCupJMtVminpDjgHrJQVgycLjo+UsRlnXDS2eNF8AF9LwZ9IR2I2H2XBa7lIK8rUBbldQuwbLkuagShltKgBZeQRKowvC26zJ0KSfQfSDbghvCJSHEBFSwPNxaH/uDszazsaKzukWi2Hqb5NxcnzueFw0D2/ov/2SP89pqrN6RaORVN44qLYUt/ER6GDYlMhkYOiCCUhCjAKktYMsuhaXjqzQtc0TAu+k01s03auNEGJh8J5kzLkG6FopjON50oUBygAnUCVEvuqmmCm1JRyjCKMEqjJRIHb+JmhKLAMy7gm/LE/vooaBk2jXBUAfI2LICG7CQ/IvNVJOpmdrDwUhE32bnOY24ZtnFh7EMOshrkOpgsuruyPUH9Ual6TwVxpaDAdaggo7K1IwxXNcxVkdGL7M/2PEXyDmQv7MxeOzJw9NnPme80c/r92njNYepb34VvPmbb1YNnFaiDhEMMaiK4a/+HChAGPGsRVA65u4eSF6btvu/1Cr13hCYoXnR0zFGEDq9s6OSosNFfv0wgO+HMrPT8Vg7Vk+R++l9yX9xKp80i91J773aGo375XbZ9nG0vy3mvyZVs7bXNHutZigrBU0m3/5XqskzrCD04hkxNr2B6whsMvbt/Jmm9ERrRd93V44MoxX3QlU1EQeeGqIfdU+uv59j75fonvCSS9lm97+Nvtndn2P9m+lu0LiiZzHbwX1/B4/ov9qH7+vwdO/gI=

回答

デコードするにはbase64のあと、zlibやれだとさ。

https://chatgpt.com/share/676274d8-157c-8007-b3a6-3a2bb10728ca